Eat.Sleep.Lift.

UX/UI Design Case Study
Project Overview
‍Tracking fitness metrics has always been something of importance for many different kinds of athletes, especially powerlifters and bodybuilders. Today, even people who aren’t necessarily athletes but want to take their performance and health more seriously have started implementing metric tracking as well. While metric tracking is important, it can often become challenging and overwhelming since people often have to download various applications to cover all of their bases, among other reasons. As a fitness professional and athlete, I've seen people struggle and even give up on their fitness goals because metric tracking was too overwhelming and difficult. Because of this, I decided to design Eat.Sleep.Lift.— an app that aims to simplify fitness metric tracking so that people can have an easier time sticking to their fitness goals.
Problem
It can be overwhelming and tedious to track all of the important metrics that directly correlate to your success on your fitness journey. Some of these metrics include workout program progression, calories and macros from food consumed, sleep, and water intake. One of the challenges to tracking these metrics is that oftentimes, you need to use multiple applications to get the job done. Another challenge is that athletes often must calculate some of these metrics such as macro and calorie goals on their own, and then plug these goals into an app. 
Solution
Eat.Sleep.Lift aims to allow users to easily and quickly track their important fitness metrics, all in one single app. The app will also provide additional support for users, such as daily motivational quotes, recipes, and workout ideas to keep them motivated and focused. Additionally, the app will feature a macro and calorie calculator that will allow users to define their daily goals and adjust them at any time. The following features of Eat.Sleep.Lift. help to address the problem of tracking fitness metrics: 
  • Allowing users to easily track multiple fitness and health metrics in one app.
  • Providing users with a tool to help them determine their macro and caloric goals.
  • Additional support such as motivational quotes, recipes, and workouts to help users stay focused.
My Role
Process
Timeline
  • Figma
  • Miro
  • Figjam
  • Zoom
  • GoogleMeet
  • User Research
  • User Interviews
  • UI Design
  • Usability Testing
  • Secondary Research
  • Surveys & Interviews
  • Ideation
  • Sketching
  • Wireframing
  • High-Fidelity Screen Design
  • Prototyping
  • Usability Testing & Synthesizing
  • Redesign
  • Overall: 14 weeks
Tools

Research

Ideation

Design

Testing

Reflection

Secondary Research

‍Through my secondary research, I’ve found that tracking macros as well as having specific training programs are widely known to be essential to success in the fitness industry. Even still, these are things that many still find overwhelming and challenging to figure out, and often cause burnout. Many people have trouble especially tracking macros, because it takes up a lot of time and preparation beforehand; and it also becomes increasingly difficult to do if you are a person who does not prepare all of your meals at home. Additionally, defining macro and calorie goals is oftentimes something that has to be done separate from the app used to actually track them.
‍
‍Primary Research

‍To get insight into potential users' struggles with tracking fitness metrics and what they might find helpful, I conducted screener surveys on social media platforms to recruit participants to interview. I then followed up by conducting full interviews with 5 participants.

‍Interviews
‍
‍First, I created a screener survey and distributed it on various social media platforms in order to find individuals that met a particular criteria and might find an app like Eat.Sleep.Lift. useful. From the initial screeners, I was able to find 5 participants and conducted individual interviews via video chat, using zoom or google meet. During the interviews, I spoke with participants and asked questions that helped me further discover more about their feelings and challenges when it comes to fitness metric tracking, their experiences with metric tracking in the past, and what kinds of tools they might find most helpful. With the permission of participants, I recorded our sessions as well as took notes that were further analyzed in my next steps.

‍Research Synthesis
‍
‍With the insights gathered from my secondary research, surveys, and user interviews, I organized the findings into affinity and empathy maps. These tools helped me to further organize my findings and pinpoint specific challenges users were facing, so that I could come up with actionable solutions.

Research

Affinity Mapping
‍
With the information and notes gathered from interviews, I created affinity maps that helped me to uncover and group repeating themes, feelings and insights on the subject. The main themes were:
  • Metrics they track
  • Metric tracking history 
  •  Tools used to track metrics 
  •  Pain points of tracking metrics 
  • General opinions on tracking metrics 
  • Things that would be helpful
Empathy Mapping
‍
With the data gathered from affinity mapping, I proceeded to create an empathy map to gain a deeper understanding of my participant's thoughts, feelings, behaviors, and attitudes towards fitness metric tracking. 
User Persona
‍
Following my empathy map, I moved on to creating a user persona. The goal of creating a user persona was to allow me to better empathize with my target audience by creating a representative profile of them based on the data and insights I gathered in my user research.

‍Divina- The on the go, professional woman that is also dedicated to her sport. 
How Might We?

‍After gathering all the information I uncovered throughout the process and narrowing down the main pain points my target audience was experiencing, I developed my HMW statements with the goal of prioritizing finding creative solutions for the pain points people were experiencing. The top 5 were:
‍
  1. How might we simplify the process of tracking macros to make it more of a speedy process for users? 
  2. How might we make the process of preparing healthy meals more intuitive for users?
  3. How might we alleviate challenges regarding meal prepping for users? 
  4. How might we provide users with more support when it comes to staying consistent while tracking metrics?
  5. How might we make it easier, quicker and more enjoyable for users to track fitness metrics and meal prep consistently?

User Stories

User stories helped me build a better understanding of what users found most important in terms of the app’s functionality. The top priorities were: 
‍
  1. As a user, I want to be able to input my goal weight and activity levels so that I can have my macros and calories calculated for me.
  2. As a user, I want to be able to select food preferences so that I can receive a personalized list of meal plan ideas.
  3. As a user, I want to be able to track all of my meals so that I can stick to my meal plan and track my macros accurately.
  4. As a user, I want to be able to input my weight daily so that I can easily see if my weight is trending up or down.

Brainstorming

Using my HMW statements and user stories as a foundation, I conducted a brainstorming session and came up with 8 possible solutions for users. I then selected the 3 most promising solutions that were most aligned with what users said would be helpful to them, and began site mapping.
‍

Ideation

Site Map
‍
With the site map, I was able to create a visual representation of the structure and flow of the app. I identified and mapped out key features, functions and screens. 
User Flows
‍
Following the site map, I created three essential red routes that I deemed vital to the application because they would be paths that the users would find most essential. These routes were:
‍
  • Selecting a food to log
  • Tracking their weight
  • Calculating their macros
Sketches
‍
Once the site mapping and planning was laid out, I created some initial sketches to get an idea of possible interfaces that would alleviate the pain points of our target users when tracking metrics. 
1. Allow users to input information and generate customized macros/daily caloric goals easily and quickly.
3. Allow users to select desired meals that fit within their caloric and macro budget.
7. Allow users to easily and quickly log their weight, and view their weight trends. 
Wireframes

Using the data gathered in the ideation phase and sketches as a guide, I created low-fi and med-fi wireframes that incorporated all of the high priority functions in a user-friendly application. The purpose of this was to establish a layout of element placement and information hierarchy throughout the app.

Design

Brand Platform and Moodboard
‍
Following my wireframes, I went on to create a brand platform and moodboard to guide my UI design. With these steps, the goal was to establish Eat.Sleep.Lift.’s visual identity, values and personality. The themes for my brand platform and moodboard are trendy and fun, while also being useful and easy to use.  
View full bran platform plan here
Style Guide
‍
Creating my brand platform and moodboard helped me to go into creating a style guide with more direction. The purpose of the style guide was to ensure that my design maintained a consistent look and feel across all screens in order to create consistency for the user. While putting together the style guide, I focused on determining color and typography usage, iconography, design of call to action buttons, and creating a watermark for the brand. 
High Fidelity UI
‍
When designing my hi-fi screens, it was time to bring everything together. There were lots of redesigns and iterations, as during the design process I realized that some of the functions were overcomplicating the app and the user experience. I wanted to remain focused on the original goal, which was to make tracking metrics easy and seamless for the user. 
Click here to view all of my iterations in Figma
Prototype

I used Figma to design my prototypes, making many iterations of my red routes until I was happy with the way the user would be able to flow through the app and complete necessary tasks.
Click here to interact with my prototype in Figma!

Usability Testing
‍
In order to complete usability testing, a prototype of the three flows was created and provided virtually to the participants who were recruited on social media and at a local gym. All of our usability testing was completed via Google Meet, and participants shared their screens with me so that I could see their progression during the testing. The objective of conducting usability testing was to identify any potential difficulties that users may face while using the application and to recognize any opportunities for further development. 

During testing, users were asked to attempt to complete three different tasks on the app while I observed their process. I asked some probing questions after each task to get a full understanding of the users’ experience and pain points during each task.  

The tasks, which were based on 3 main user flows I designed, were: 

  • Generating customized macros and caloric budget
  • Logging a meal
  • Logging weight for the day

Findings
‍
While my users found the app helpful, straightforward and easy to use, they did provide some great feedback that could enhance the overall user experience and functionality of the app. Click here to view my full test report and findings

‍Below are the main focus points from my findings:

Testing

Issue 02

Issue 03

Issue 04

Difficulty finding the macro calculator feature

‍Every user expected the macro calculator feature to be found under the meals tab or somewhere on the dashboard. Clicking the ‘my profile’ tab to get to the macro calculator was each users’ second or third course of action upon realizing that the macro calculator was not where they expected.  

Daily macro goals not shown on meal log page

‍Users understand and enjoy the macro breakdown on the meals page, but it was difficult to see how it relates to their daily goal since the daily goal is not displayed on the page. The macro breakdown only displays the macros consumed; not the target goal. It would be difficult for users to know where they stand for the day just based on this display. 

Log meal floating button is repetitive and not helpful

‍None of the users utilized the floating ‘log meal’ button to log their meal. Multiple users wondered what the difference was between this option and simply navigating to the ‘meals’ tab (there is no difference). The meals tab in the navigation bar was the most intuitive and instinctive method for users when trying to complete the task of logging a meal.

Information architecture

‍There was no clear indication that users were able to scroll horizontally in the activity section of the dashboard. It was only when participants scanned the page and felt there was nothing left to do, that they attempted to scroll horizontally on this section just from prior usage with other applications. 

Issue 01

Synthesizing and Redesigning
‍
After carefully reviewing my findings, I came up with the following changes to make the application an improved and more intuitive experience for users. 
‍
  • Added a call to action on the dashboard page that takes the user to the profile page, where they can easily access the macro calculator.
  • Redesigned the macro breakdown section of the meals page to include macro targets for the day.
  • Used the ‘log meal’ button to solve issue #1 by repurposing it to take users to the profile page where they can generate their macros as well as other daily goals. 
  • Created a greater peekaboo effect with the cards in the activity section to let users know that this section displays more information when you scroll horizontally.
This project has provided me with a wealth of knowledge, insight, and appreciation for user research and interface design. It was a truly fulfilling experience to be able to look at a problem that I am passionate about and create a real life solution that could potentially help others experiencing the same issues. 

I learned so much throughout this process, but I'd say that my main takeaway was the importance of staying focused on the user experience and the problem that I initially set out to solve when I started the project. While designing this app, I went through many iterations and challenges because I was having trouble narrowing down the true purpose of the app. I often found myself deviating from my original problem and solution, and creating screens and features that might overcomplicate the experience for a user. Designing this taught me that sometimes less is more, simplicity is better, and sticking to the original problem and solution is essential for truly impactful UX/UI design. 
‍

Reflection

Powered by Webflow
back to top