- Revisit wireframing and UX flow
- I began my design process by reviewing my pre-existing wireframes from Assessment 2 and adjusting the UX flow. Upon judgement, I decided to replace the live feature from the top of my homepage for user goals because it added more value to the user experience. Similarly, I added an additional page to the on boarding process (muscle group page) to better curate exercises based on the users exercise needs.
- After reviewing my ideas I updated both my wireframes and user flow diagram which now follows as;
- Login to app — rate mood — select target muscle group — select fitness interests — browse user goals — browse trending exercises — browse suggested workouts — select desired workout — select profile page.
2. Research additional designs for aesthetic purposes
- Secondly, I began to collate additional screenshots of aesthetically pleasing apps because I wanted to elevate the visual aesthetics of my work. In particular, I took note of curved rectangles, progress bars and grey colour schemes with the exception of an accent colour to highlight points of interactivity. I wanted to emulate these designs within my own work to best satisfy the user experience.
3. Produce storyboards
- Thirdly, I began to craft 2 storyboards following my pre-conceptualised personas in Assessment 2.
- My first storyboard on Steve remained the focus of my entire app and was specifically curated following his interests in an arms workout and not knowing correct form. Creating this storyboard enabled me to have a clear vision of my key user/demographic for my app and create the best possible prototype for Goodlife.
- My second storyboard was on Michelle, whom has low energy after a draining day at work and struggles time to get all the things she needs to get done.
4. Conduct AB testing
- Fourthly, I began to AB test key areas in my app prototype. In particular, I decided to test whether users preferred a navigation bar or a hamburger icon, pictures or dropdown list, login with socials or without. I made 6 mock-ups and then presents 5 users with the designs.
- Upon feedback, I discovered that a navigation bar, pictures and login with socials were the preferred options.
5. Produce prototypes
- Page 2/3 of my on-boarding screens demonstrates an effective use of depth of processing by combining the visual and textual reference for each muscle group. This helps to elevate the user experience because they can easily understand and select their desired workout.
- Also, the “back” and “next” button are highlighted in blue to emphasise visual property and enhance navigation.
- Additionally, the “back” button demonstrate explicit affordances because users can easily associate the arrow with reversing actions. Furthermore, this button is an example of good affordances because it increases visual awareness that the button can be clicked to redirect users to tailored workouts.
- The plus button demonstrates explicit accordance because it acts as a visual cue to indicate interactivity. Furthermore, the plus button is a universally understood symbol and will help to elevate the user experience because users will easily understand how to add a daily goal.
- The saved button on the trending workouts demonstrates consistency because it is placed in the position on each page. Additionally it displays good recognition over recall because users won’t have to remember which exercise workouts they liked, thus enhancing their experience.
- The navigation bar also represents the principle of consistency because each icon has the same size and positioning.
- Also, the use of icons; home, exercise and profile highlight a good sense of mapping because they are universally understood symbols.
- The exercise page is placed in hierarchical order according to importance. Specifically, the buttons; your workouts and trending are the main points of navigation thus, placed at the top. Following down is the exercise overview and then specific exercises. This will ensure a positive user experience because users can easily find the key points in the design.
- Once each exercise image is clicked, the progress bar is highlighted blue to indicate completion.
- The wording of each exercise uses plain, ordinary language which is easily comprehensible.
- The profile page utilises the Zeigarnik Effect through the daily goals. These icons act as a visual source of motivation and encourage users to persevere through their workout.
- This page also uses blue highlighting to emphasise the key points of information to the users, thus enhancing their experience.
6. User testing/Apply changes and recommendations
- After producing my prototypes, I conducted user testing on the overall design and user experience of the app. I interviewed 5 candidates and ran them through each page while closely observing their interaction with each touchpoint.
- In doing so, I identified weaker points in my navigation such as; the lack of filters and a drag feature for the trending section on the home page, as well as no edit button on the profile page.
- Additionally, some outlier results encouraged me to include a screen reader, Fit Bit functionality, shading of fitness progress bar and a graphic showing completion of exercise at the end of the exercise page.
- I found it difficult to confine all the relevant details on the homepage.
- And balance aesthetics with usability, which led to a more timely process of redesigning my homepage to get it right.
- If I were to redevelop my app, I would try integrate a button which syncs the user’s exercise with Fit Bit functionality. This would allow them to receive more personalised information regarding their exercise journey e.g. heart rate.
- Overall I am satisfied with the app I have created, because it addresses the following user goals; implementation of curated exercise programs, video demonstrations and integration of like minded individuals within the community.