Mobile App Design
Community Focused Exercise App
Role: UI/UX Design
Team:
Business Founder
Duration: 2 Weeks
Project Background
Project Yu is a side business created by a local personal trainer called Matthew Chan. Through the business, he provides personal training and exercise programming services. He has also been building a community for health-conscious people where he can share his knowledge of health & fitness to enable them to make better choices toward living healthier and happier lives.
Problem
Figure out a way for him to reach a larger audience and leverage the benefits of group exercising while still being able to provide the attention of personal training.
Solution
A community-driven exercise app where members would follow a constantly varied training program and feel encouraged and motivated to follow through with it in order to achieve their health & fitness goals.
Research
Competitor analysis & Insights
Having had an initial kick-off meeting with Matt, we formed assumptions of what our solution could potentially look like. We identified several competitors who were tackling similar problems that we faced and I set out to analyse them.
Insights
-
A lot of existing solutions focused on business goals only.
-
Many competitors were expensive and aimed toward medium to large businesses.
-
There were very few solutions targeted toward personal trainers.
-
Little to no emphasis on creating a community environment for customer interaction.
It quickly became evident that there would be 2 sides to solving the problem which involved a client-facing interface as well as a business-facing interface. Due to the limitations of time, we decided to base the MVP on client-facing features first. This would allow us to test how valuable and useful the product would be for members before committing further resources to developing a full working system.
Interviews
The main goal of the interviews was to find out people’s attitudes and behaviour toward health and fitness. As well as whether they currently have an exercise routine and what it involves.
-
Total of 12 participants, 6 female and 6 male.
-
7 of which were current gym members.
-
5 who weren't but still exercised to varying degrees of regularity.
Key findings & insights
-
A community environment or the support of friends and family helps people stick with a regular exercise routine.
-
People want flexibility so that they can adapt exercise to their lifestyle.
-
People need more knowledge on how to exercise in a safe manner to avoid injury or to continue exercising around an existing injury.
-
Unfortunately, physical appearance is still the biggest driving factor for people to consider taking up an exercise routine.
-
People’s attitudes and perceptions of health and fitness are greatly influenced by the people around them.
Define
From my research I identified 2 target personas, they are:
Primary Persona
Winnie 'The Beginner'
-
Was never involved in sports growing up as a child.
-
Health issues forced her to even consider yoga.
-
Needs support from her friends to try different sports.
-
Gets anxious about trying new things.
-
Afraid of not being able to perform exercises and result in getting injured.
Secondary Persona
Ricky 'The Weekend Warrior'
-
A keen sportsman through most of his life, particularly in school.
-
Ambitious & competitive.
-
Experienced with exercise but needs help to push through a plateau.
-
Loud & overly friendly. Often mistaken for obnoxious & overwhelming.
With the long-term business goal of growing the business and increasing members in mind, I decided that targeting beginners first would be more suitable. The reason being, everyone is a beginner at one point and if we make the app as easy to adopt as possible, features that cater to more experienced users can be added later.
Reviewing the research insights helped generate the problem statements below.
Among these, there were a few that had a common theme and they were combined into the following problem.
-
Winnie needs to make lifestyle changes to prevent further health complications.
-
Winnie needs to get stronger to prevent back pain and maintain good health.
-
Winnie’s work hours can be irregular with occasional overtime, she needs flexibility to maintain a regular exercise routine.
-
As a beginner to exercise, Winnie needs support and encouragement to make her feel less awkward and out of place.
-
Winnie wants to get fit & strong but she doesn’t know what to do or what to expect and it feels intimidating for her to be around serious athletes.
-
Winnie is a beginner to CrossFit and needs more knowledge and guidance on how to perform exercises properly and in a safe manner so that she doesn't injure herself.
Winnie needs more support with exercising to grow more confident in herself.
What Winnie's current experience looks like
To help visualise Winnie’s current exercise experience a journey map was created to gain more empathy and to see what part of the experience I could improve.
Although the emotion line indicates a positive end to her experience it is very much based on the fact that Winnie already has support from her friend. But the outcome could be drastically different if this was not the case.
Identifying an opportunity
From my primary research, there were many comments from users who explicitly said they wouldn’t have kept up with the routine were it not for encouragement, motivation, or pressure from friends or family. Therefore, I identified the start of the journey as an opportunity to help build a more positive emotion toward exercise.
Ideate
Reframing with How Might We's
The main problem statement was then reframed into ‘How Might We’ statements to spark ideas for ideation.
-
How might we make exercising in a new environment more friendly & welcoming?
-
How might we provide more support & encouragement to new users?
-
How might we educate new users about proper exercise technique and injury prevention?
-
How might we enable new users to feel confident with exercise as quickly as possible?
Generating ideas
Using the above HMW statements as prompts I used a round of crazy 8's to generate some quick ideas. Then went into further detail with a braindump to generate more ideas.
Storyboarding the ideal scenario
To further visualise how my ideas could be used to develop a solution I created a prospective storyboard that illustrates an ideal scenario of how our product would help Winnie.
Organising pages & App structure
The next step was to create a sitemap to organise the structure of information and pages, which in turn helped develop a navigation system. Due to time constraints and seeing how the MVP was quite basic in terms of information and hierarchy, I used my competitive analysis data to discover industry standards for data groups and created the structure for the app accordingly.
Then referring back to my ideal scenario I created the main task flow that would help Winnie with her problem.
What other features are needed?
Looking back over the storyboard, sitemap, and task flow I could start to describe the steps and actions that Winnie needed to take in order to prepare herself and feel more confident going into an exercise class. The actions and descriptions would help inform what kind of features the MVP would require.
As noted in the research phase the app would need separate interfaces to allow business goals and user goals to be achieved. However, due to time constraints, I would only be able to concentrate on designing the user-facing features, but some business-specific features were also listed for future iterations.
With a solid idea of what my app should look like I created several more sketches before beginning to wireframe.
Prototype
A prototype and extra screens were then created in Figma based on the task flow.
Test & Iterate
I conducted usability testing on 4 people, 2 were Matthew’s existing clients who already had good knowledge of exercising. Then 2 others who were beginners, one had just recently joined a gym and the other who wasn’t a member but had experience with exercise apps.
They were given the following tasks to complete
● Book in for a class.
● Find information about the workout of the day.
● Ask the coach a question.
● Post a question to the community message board.
Although testing for task completion and usability was quite straightforward. Testing the true intent of providing support to the user was quite difficult as I needed to ask them about their future state, to which they could only respond with assumptions. If this project were to move further I would consider doing a diary study in order to gain feedback and insights over time.
In terms of usability, however, it seemed like there was a consensus that the interface felt familiar except the features weren’t integrated together very well. Also, users would struggle to understand the content if they didn’t already have some experience with exercise programming. Test participants also indicated that they would prefer a more visual way of viewing their progress.
Affinity Map of Test Data
Unfortunately, due to time restrictions, I wasn’t able to iterate on the feedback I received. However, based on the feedback I would make the following changes.
-
Add a short onboarding flow for when users first use the app.
-
Add graphs or visual elements that show changes such as weight and the load lifted over a period of time.
-
Add a feature to create custom tracking stats.
Branding
Branding was created after testing the prototype as I felt it was more important to create something functional first before concentrating on the visuals.
I held a brand workshop with Matthew and we identified the following brand keywords:
-
Inspiring
-
Community
-
Approachable/Friendly
The logo mark is kept simple for recognisability and readability. The hexagon shape is a metaphor for a structured circle which is supposed to represent the community he’s trying to build.
Green is a color of balance and harmony, which incorporates a balance of both the logical and emotional. It is also a sign of growth, both physically and emotionally. Overall, it helps portray health, rest, and stress relief. The tint of green chosen is slightly muted but still gives off a sense of energy & health.
Futura is the chosen font, it gives off a sense of modernity and strength while reflecting Matthew’s reliability and solid health & fitness knowledge.
Outcomes & Lessons
Personally, I feel the outcome of the project was barely satisfactory. Looking back over the process I feel like the area which needed more work was establishing the information architecture and sitemap. Although I quickly realised that I would only be able to design part of the app due to time limitations. More thought and consideration should have been given to how the app would function as a whole. For example, providing more detail about how the business and users should interact. If any business features would affect users and vice versa, etc.
The suitability of test participants would also be another consideration as I feel like only 1 participant really matched the target persona. Therefore I would’ve taken the time to vet test participants earlier in the process.
There was some participation from Matthew which gave me a better sense of how to communicate with stakeholders and how they’re involved in a project. But due to time constraints, he wasn’t always available, particularly for vital phases such as ideation.
Luckily this is an ongoing real-world project for me and I know that I can iterate on the work I’ve produced so far. The next steps would be to sit down with Matthew and review the options we have for tackling the problem. One of his concerns was the cost of production for such a project. So we would see if any of the features I’ve designed would translate to a website and think of more cost-effective ways to solve his problems.