The Problem
As individuals are increasingly allowed to work from home, and the COVID pandemic continues, people are looking for ways to stay physically active. There are a lot of apps that help with exercising, but they can be confusing and difficult to use for people who have little to no experience with fitness.
The Goal
Create a clean, easy-to-use app that is able to motivate people to start, and continue to perform, an exercise routine.
The Research
For this UI case study, the primary research was competitive analyses of different fitness apps, including Leap Fitness Group’s apps and Map My Fitness from Under Armour. Once I had a read on my competitors, I wanted to give myself a little more direction to work with, so I created a basic user flow of the app.
The Prototypes
I started by creating simple paper wireframes to get a general framework down which I then translated into low-fidelity Figma wireframes.
Before I progressed further, I had to figure out what I wanted Fitted to feel like. Once my mood board was created, the iterative process started.
With this UI case study, I really wanted to focus on an atomic design framework. Once my first version of Fitted was created in Figma, I started to create the individual components including buttons, input fields, and some of the basic icons.
With those pieces built, I started to work on my first draft of the product. After workshopping some different options, images, and colors, my first prototype was ready for testing.
The Testing
The quick results were that the product didn’t go over as planned. I had initially planned on using illustrations to demonstrate the different exercises. My thought was that this would make it easy to have consistency throughout Fitted, and would be simple to keep users organized.
This was quite the incorrect assumption.
The main feedback that I got during all of my testing was that the app didn’t feel like it was finished. When I asked users to elaborate, almost all of the feedback centered around the illustrations. Everyone wanted to see pictures of actual people performing the exercises. So back to Figma I went and gathered photos. There were also several small graphical changes that I made based on little pieces of feedback to create the final product.
The Product
Once the changes were implemented, I had the final version of Fitted ready to go.
The Lessons Learned
1. The biggest lesson that I learned with this case study is the need to iterate, iterate, iterate. I found that even once I was happy with something, I needed to make it again and compare to my first draft. Even if that was a simple color change, resizing a button, or reformatting an entire screen, I have to iterate in order to improve my designs.
2. The other primary lesson that I learned was that I need to design with a mobile-first strategy, but that doesn’t mean to not think about other breakpoints until the last minute. I had focused on the mobile design so much, that when it came time to design for tablet and desktop, I had to do some serious retooling to make everything work.
Thanks for stopping by!
If you like what you saw, or have any questions, feel free to reach out to me at dave.bengry@gmail.com. I'd love to talk to you about your next project.