Interaction Design Capstone Project
This is the last assignment in which I have to explain my project on Medium. I made an app prototype for the people who need to do exercises but cannot do for lack of companion or lack of time to know about appropriate exercises. I would like to tell you about the design process.
Design Brief
There are so many people who want to lose their weight but cannot do properly for lack of encouragement, companion and lack of time to find correct exercises for them. So they feel frustrated to think about it. I want to make a mobile app which can encourage them to do exercises and make exercise program with others and makes this program enjoyable and challenging.
In my app users can get exercise by categories so they don’t need much time to do this, because there are reason is mentioned for every exercise. User can make plan with others for exercises and mainly other activities like swimming, cycling, racing etc. I had to choose one of the design briefs ‘Time’, ‘Change’ or ‘Glance’ for observation. I chose the “Chance”s design brief for my observation. I’ve observed different people interacting with their mobile phones. And I noticed using mobile device is very closely connected with their daily life besides talking or texting. people can get inspired doing anything if they are connected with other people. So I have made my “exercise” app to help users to keep their exercises in their do’s list.
Storyboards:


Prototypes:
Paper prototypes:

Heuristic Evaluation:
A heuristic evaluation is a usability inspection method for computer software that helps to identify usability problems in the user interface (UI) design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles (the “heuristics”)
https://www.nngroup.com/articles/ten-usability-heuristics/
Changes of my app based on heuristic evaluation:

First web-based Prototype:
I have chosen “InVision” platform to make web-based mobile app. Here my first web-based prototype link: https://invis.io/NBCLULSWC#/241724232_Start
Wireframe:
We begin our visual design process with making a wire frame only for home page. My wire frame was:

User Testing:
Finally, we put our fully-flushed out prototype to test with actual users.


For my online test, my main goal was to see how users interact with the buttons with information. How many people click on “Search” tab instead of clicking “Exercise” button. One interface “A” is the button with same color like “home” or hamburger menu and the “B” is simply black text on white background in a box. And notification icon is also changed in prototype B.

2nd user pretty much liked my prototype A. 1st user had some opinion about my design and exercise information. 1st user noticed that my “sign in” page is as regular as other app. By hearing voice of 1st user I think he suggests to make my prototype more colorful and need some change.

Both user clicked on “search” bar without any confusion on prototype B. They both were focusing on one thing mainly that how they get back in previous page and home page and if cross or close buttons works for every lay over menus.
2nd user of screen B clicked on notification and she uttered “notification” before clicking it. That means users might recognize notification icon now.

When we use any app we get curious to know if there is any new notification or message. We normally want to click it first. I designed my notification icon with 1 new notification. In screen A users didn’t get interested to click it. That means might be they didn’t recognize the icon. In screen B both users were interested to click on it.

* I want to continue my work with screen B. So “search” bar is changed
* Notification icon is changed
*Some more information is added for exercise
* Font and background colors are changed
* Font size might be changed for some menu.
Final prototype:
Conclusion:
I’ve learned a lot about the design process and have enjoyed reviewing and interacting with my classmate’s projects. I want to say thanks to my peers. We helped each other and discussed the assignments questions.
video of my final project can be found here: https://youtu.be/_96xQKy-UzY