FDUP: A UX design case study for a holistic fitness app

Michael Mabee
6 min readOct 7, 2018

I’m studying UX Design at RED Academy, after a more than a decade as a editorial designer. This is the case study for my first project, FDUP.

The Opportunity

A the outset of the project, we were given a partner, told to find out about them and solve an everyday problem for them, with the solution coming in the form of an app.

Research

I built an interview script that would explore as many aspects of my partner, Sebastian, as possible, while giving me insights into the issues he may be having in his daily life.

Sebastian is a healthy, active, well-educated 25 year old student (he already has an engineering degree), who is looking to better himself, solidify his future and improve his habits. Socially, he is family-oriented, outgoing, spontaneous and conscientious of others. He is interested in the arts (design, photography & music), participating in sports (volleyball & rock climbing), technology & gaming (PC) and world travel, pursuing all of them regularly.

The pain points in his everyday life are forcing himself to wake up and his urge to gain weight in a healthy way (he is somewhat underweight).

I elected to try to solve the latter problem for him, as Sebastian has tried quite a number of apps and fixes to try to wake himself up.

Being technologically-inclined, Sebastian is looking for a way that expert advice, information on diet and exercise can be delivered to him regularly via an app. He has also mentioned that he has difficulty eating enough throughout the course of the day to get enough calories, is interested in cooking, and wants a great deal of variety, as he dislikes leftovers or eating repetitively — this could be an analogue extension of the service: meal planning and delivery of ingredients tailored to his needs. Another possible feature could be a reminder notification, to help him build regular healthy eating habits.

Competitive/Comparative Analysis

Comparative/Competitive Analysis of Fitness Apps

In looking at the already-competitive fitness app marketplace, I noticed that there were quite a number of apps that were one-trick ponies: good at one thing, but lacking in functionality that may help their users reach their goals.

In 2018, worldwide revenue from the the fitness app market was US$15,636,000,000 (source: https://www.statista.com/outlook/313/100/fitness/worldwide), and is forecasted to grow by 16.6% in 2019. The user numbers for 2018 were 723,640,000 users, but that number is forecasted to swell to 925,000,000 within five years.

Bottom line: there is definitely space and capital in this market for a fitness app that caters to Sebastian’s needs and does more than one thing well.

Planning

With Sebastian looking to bulk up in a healthy way, I decided I would have to tackle the problem in a holistic way: exercise, nutrition and motivation.

Possible App features:

  • Regular delivery of diet and exercise tips
  • Fitness routines focused on bulking up
  • Time to eat reminders
  • Calorie counter (home + restaurant menus)
  • Referral to local restaurants (that have nutrition info in the database)
  • Motivational content
  • Chat (live?/voice?/video?) for expert advice
  • Referral to personal trainers, dietitians, related professionals

Possible Offline features:

  • Meal planning
  • Food delivery

In sectioning out the functionality, I came up with names for the sections: FRESH for the new diet and exercise tips, FIT for the fitness routines, FUEL for the food delivery service, and FIRE for the motivational content and coaching. I dubbed the overall project FDUP, in a cheeky nod to the alliteration throughout the rest of the project.

Storyboard for the FUEL Feature

User Flow

For the limited scope of this project, we were tasked with creating and testing one user flow, so I chose to focus on FUEL, the food purchase and delivery feature.

User Flow for FUEL

To use FUEL, Sebastian would open the app, tap on FUEL in the bottom nav bar, enter the number of meals he’s looking to purchase, fill up his quota with his favourite meals, confirm his order, set the date and time for his delivery and then be reassured that his meals are on their way.

Design, V1

My V1 prototype

After drawing out wireframes for each of my pages (with templates from www.sneakpeekit.com), I prototyped V1 of my design with both Marvel and Invision, adding in links to test functionality and the validity of my flow.

V1 prototype: https://invis.io/AKOFP5Q8MN7#/323994221_Fresh

Usability Testing

I had a number of my colleagues test the prototype. The flow made sense to them and they reached their goal quickly, though most stumbled momentarily (non-critical failure!) with the location of the Done button, once they were finished selecting their meals.

In testing on Sebastian (the engineer), he presented me with a number of issues: the lack of a Back button throughout the ordering process, the user’s inability to subtract items from their cart, the lack of feedback as to the cost of the items the user is adding, as well as the lack of a Settings link, so that the user could check/adjust their address and billing details. Which leads us to…

Design, V2

This is the link to V2 of my prototype:
https://invis.io/XHOFZIWZD7E#/324115890_1Fresh

For the second iteration of my design, I incorporated feedback from all sources:

  • added a scroll of tips on the FRESH (landing) page,
  • changed the modal on the FUEL page so that it would inform the readers of the price of the meals they’ll be selecting when they start shopping,
  • added + (plus) and - (minus) buttons on the shopping page,
  • moved the Done button and running price tally to the bottom of the shopping page, where they’ll always be visible and handy for the right thumb to hit once the user is done shopping,
  • added + (plus) and - (minus) buttons to the Confirm Your Order page, so that users can adjust their order before proceeding to checkout,
  • added < (back) buttons to the Confirm Your Order and Delivery Options pages,
  • added the settings gear on all pages, so that the user can access/update their billing and delivery information at any point during the process.

Summary

Not having been involved with product or UX design in the past, this project was eye-opening on many levels: the thoroughness of the research and interviewing process (and the need to hone my interviewing skills, in order to pursue interesting items as they come up), the need to check my own assumptions, and the how it’s necessary to look at a process both forward and backwards in order to anticipate and fulfill your users’ needs.

My thanks to Sebastian for being as open to examination as he was, for all of the feedback, and for saying that he’d actually use the app and recommend it to friends who have the same needs as he does.

--

--

Michael Mabee

Multidisciplinary designer and recent graduate of RED Academy. See more at www.michaelmabee.com.