Case study: YouFit, a brand new Wellness App to stay fit and motivated
An online exercise app aggregator that offer variety in an organized and customized digital platform.
For this project I partnered with talented UX/UI Designer and friend Karen Anne Lilje.
We were briefed to develop a tool for the “National Wellness Institute” that provides added value for their members. We chose to focus on exercise and fitness category. According to the information and research provided by our client, despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle.
The aim of this project is to develop a tool that will drive people to action. The product needs to allow the user to track their progress and push them to commit to a healthier lifestyle.
Research
At first, we conducted a competitor analysis among Strava, Deliciously Ella, Nike Training Club and Youtube. We noticed that when it comes to online exercise, Youtube offers the most variety, but other exercise apps offer a curated experience. Initial market research lead us to the idea of an online exercise aggregator since people’s lives are busy and time for exercise is often limited.
We started thinking about an app that could serve the user content that they want and need, minimising search time and frustration, but without limiting access to variety. We named our app idea “YouFit”.
YouTube vs. fitness Apps
We did a features comparison, looking at other online exercise channels available.
All apps offer a personalised experience while YouTube does not. YouTube wins on variety but has annoying advertising that other apps do not. Besides YouTube has no filters, goal setting or tracking but it has user ratings and recommendations which not all other apps include.
This confirmed that we had indeed identified a gap in the market.
Quantitative and qualitative data analysis
With this in mind we conducted an online survey to learn more about exercise habits and preferences. We found that almost 60% of people are using YouTube for online exercise.
To get qualitative information we did a series of user interviews and found that ratings definitely matter. Users like the idea of rewards but were not so keen about social media integration. Here some interesting quotes:
“I wouldn’t want to have any social media aspect. That’s why I would use the ratings. The app must make the recommendations.” CRAIG
“I like the idea to be a contributor and get rewarded.” MATTEO
“Reviews and very important. I will always look at reviews and recommendations. If none I don’t go there.” KARIEN
A brand positioning map reconfirmed the gap in the market. We want our exercise app to be personalised while offering content that is as diverse as YouTube.
To ensure that this idea is successful and not only attracts new users but also retains them, we did a “Jobs to be done” exercise.
The primary job is to access workouts when unable to go to the gym. But this is a basic fitness app job. And we wanted our app to be unique in its offering.
The reason why our app would be hired and other fitness apps fired is becasue our app would:
- provide variety, keeping users motivated and not bored.
- Save them time by finding relevant content quickly with personalised filters.
- Allow them to set goals and track their personal progress.
Once we identified the main job to be done, we decided to visually illustrate our primary persona, Fitness Fiona.
She is a young professional who likes to stay fit and healthy but struggles to make time to go to the gym. She usually trains at home which gives her freedom and flexibility and likes to track her progress as a way to stay motivated.
The value proposition canvas helped us understand how our product could fullfill the jobs to be done and meet the needs and satisfy the goals of our user through its distinctive features and services such as personalised filters, user reviews, goal setting and progress tracking.
Then, in the user journey we analysed the oppotunities for our app offering.
Considering a typical scenario Fiona browses YouTube but gets annoyed by the time consuming search and advertising. The 3 main areas for opportunity all related to a customised experience that didn’t limit variety.
Defining the problem
The user journey helped us to define our problem statement:
Active professionals choosing to exercise online need to find a way to filter extensive online content and personalize search results because they want to enjoy variety without getting overwhelmed by options.
Using a Moscow map we defined an MVP that would include all the basic features to address this problem statement:
An exercise-content aggregator that will enable users to access the variety of YouTube in a personalised app environment.
With smart filters, user reviews and recommended content, the app provides the user with a personalised fitness routine. Staying motivated is made easy with progress tracking and a rewards programme. A pre-emptive chat function adds gamification while offering the user fitness information and advice.
Ideate
This site map shows our preliminary content architecture and hierarchy. The app is divided into four main areas: the home page where filtered content is agregated, Saved Workouts, Progress Tracking and the Rewards.
To fine tune our idea before beginning concept sketching we though about a user’s navigation behaviour while engaging with our fitness app.
When drawing out the user flow based on this happy path we identified 6 decision moments which showed us where we would need to consider the user’s engagement with the app.
They included searching for a workout, choosing a workout and then saving it, reviewing it and then checking their rewards and progress.
We created concept sketches independently and then combined our best ideas as a low fidelity. We did testing to iron out any initial UX issues.
With our mid fidelity ready, we conducted more user testing. The main insights related to user expectations of a native iOS app. We reviewed navigation between screens and addressed the micro interactions of our intensity rating.
Visual Design
A visual competitor analysis gave us insight into design, functionality and gamification.
To kick-off the visual design process we brainstormed brand attributes and created a moodboard. Product reaction tests confirmed that we were accurately communicating our brand personality.
This style tile summarises and consolidates our brand identity.
The logo was designed to feel modern and sporty. It is easy to read when displayed really small but also striking when displayed full screen.
Inter is the typeface chosen. It is an accessible typeface that works well when set large and in uppercase, and legible when set small.
The simple colour palette is energetic but also understated so as not to compete with the visual content. It is androgenous for an app that feels accessible to anyone who wants to get fit.
Functional components are designed using the atomic design system. They are created for multi states in a way that feels seemless and aligns with the visual identity.
The dashboard includes charts that make it easy to track progress compare the current performance of the user against previous time periods, while the ring chart helps to monitor their performance in real time. Colour is used sparingly but in a way that clearly gives emphasis to important information.
We got really positive feedback from the desirability testing with most users describing it as sporty, customisable and easy to use. But the most common feedback was…
Prototype for iOS
Here you can see YouFit prototype made for iOS native App.
Usability testing
We used Maze to test our prototype and had a good success rate but noticed that users dropped off when instructed to adjust their personal filters. The heat map showed us how users clicked on the tags rather than the icon as it wasn’t clearly recognisable. Other misclicks in the testing were largely a result of people wanting to actually use the app rather than follow the path we specified, an unexpected but encouraging result.
Next steps
We enjoyed this project and are excited about the final product. As next steps we want to review the text in the app for accessibility as older testers commented that it was quite small. We are also going to rethink the filter icon. We found Maze very frustrating and want to research an alternative tool.
