YouFit
YouFit is a wellness app, inspired by the online exercise trend that has been amplified by the restraints of lock down.
PRIMARY TOOLS= FIGMA + PHOTOSHOP + ILLUSTRATOR + MAZE
DURATION = UX 2 WEEKS + UI 2 WEEKS
CHALLENGE
Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle. We were briefed to develop a wellness app that could encourage individuals to commit to personal wellness goals. We chose to focus on physical exercise and fitness.
​
When it comes to online exercise, Youtube offers extensive variety, but other exercise apps provide a personalised and curated experience. We wanted to design an experience that improved on what is already available. Some initial market research lead us to the idea of an online exercise aggregator.
MARKET AND USER RESEARCH
To validate this idea a competitor analysis showed that most apps offer a personalised experience while YouTube does not. However, YouTube wins on variety but without a beautifully designed and curated experience.
​
A feature analysis highlighted that YouTube has no personal filters, goal setting or tracking options, but it has user ratings and recommendations which not all other apps include.
We conducted an online user survey to learn more about exercise habits and preferences. It revealed that over 60% of users exercise 2-4 times a week, over 70% of these users are using online exercise routines if they don’t go to the gym, and almost 60% of people are using YouTube for online exercise.
To gain more qualitative information we did a series of user interviews. We discovered that ratings definitely matter, users like the idea of rewards, and are not that excited about social media integration due to privacy concerns.
To ensure that this app idea is successful and not only attracts new users but also retains them, we analysed the jobs to be done. The primary job would be 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.
In addition to doing this job our app would also provide variety, keeping users motivated and not bored; save them search time by serving relevant content quickly with personalised filters as well as integrated user feedback; and enable them to set goals and track their personal progress.
Through our research we realised that the success of creating a personalised app experience would rely on serving appropriately filtered content to the user. The secret to getting the filters and algorithm to work would be user reviews ... and lots of them. The reviews would also be our key to hosting the content on our app. Exercise video content creators would be getting views and reviews through our app, making it a win-win relationship.
​
And so the idea for our rewards system was born… reward users for submitting reviews.
EMPATHISING
To ensure that we were designing an app that meets real user needs we created a user persona and journey map to empathise. Our user persona is 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 she likes to track her progress as a way to stay motivated. But she finds the content on YouTube a bit overwhelming and she wastes time searching. In the user journey we considered a typical scenario: Fiona browses YouTube but gets annoyed by the time consuming search and advertising. The user journey helped us to highlight specific the opportunities for our app offering.
DEFINING THE PROBLEM
We defined our problem statement as "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. Our MVP is described as "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.
IDEATION
A basic site map followed so that we could plan the content structure and hierarchy. The app is divided into four main areas: The Home Page where filtered content is aggregated, Saved Workouts, Progress Tracking and the Rewards. To fine tune our idea before beginning concept sketching we thought about a user’s navigation behaviour while engaging with our fitness app. We ideated a happy path which incorporated all the features of our MVP. With this information we created concept sketches and then consolidated our best ideas as a low fidelity mock-up.
DESIGN AND TESTING
Low fidelity concept testing followed so that we could identify any usability or design issues. Next we digitised our app in Figma as a mid-fidelity for more thorough usability testing before proceeding to the high fidelity. Much of the feedback received related to user expectations of a native iOS app so we re-looked our navigation between screens and added back arrows. We also addressed the micro interactions of our intensity rating, allowing for direct and progressive selection.
The UI design process began by defining the brand attributes as sporty, motivating, friendly and energetic. This was supported by a visual mood board which we used for product reaction tests. The feedback was positive so we proceeded with the brand identity and design system.
Broadly, this included a logo design, icon system, colour palette and typography styling. More specifically, we created the most basic individual components for an atomic design system from which we developed more complex components such as video cards, tool bars, buttons, rating sliders etc. The atomic design system was also used to design the dashboard for tracking fitness progress and goals as well as the user rewards.
​
For an added level of user engagement and personalisation we added gamification with a preemptive chat function. A user is able to engage with the app and ask for advice by being prompted with options and responses. In this way the app can deliver guidance and information in a fun and friendly way that feels less generic.
Below is a video demo of our high fidelity prototype, showing our persona's user happy path. First she adjusts her personal filters to effect the aggregated content, then chooses an exercise video. After taking a look at other user reviews she plays the video through and then rates the intensity. The user then adds the video to her "Yoga Favourites" collection and then chooses to write a review. After writing the review she checks her rewards and then heads to review her progress and goals. Finally she taps to "Ask YouFit Advice" about her stiff leg muscles. The app gives her some advice and then recommends a stretching exercise to ease the stiffness.
USEBILITY AND DESIRABILITY TESTING
We used Maze to test our prototype and had a good success rate but observed that users dropped off when instructed to adjust their personal filters. This heat map shows how they clicked on the tags rather than the icon as it wasn’t clearly recognisable, creating confusion.
Other mis-clicks 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.
​
We got really positive feedback from the desirability testing with most users describing it as sporty, customisable and easy to use.
​
As next steps we plan to fine tune the design and rework the filter icon. We also need to work on the other screens, not included in our happy path for further testing.
