Project
FitLife
Skills
UI Design
Research
Branding
Deliverables
Style Tiles
Mockups
Prototype
Style Guide
Tools
Sketch
Invision
Photoshop
Illustrator
Overview
Fitness at Your Fingertips
FitLife is a mobile-responsive platform where users can track their nutrition, fitness goals, and chat with health experts through the app. FitLife strives to engage users and motivate them by creating a feeling of excitement and achievement around fitness and nutrition.
My Role
My UI design partner, Anna Melikhova, and I focused on research and ideation all the way through high-fidelity mockups, prototyping, and usability testing together.
FitLife Marketing Site
Defining the Challenge
Making Fitness a Priority
Maintaining a fitness regimen is not an easy task to some, so the challenge here was to design a visual experience that reimagines how people can find and engage with fitness recommendations and health plans. We took wireframes provided to us from a previous UX team to design a mobile application as well as a responsive marketing website to encourage users to immerse themselves in a more physical, healthy lifestyle.
Assessing the Competition
We researched and analyzed visual competitors of our fitness application to understand how we can design it in a way that could make it stand out in a saturated market.
While some, like Planet Fitness, definitely stood out from the rest with their strong branding through the intentional use of their trademark purple, others looked very similar. We noticed a predominant use of light themes with grey accents and occasional pops of bright color. Photography featured branded images of people in motion, exercising outside or at the gym.
In order to design a fitness app where we could provide a customizable, curated experience for our users we needed to make sure we created an interface with bold colors, clean fonts, and simple layouts that would immediately draw users in and not overwhelm them.
Exploring Visual Directions
Anna and I both dove in to conceptualize a total of four style directions and branding ideas based on the takeaways we learned from our competitors. We looked to find a way to steer away from the common grey palettes using colors that stand out so that we can excite our users will using the product.
Dynamic In this style tile, I conceptualized a brand that allows its users to feel like they're part of a cutting edge environment to be the most fit they can be. Vivid tones bring a sort of joy to the user that would attract them and inspire them.
Diverse Here, I imagined a social application with a light colored look and feel, the brand set the tone that it wanted its users to feel comfortable and stress-free so they can let loose, have fun, and be healthy.
Sleek In this style tile, Anna designed a concept where a calming combination of blue and grey gives the user a sense of stability. The minimal design, including simple lines and shapes as well as straightforward, modern sans-serif fonts would provide a contemporary feel which would further ensure the impression of quality and reliability.
Reliable Lastly, Anna designed this concept where blue would be the predominant color, with the salmon and mint as secondary. Since blue is overall a more neutral color that can evoke feelings of reliability, using this color the most would appeal to most audiences.
Anna’s reliable style concept was chosen out of these four because this direction spoke more towards commitment to progress through its color palette and design motif of evolving circles.
Refining the Visuals
Anna’s Initial Iterations
Onboarding Screens
My Initial Iterations
Progress Screens
During the first round of iterations, Anna worked on the on-boarding screens while I worked on the fitness progress screens. Overall, with feedback that we received, we realized that there seemed to be some redundancy across screens. For example, the purpose of some graphs in the progress screens felt unclear. We had to make sure their use made sense and had value before moving forward. The use of the orange color felt alarming. While it was good to utilize the orange color to highlight important parts we wanted the users’ attention to focus on, we had to make sure it wasn’t overwhelming.
Final Iteration
Anna and I conducted a round of desirability and usability testing for our final iterations with users who were had desires to maintain a healthy lifestyle and has used a fitness app before in order to validate if our solutions work well. We built prototypes in Invision so that we can engaging with our testers. Here a some of the takeaways we learned:
On-boarding Screens
Positive
1. It was simple to click through.
2. The way the information is highlighted works well.
Actionable
1. The font is too large, taking up a lot of real estate.
2. The background color seemed too dark.
Fitness Progress Screens
Positive
1. The information feels straightforward and easy to understand.
2. The highlights on the good and bad statistics are helpful.
Actionable
1. There’s too much occupied space at the top with information that doesn’t seem valuable.
Workout Screen
Positive
1. The photography choices work well.
2. The layout and structure work well.
Actionable
1. The typography choices made the design feel very basic.
Nutrition Screen
Positive
1. The bottom navigation feels intuitive.
Actionable
1. Drop shadows for the call-to-actions didn’t feel necessary.
2. There is too much real estate at the top of the screen.
To Sum Up
All in all, we received positive responses towards visualizations designed to showcase goal achievements. Users had mixed feelings about color choices where some testers thought the colors were exciting and attractive and other testers felt they were unpleasant and motivating.
Design Solution
Mobile Application
In the user flow for the final design solution, a user can sign up for FitLife and fill out the on-boarding questionnaire. Once the the questionnaire is filled out, the user reaches their progress screen that lists the tasks for them to complete for the day. From there, they are able to complete a workout, add foods to their daily nutrition log, and chat with their personal health expert.
Responsive Marketing Site
In addition to the complete high-fidelity prototype, Anna and I designed a mobile responsive marketing website that would inform new users of what they can do on the application and where they may go to download FitLife.
Style Guide
Finally, to tie the whole brand of FitLife together, Anna and I composed an informative style guide for future designers and developers.
Next Steps
There are quite a few things I could do to improve this project. However, at the end of the day, FitLife represents something beyond the deliverables I created; it taught me how to collaborate with another designer to find a common design style. It also taught me to not be attached to my own ideas.
From a deliverable standpoint, there are a few key aspects of the app I’d revise with additional time.
I would rework color choices–consider something that is engaging to users of multiple age groups.
I would revisit choices in typography–consider something more sleek rather than playful.
I would simplify buttons and information so that it’s not so in-your-face.
Workout Progress Screen
What I Learned
From our initial drafts to the final, Anna and I were able to eventually understand how we can connect our design styles to one another. In the beginning, when we split up screens to create we came to each other with completely different ideas. In the final, I feel like one can’t tell who designed what, which was the ultimate goal. There is a clear design system in place at this point. We focused on 2 primary colors and specific design motifs that tied everything together across all screens.
Other Work
Fearless // UI Case Study
Trial for Clinical Equality // UI Case Study
ThirdSpace // UI Case Study
FitLife // UI Case Study