UX Researcher, UX Designer
Year
2023
Tools
Figma, Zoom, Photoshop, Keynote, Google Workspace
UX Skills
Competitive Analysis, User Interviews, Journey Maps, Storyboarding, Usability Testing, Wireframes, Prototype, Project Management, Visual Design
Team
Aaron Stirewalt, Jasmine Yusuf, Wendy Vargas
Advisor
Feras Nabulsi
Background
Fitmate is a workout app that helps users reach their fitness goals. This platform seeks to empower busy adults with an easy way to create and manage their exercise routines so that they build consistent exercise habits.
Overview
I was the UX Designer tasked to create a style guide, visual design, high fidelity wireframes and prototyping. The team composed of myself, a Project Manager, and UX Researchers. This project completed as a class requirement from my masters degree in UX Design at Maryland Institute College of Art.
Problem
People often struggle to consistently workout. This is often caused by busy schedules interfering with someone’s ability to make it to the gym. Other common causes include the lack of equipment knowledge, intimidation of working out in public, boredom of repetitious routines, and cost of gym memberships.
Problem statement
How might we help users to confidently meet their workout goals safely and efficiently?
Target Audience
The main beneficiary of this project are busy, working adults who need an easy, informative way to create workout routines so that they can achieve their exercise goals in a timely manner, while knowing how to safely operate equipment.
Research overview and methodology
- We chose to interview 8 selected participants to discover some of their pain points and needs. Based on our list of screener questions, each interviewee qualified in terms of age, occupation category, lifestyle and workout routines and frequencies.
- The interview consisted of several questions aimed at discovering potential opportunities to improve their experience with exercising and working out. We chose a qualitative research approach by conducting Zoom interviews to allow us to ask questions that cannot be easily put into numbers.
- Our goal in conducting these interviews was to get interviewees to express themselves while providing data, to open up about their pain points and their goals and motivations. In doing so, we are able to understand the human experience with a degree of flexibility and to empathize with them as a person.
Key Findings
After interviewing 8 participants, we were able to gain insights on how to better improve their workout experience for each individual.
- People are busy – Users generally want to gain a healthier lifestyle and exercise more even with having busy schedules.
- Challenges of working out – Most of the participants faced challenges surrounding time management, discipline, motivation and consistency.
Just needs a little push – The idea of working-out seemed intimidating due to not knowing where to start when it comes to a new work-out regimen. - Fear and lack of information – There also was a fear surrounding gym equipment, not knowing how to properly use it and the risk of injury.
Participant 1:
“You think you know what you are doing, the next thing you know you are on Youtube.”
Participant 2:
“I had a friend do a workout the wrong way, and he had his spine injured because of that.”
Participant 3:
“Getting started is the hardest part. But, when you’re in the zone with the right vibe, energy and adrenaline, it’s not that bad.”
Proto-persona
We identified two user types: a young adult in his “getting started” life stage, and a busy adult in her “moving up” life stage.
Scenario 1
We created a storyboard for persona 1, Albert, who customizes his work-out based on his preferences and needs.
As a busy young adult, I want to have workout routines so that I don’t have to waste time thinking about what exercise to do next.
Scenario 2
We created a storyboard for persona 2, Miranda, who discovered alternative work-out options that still helps her meet her fitness goals.
As a busy adult, I want to exercise regularly so that I can maintain an active lifestyle.
Wireflows and wireframes
Wireflows helped us visualize the user and system flow. Low fidelity wireframes helped us visualize solutions at an early stage.
Design system
- Our design system consisted of a style guide and components. A balance of heavy and light colors were incorporated in the style guide. Heavy colors invoked strong emotions – it’s about having the courage and confidence to tackle a challenging workout routine, finding the energy and the strength to power through the motions, and having that commitment and dedication to reach your goals. While lighter shades invoked a sense of calmness and balance. Working out can also be about slowing down, grounding yourself as you find that moment of clarity and peace.
- Our typography also has a balance of heavy and light impact. Our headline font is in all caps and strong, impactful. Our body text is rounder, lighter, and softer. Through these colors and typography choices, there is balance between heavy and light, mighty and gentle, active and calm. And all these are okay, because working out is personal to users – it allows you to grow physically, emotionally and mentally in all states.
Creating a workout
Ability to create customized workouts with variable durations and focus-areas.
Select intensity level
Lets the user choose from beginner, intermediate or expert mode.
Select target area
Lets the user select a target area.
Select focus area
Lets the user select a focus-area.
Duration
Lets the user choose their preferred workout duration.
Recommended routine
Gives a recommended workout routine for “Gym” and “At Home” options.
Routine details
Provides routine description, a video and CTA buttons.
Alternative reminders
Alternate workouts suggested to encourage exercise consistency, removing one of the most common obstacles that prevent people from working out.
Workout calendar
Provides a high level overview of past and current workouts.
Set/edit reminder
To set or edit workout reminders. Ability to turn alternative workouts on and off.
Notification
Notification alerting the user to start workout.
Alternative suggestion
If the user dismisses the earlier notification, an alternative workout will be suggested.
Workout timer
A timer to accompany the user while he or she works out.
Workout video
A video to accompany the user while he or she works out.
Explore workouts by target area
Suggested workouts by target area allows the user to discover and explore different routines.
Select
To select a target area
Browse
To discover and explore routines
Workout details
Routine description to help users to the workout properly
Past workouts
A list of previous workout routines the user has accomplished.
Past workouts
A list of past workouts
Share
Ability to share a specific routine
Review workout
Ability to revisit and review the workout routine
Landing page
Some features in the landing page are: trending workouts, workout of the day, explore workouts and special care workouts.
Above the fold
Users can scroll through the different sections of the page.
Streak
Gamification element to help motivate the user to consistently workout
Trending workouts
Integrated with social media reels and stories.
Workout of the day
Highlighted workout that changes daily.
Explore workouts
Workouts categorized for gym, at home, couple workouts, group workouts and more.
Special care workouts
Special workouts for pregnancy, rehabilitation, handicap accessible, special health needs and senior citizens.
Microinteractions: Exploring workouts
Allows the user to explore recommended workouts wherever they are (gym or at home). There is also built-in educational material for every workout to reduce risk of injury
Toggle bar: Gym
Recommended routine fit for the gym
Pop up
Itemized gym routine details with CTA to start workout or save it for later
Toggle bar: At home
Recommended routine fit for home workouts
Pop up
Itemized at home routine details with CTA to start workout or save it for later
Microinteractions: While working out
The user has the ability to toggle between timer mode or video mode while working out. This enables the user to choose how they would like the app to run during their workout routine. The timer is also clickable, which makes the feature more accessible.
Timer off
Users can click on the timer or click the start button to turn it on.
Timer on
Users can click on the timer to pause or click on the stop button to turn it off.
Toggle bar: Video
Users can view the workout video or go through the description to learn more about the routine.
Output
Mockups in a mobile device:
Outcome
Figma Prototype:
Presentation deck:
Reflections and learnings
- Collaborating with subject matter experts – Finding and connecting with subject matter experts with limited time was challenging, but their inputs and feedback were essential in the project discovery and development stage.
- Feasibility of features – AI, whilst trending, is still relatively new in the market so my features had to be within the capabilities of the available technology.
- Reaching MVP amidst scope creep – Many user needs were uncovered during research and interviews. However, I only had 8 weeks to accomplish this project. I learned the importance of refining my MVP, setting realistic goals and working on a project plan.
- Collaborating with a remote team from different timezones – Despite the challenges of working remotely with team members from different timezones, we effectively utilized platforms such as Zoom and WhatsApp to successfully execute the project.
Next steps
If we were to continue working on this project, some features we can look into incorporating are:
- Scrollable time selector – The ability to add a scrollable time selector when setting/editing a reminder in the app (Apple Calendar)
- 3D model – Click on the muscle groups in a given routine to see a 3D model with highlighted areas
- Time zone integration – Adding in time zones for reminders, in case of travel plans (Vacation gains!)
- Apple Calendar Integration
- App-wide search feature
- Airdrop integration for sharing a workout (plus added visibility and interactions!)
- Finish date – The ability to forecast a finish date for one’s goal (set via onboarding)