SYAFIQ K. DESIGNS
My Handy Fitness Guide
Methods: User Interviews, Affinity Mapping, Wireframing, User Flows, Prototyping & Testing
Tools: Figma
Type: Course/Personal Project
Timeline: 2 weeks
Challenge:
Design a mobile app, by applying user research, sketching and prototyping, and testing and iteration to identify and solve a problem for a target audience.
1
2
3
4
User
Research
User Flow & Sketches
Prototyping
& Testing
Next
Steps
User Interview:
We interviewed 8 users, male and female, ages ranging from approx. 20-60 years old. The questions were centred around what their understanding of health & fitness was and how would they describe their experiences as first-timers working out in the gym.
Based on the affinity mapping that was done, here are the main trends from the findings:
Feel embarrassed if they
have insufficient knowledge
to work out
Avoid the equipment;
unsure on how to
operate them
Need assistance before they
start working out
Would like some form of digital online reference
Persona:
Next, we created a persona based on the user interview. Meet Sharleni, a seasoned banker and enjoys her work-life balance. After work, she would only work out on the treadmills, as it is the only equipment she knows how to use. Lately, she’s been curious to try the other gym equipment but unsure on how to use them.
Sharleni, 34, Sales Banker, Singapore
“It’s quite intimidating when everyone seems to know what they’re doing. I think I’ll probably just stick to the treadmills.”
Goals:
-
An understanding of the principles of exercising
-
Gain knowledge on how to start working out on her own
Frustrations:
-
Lack of confidence in exercising
-
Unsure on how to operate the equipment, and also how they would benefit her
Understanding Sharleni's problem:
We created a storyboard to better understand our persona's problem. This would help us craft a problem statement and propose a solution statement.
Then we came up with the problem & solution statements as well as 'How Might We' tackle the problem with the proposed solution in mind.
Problem:
Sharleni feels unsure about working out on her own, needs to equip herself with basic knowledge on exercise but is unsure of what exercises she needs to be doing and how they benefit her.
Proposed solution:
We believe that by creating a digital handy guide for Sharleni, we will help her understand the basic what, hows and whys of exercise, and thus be more confident to exercise with on her own.
How Might We:
-
Introduce a comprehensive knowledge guide
-
Demonstrate a variety of workouts
-
Knowledge on how to workout safely
1
2
3
4
User
Research
User Flow & Sketches
Prototyping
& Testing
Next
Steps
Sketching The Concept:
From the 'How Might We', below are some broad-level sketches that aim to 'introduce a comprehensive knowledge guide' and 'demonstrate a variety of workouts.
Knowledge guide page
Workouts page
Planning The User Flow
We then planned out how the user flow, for the knowledge guide page, would look like.
1
2
3
4
User
Research
User Flow & Sketches
Prototyping
& Testing
Next
Steps
Solving Sharleni's Problem:
Before we move to the prototyping & testing, let us have a look at how we decide to solve Sharleni's problem with this storyboard.
Usability Testing (UT) Objective:
We wanted to observe if users found the app intuitive and easy to use. We had 5 participants and 2 rounds of testing to understand what improvements could be made for ease of usability.
Below are some of the key findings:
-
Interface layout & design looks clean, well-organised and free from clutter
-
Lessons and quiz was informative and fun
-
‘Knowledge’ segment is very useful
-
Usage of videos made them felt excited
-
App was overall intuitive
+
-
Pages within the lesson were not as clear - would not know how many pages there are
-
Did not immediately know that they must complete the 1st lesson before progressing to the next
-
‘Next’ button in the lesson pages made it unclear if users would go to the next page or complete the 1st lesson
-
‘Lesson unlocked’ header was not noticeable at first glance
-
Iterations:
We wanted to observe if users found the app intuitive and easy to use. We had 5 participants and 2 rounds of testing to understand what improvements could be made for ease of usability.
Below are some of the key findings:
What was discovered:
During the first phases of wireframes,
we have noticed that some of the testers kept trying to tap/access the other lessons before clicking lesson 1 (despite them being a shade lighter
What was being iterated:
We have added lock icons to denote that the lessons are locked until lesson 1 is completed. Lesser clicks on this area were discovered during later testings.
What was discovered:
Testers were not aware immediately that they have unlocked the lessons with the notification at the top of the page.
What was being iterated:
Added a pop-up notification so they could be aware of the new lessons unlocked; background darkened to direct focus on the pop-up. Users could also tap/access the new lessons directly from the pop-up.
What was discovered:
Some testers felt confused when they do not know at which page are they currently at during the lessons. And having the ‘next’ button made them feel like they were executing a task rather than proceeding next.
What was being iterated:
Some new elements were added such as pagination, arrows to indicate that they can move to and fro throughout the pages. Additionally, they could also swipe the pages left and right, the ellipses are there for to indicate that function.
1
2
3
4
User
Research
User Flow & Sketches
Prototyping
& Testing
Next
Steps
Learnings and moving forward:
We have learnt that based on our UT, there was various conflicting feedback about the design. One way to address this is to gather more participants for the next UT rounds.
Below are the upcoming plans for the design and what could be prioritised in the future to improve the user experience of the app.
Consider how ‘knowledge’ & ‘workout’ could have an interactivity element
Having a basic first aid in the lessons; also have the possibility to interact with the ‘safety’ tab
Consider increasing the difficulty of the quiz