The Fitness App Case Study

Brief Me

Design a cross platform mobile phone application that functions as a fitness tracker and social media platform to encourage users to lead healthier lives.

My Role

  • UX
  • Project Brief
    User Flow
    Affinity Maps
    User Flow
    Journey Mapping
    Interviews
    Wireframes
  • Testing
  • Split Testing
    User Testing
    Surveys
  • UI
  • Themes
    Style Guide
    Mockups
    Prototypes
    Art Direction
  • Branding
  • Logo
    Copy
    Icons

Jack of All Trades...

The first and most immediate problem to overcome in this project was the definition of what the app should do, and what was superfluous to achieving this objective. The app needed to track and display workout and caloric information, as well as allow posting for friends to see. It also needed to motivate users to continue their fitness journey and allow interaction between users.

  • Exercise
  • /
  • Nutrition
  • /
  • Social
  • /
  • Analytics/Gameify
  • /

After conducting some research and highlighting design parameters several key categories were locked down for the project. Exercise and nutrition tracking, as well as a social side with multiplayer gamification would be the basis for the app.

The Demo

Fitness enthusiasts were the obvious overarching target user for this product, but breaking this down further allowed for better insights and journey refining.

89% of users liked the idea of challenging friends
70% of users wanted to see progress illustrated
75% of users thought tracking live exercise was essential

Following interviews, users raised further points they would like addressing. Users wanted to be able to set goals for weight loss and gain, and for macronutrient breakdown.

The Journey

This is the original userflow for the project, however as the app took shape the navigation changed. Challenges were made more central to the MVP and the activity feed and profile subsections were merged to create a more streamlined user experience.

Ready, Steady, Draw!

With a rough idea of the user journey and minimum viable product for this project, I decided to focus on sketching the home page, which would act as a dashboard and springboard for other features.

(Hopefully the flower petals distract you from the illegible handwriting)

A big topic of contention at this point is the method of navigation, as we didn’t want to rely on the usual navigation bar mechanism, but were keen to keep the interface as clean and intuitive as possible.

Low Fidelity, Low Hassle

The next stage in the project was to create some low fidelity mockups that could be shown to users and used as a tool for explaining functions within the app, and prototyping.

Popular elements from different sketches were pulled together to build the first mockups, feedback indicated users liked both the welcome message and the statistical overview, so these were combined and added as swipe cards. To keep things moving, I was conscious of UI as well as UX at this stage and began building the structure of the app.

A card style UI, rounded corners and organic curves began to shape the visuals

Defining the Design

Some say creating a mood board is a bit of a wasted exercise, but I find that spending 10-15 minutes pulling together rough ideas into one pays dividends down the line.

Brand Identity

For this project the brand started with the logo and name. Keen to stand out from other fitness tracker apps, but without being unappealing to that user base, a word that most people have little association with - Corrogo - was chosen as a name.

For the logo, I initially conceptualised an abstract image of a bird, and to tie in with the theme of ancient history and mythology, and follow through with the red and blue colour scheme, I created a simple phoenix. I also thought that the message of rebirth that comes with it tied in well with a health and self-improvement service.

/

Style Guide

Navigation

With the main method of navigation being a central hub I needed to create 6 easy to understand icons for buttons that would branch off into each area. I kept on theme with simple organic shapes that were most recognisable after user testing.

Note the hamburger icon for nutrition, which seems a strange choice for a health app, however after testing users said it was easily recognisable, and made them feel less judged when honestly inputting their meal data than they would be if it were an apple, for example.

One further set of buttons was created for the record exercise tab

Are You Mocking Me?

In order to make the onboarding for new customers seamless I decided to start making the high quality mockups with a tutorial, which also helped shape the overall aesthetic in the end.

Illustrations provided by Pablo Stanley

Game, Set, Match

To gameify the system, I opted to focus on three main mechanisms, challenges, progress tracking, and achievements. Achievement stickers that users can place on their profile when unlocked were the missing piece that along with progress trackers incentivsed completing challenges.

As challenges were made core to the app functionality, it was imperative that the user journey to access this feature was as swift as possible.

Key Features

Bring Your Workouts to Life

Track and record your live workouts and get instant data on calorie burn, pace and distance

Never Lose Track

Keep track of your progress and challenges automatically, and recieve customised insights, tailor made for you

Intelligent Nutrition

Set your goals and let Corrogo keep track of everything else, the app will show you your calorie deficit/surplus, and suggest what to eat/how to exercise to correct it

Final Mock Screens

Reworking

Following some further user testing, large changes were made to the design. The navigation method was tweaked slightly, I redesigned the logo and reworked the ui, shown below.

Hindsight

Looking back on this project, I should have doubled down on the challenge aspect sooner, and more user testing would have been beneficial to seeing this in the early prototyping stages. With help from robust animation sequences and rich illustrations, a relaxing and tactile user experience was created, with 96% of users of the prototype rating the experience as positive, ultimately deeming the project a success.