Role: UI Designer
Duration: 8 weeks
Find your GymGuru to help you get (back) into a fitness routine.
Problem Statement:
Our users need a motivating and welcoming environment to help them begin their fitness journey. By providing an easy way to find routines and workout at home, we hope to see their fitness levels increase and enjoy a happy and healthy lifestyle.
Objective
To motivate people into an exercise routine that suits their level, schedule, and interests.
Context
Who?
People who are new or returning to fitness, want to find activities they like and get into a good routine.
What?
A responsive web app that allows users to search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
When?
As the web app aims to get users into a routine that suits them, the web app can be used wherever they like. They will use the web app while they are searching for, scheduling, and following routines.
Where?
Anywhere that suits their fitness needs - whether it’s at home, the a gym/studio, or out in nature.
Why?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce of illness, learning something new.)
User Persona
Rebecca
Age: 35
Job: Software Developer
Status: Single
Pronouns: She/her
Location: New York, NY
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
Goals:
Rebecca wants to lose weight and get in shape; she works a sedentary job so this doesn’t allow for a lot of time allocated to exercising.
She wants to be able to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to fitness, Rebecca would like to find something that will help her learn how to exercise properly and safely.
Rebecca wants help finding routines she can enjoy.
Tasks:
Rebecca would like to find exercises that align with her goals of losing weight and getting into shape.
She also wants to find short exercises that will allow her to workout in between other activities.
She wants the tool to keep her motivated and engaged as she can get distracted with her busy schedule.
Environment:
Physical: Rebecca lives in an apartment with her boyfriend and 3-year-old daughter.
Social: She has several friends from her software development job, and one of them recommended this tool as something she should check out to help her reach her goals.
Technological: Rebecca is very tech savvy, as she works on computers every day.
User Flow & User Stories
As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.
Designs
Search Results Screen
Videos grouped by activity (i.e. Running, Pilates, Yoga, etc.)
Videos have swipe feature to view more or button to view all
Search Results Screen
Videos grouped by activity (i.e. Running, Pilates, Yoga, etc.)
Videos have swipe feature to view more or button to view all
Search Results Screen
Started to add some color and text to my wireframes
Mood Board 1
Rationale
Mood board 1 has more of an attainable and inviting look and feel. The colors are lighter and brighter and the images are more beginner friendly. I used a lighter font and decided to incorporate a more vibrant orange.
I tried to achieve a contrast to this with Mood Board 2. The imagery is more intense which gives a more advanced fitness level feel. I used a bolder font, dark mode iconography and a more streamlined color palette.
I like both mood boards, however my persona Rebecca is someone who is a beginner to fitness so mood board 1 seems to fit her goals a little more. Mood board 1 has a more fun and attainable feel geared toward helping people learn the basics of fitness and working out.
Rationale
Color Palette 1 is consists of a lot of warm tones and reminds me of fall/autumn. It also comes off a little feminine with the warm pinks and cream.
Color Palette 3 consists of a lot of blues and greens which can give off a sense of calmness and trust.
Although I like each of the color palettes for their respective reasons, I opted to go for Color Palette 2 because it matches the theme and overall vibe of a fitness app the most. I didn’t want to go with Color Palette 1 as it may close off some of the users who are male. And Color Palette 3 seemed a little too sleepy for a fitness app. In the end I felt that Color Palette 2 gave off the right amount of trust with the hues of blue, and at the same time, energy with the hues of orange that a fitness app would need.
I also decided to conduct a preference test and found that users preferred Color Palette 2.
Color Palette 1
Color Palette 2
Search Results Screen
Updated the color scheme to match user preferences
Added images to go with the mood of this fitness app
Designing for Different Breakpoints
Tablet Landing Page
Adjusted image for screen size
Added images for “Testimonials”, “Find Your Guru:, and “Blog
Gave user a short explanation of each link
Desktop Landing Page
Early Sketches
Video View Screen
Play video
Title (Instructor, Exercise Type, Duration)
“Add to Calendar”
“Set Notification”
“Earn 50 points for completing this exercise”
“Share video with a friend”
Low-Fidelity Wireframes
Video View Screen
Play video
Title (Instructor, Exercise Type, Duration)
“Add to Calendar”
“Set Notification”
“Earn 50 points for completing this exercise”
“Share video with a friend”
Mid-Fidelity Wireframes
Video View Screen
Added notch
Move the hamburger menu to the upper left-hand corner
Mood Boards
Color Palettes
High-Fidelity Wireframes
Video View Screen
Updated the color scheme to match user preferences
Added statistics about video
Also added icons next to options to give visual appeal
Added Back button
Added images for “Testimonials”, “Find Your Guru”, and “Blog”
Gave user a short explanation of each link
Weekly Progress Screen:
Progress will be grouped by goal
Goals are customizable based off of user’s exercise level
Recommended exercises are given to help user reach their weekly goal
Weekly Progress Screen:
Progress will be grouped by goal
Goals are customizable based off of user’s exercise level
Recommended exercises are given to help user reach their weekly goal
Mood Board 2
Weekly Progress Screen:
Added rounded corners to the progress bars
Color Palette 3
Weekly Progress Screen
Updated the color of the progress bar
Added more information next to the title of each progress bar
Added Back button
Tablet Sign Up Page
Lengthened input fields and button to accomodate screen size
Desktop Sign Up Page
Lengthened input fields and button to accomodate screen size
Style Guide
Animations & Haptics
Animation
Added “Ease In” animation when the user clicks on the hamburger menu
Haptics
I would like to incorporate a vibration to signal to the user that the workout has been added to their calendar
Prototype
Try it yourself!
Final Design
Future Roadmap
Reflection
At the moment, the focus of the GymGuru app is focused on finding and watching videos to help build a fitness regime. There are a few concepts that would be further explored with continued research and iterations:
Viewing the user’s schedule and linking it to their personal calendar
Finding the preferred types of workouts offered through the app (through surveys or user interviews)
Customizing the Weekly Progress Tracker to the user’s needs and goals
Conduct usability tests to find whether users would prefer to watch videos on their phone, tablet or laptop.