Usability & Mobile Application 2 - APP PROJECT

Usability & Mobile Application - App Project

1 April, 2019 - 5 July, 2019 (Week 1 - Week 14)
Jesslyn Fabryando (0332213)
Usability & Mobile Application 2



BRIEF: Mobile Application Proposal
Research, brainstorm and create a proposal for a mobile application of your choice.

Description and Requirement
The mobile app can be of any type other than game. For example, social media, online shopping, utility, etc.

The proposal must contain

  1. The title of the mobile app and rationalize on why you have chosen that particular title
  2. Description on what the mobile app is about
  3. Problem statement
  4. Proposed solution
  5. The design concept of the mobile app (color theme, typography, logo, navigation)
  6. SWOT analysis
  7. Sketches and Wireframes
  8. Layout design and content placement of each pages of the sections
  9. Design references that will clearly explain/ indicates what it is referencing. (do not just put screenshots and pictures without any descriptions in relation to your proposed design style and layout) 


1 April, 2019 (Week 1)

On the first week of class, we were briefed of the module outlines. We were suggested to make amends to out previous apps that we were working on last semester. After the brief session, we consulted our previous apps with Mr. Kannan. He gave his feedback, suggestion and things to consider for any changes to be made.

Things to consider for changes:

  • Set a package of workout for specific timeline for best result
  • Add a one month free trial and paid workout
  • Add social media features
  • Logo, icon

More research and looking on other apps are required to know the different looks and layout they provide also their features.

3 April, 2019 (Week 1)

On the first week of the second meeting of class, we do usability testing with the juniors; 1 semester below us.

Test objectives:
What are the goals of the usability test? What Specific questions will be answered?
Do people understand how to navigate to the workout section?

Participants:
How many participants will be participating?
Minimum of 2 people

Test Tasks:
What are the test tasks?
1. Sign up for the app
2. Get the participant to do a back pain reliever workout
3. Get the participant to share and rate their experiences after the workout
4. Exploring the app such as the profiles, reminder page, statistic report (history of their workout)

USABILITY TESTING (User 1) - Ng She Zhi




USABILITY TESTING (User 2) - Jennifer Vioniwinata




USABILITY TESTING (User 3) - Nadhirah Sabri




Analysis of Usability Testing
From the data that is gathered through the video, analysis is made to understand the user experience and make changes out of it to improve the app.



Positive feedback is given wherein the app is simple and easy to understand. However, I decided to make changes in the logo, some of the icons and also adding some features to enhance the app.


Revised Logo


Link to the current Adobe XD File: 
https://drive.google.com/open?id=19PN1lLVKNBjhmwBAwl_eKrItPoFjA4sK


23 April, 2019 (Week 4)

On the forth week of class, I did some consultation regarding the design of the app with Mr. Kannan. Some slight changes should be made regarding the icon and the content of the app. The color scheme was changed as well after some feedback given. In terms of some of the pages, I was given a feedback on adding some animation in order to make it engaging. 

Specific feedback and advice were given such as the navigation bar, I need to combined some information and just put the important things that people are looking for and want to see such as news, information of prevention or causes for the pain to trigger and position that you need to avoid. For the column 'Report' the word can be changed to achievement. For the reminder navigation, I need to make the clock a bit bigger and enable the use to scroll up and down to change the number clock (reference: clock in the phone). Description of how to do the exercise can be changed to number bullet points instead of using dashes. Final design layout will be on week 8.


Revised Color Scheme
Progression on the Revised Work using the new color scheme


1 May, 2019 (Week 5)

On the fifth week of class, we were being recapped on PhoneGap and did some exercise to try it out how to create a new file and link it with J-Query code, create a button, create a panel and make it appear in our phone with the help of the app downloaded in mobile called 'phone gap'.




8 May, 2019 (Week 6)

On the sixth week of class, we were taught on how to code using J-Query and some of the template code were given as a reference to guide us throughout the design for the app. As our task for this week, we were asked to complete the first page of out mobile app layout code it in dreamweaver.

Coding the first page of mobile app
Screenshot of the first page layout on the phone
Website reference links in help to create the first page layout:
jQuery code website: https://jquerymobile.com/download/ 
jQuery code for Grids: https://demos.jquerymobile.com/1.4.5/grids/
link an Icons to dreamweaver:  https://fontawesome.com/icons/facebook-f?style=brands


21 May - 9 June, 2019 (Week 8 - Week 10)

On the eighth week of class, I continue revising the design of the app.

Mood board

Finalized Adobe XD

Color Scheme and Chosen typeface

Mockup
Video Walkthrough: https://youtu.be/O2AWkdV986s


16 June - 12 July, 2019 (Week 11 - Week 15)

Video Walkthrough after coded: https://youtu.be/NDIU6yiOeqQ


Reflection

Overall, the outcome could have been produced better. Some of the pages that are supposed to be clickable are not designed and coded due to time constraint. I have tried inputing Java Script however, it doesn't work out and some works but the page is messed up, so I decided to remove all Java script Hopefully, if I have time I still want to figure out and learn inputing Javascript. Mr. Razif does help me in finding out how to use other's code and implement it in my file but the problem doesn't stop there and limited time that I have that I can't figure it out. Therefore, my coded page is purely using html, css and J-query.


Comments

Popular posts from this blog

Week 5 - Week 7 (Project 1) - A story Book (Babadook Book)

Week 10 - Week 14 (Final Assignment) - Tunnel Book/ Webcomic

Week 1 - Week 2 (Exercises) - Vormator Challenge