Team
Adriana Ramirez, Paul Kim, Adam Gomez
My Role
UX/UI Designer and Researcher: responsible for user research, personas, Lo-fi prototypes, wireframing, and visual designing
Timeline
Jan 2020 - March 2020 (8 weeks)
Design Challenge
Collaborate with a local business in order to improve and expand their digital services.
3R Personal Training
3R Training is a personal training service provided through Brandon Cheeks. His gym is located near Downtown San Diego and offers convenient access close to the I-5 Freeway. Brandon stands by his philosophy “Respect, Reliability, and Results” which is what he implements in all his programs. Using the most current knowledge of physical training and athletic certifications, Brandon creates personalized workouts tailored to his clients. We partnered with Brandon to expand his online presence. Brandon’s new website will be a digital platform that allows clients, both potential and current, a chance to virtually tour the facility, see the gym’s location, showcase his training style, book an appointment, view his schedule, and hear from his clients about who and what Brandon is and what he offers.
Product Goals
User Research
In order to understand our users better, we conducted in-person interviews where we crafted questions based on consumer needs and usability. I conducted half of the in-person interviews and compiled the data for analysis. Brandon’s clients’ age varies from as young as college students to retired individuals, therefore, we conducted interviews with those who range from 19-64 years of age.
Key Insights:
From the interviews, I found that 90% of the individuals said when they are looking for a personal trainer many people are looking for credibility. They would want someone who has certificates as well as a strong track record.
What 3R Training is going to take away: Add Testimonials
Those who are just starting out at the gym want to explore more different types of exercises, but they would like someone to correct their form if needed.
46% of the people we interviewed had previous injuries and 20% of them are limited to certain exercises.
People don’t want to spend a lot of time booking an appointment, so they would like an interface that is user friendly. When they book an appointment it must be intuitive and easy to link to their calendar.
Personas
After the analysis, we concluded that there are three major personas where we can categorize potential clients. The first one is the Athlete which is someone who is highly active looking to gain specific physical goals revolving around strength, speed, and mobility, or aesthetics. The second one is the Newbie which is someone who has little to no experience within the fitness world and would like to make a lifestyle change. The third one is the Bounce-Back which is a person who is looking to recover from an injury. I designed the persona images using Adobe Photoshop in order to illustrate our users.
The Newbie
Fairly new to working out and would like a bit of guidance on exercises
Use Cases:
Read through testimonials to see if this personal trainer is the right fit
Book an appointment
Find contact information or a way to directly communicate with the trainer
The Athlete
Active gym-goer who strives to achieve their fitness goals
Use Cases:
See services, price, and availability
View the credibility of the personal trainer
Wants to find the facility hours and the location of the gym
The Bounce Back
Has an injury and is limited to certain workouts
Use Cases:
See the different types of packages offered
Read a routinely updated gym newsletter and/or fitness blog
Book and pay with little to no friction
Competitive Analysis
We conducted a Competitive Analysis with 4 competitors. (LocoMotion Athletics, 24 Hour Fitness, Leo’s Fitness Lab, and UFC Gym. Understanding the competitors allowed us to identify key insights such as functionality, navigation, site architecture, and content.
Site Architecture
LO-FI Prototypes
As a UX Designer, my role included designing Lo-Fi prototypes that included our product’s goals and could be tested on users. For our mobile layout of the website, we were determined to create an intuitive design that was inspired by our user flow. The sketches below display a condensed version of the ideas for the website.
Homepage
Services
About
Blog
Testimonials
Contact Us
Wireframes
We converted our lo-fi prototypes and brought the design to life using Figma as our Design software. I designed the home page, navigation bar, biography section, and services page. My role consisted of me making sure all pages even the ones that I didn’t design were aligned with the entire website.
Desktop Wireframes
As a designer one must design for various platforms, therefore, I took the role to ensure that our desktop and mobile layouts aligned with one another.
