Designing a Responsive Website that Finds You a Personal Trainer
Project Details
Sector: Fitness & Health
Challenge: To design a responsive website that finds users a personal trainer to learn and apply responsive web design concepts and principles.
My Role: Lead UX/UI Designer, UX Researcher, UX Strategist, UX Writer, Interaction Designer
Responsibilities: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, and iterating on designs.
Project Duration: 3 months - (December 2022 - February 2023)
The Design Process
I. Defining the Problem
As part of the Google UX Design Certification, we were tasked with choosing a randomly generated UX design challenge from https://sharpen.design/. My challenge was to design a responsive website that finds users a personal trainer. To do this, I had to first make sure I understood the needs of the kinds of people that want to actually get a personal trainer.
II. Empathize
To better understand the pain points of people who seek out personal trainers, I reached to my network so that I can ask them firsthand! I asked 10 people (roughly between the ages of 23 to 44) to ask them about their experience with fitness exercise, and whether or not they've used a personal trainer.
Empathy Map
%20(1).png)
Analysis
So, with these pain points in mind, I created personas to better illustrate the kind of users that would benefit from a website like this product.
Personas
Analysis
At this point, I was ready to start generating ideas to address these user needs.
III. Ideate
Paper Wireframes
Digital Wireframes
Analysis
In the paper sketches, I experimented with different layouts for representing the various elements and what an account creation flow would look like in a personal trainer or fitness related app (NOTE: to view the different screen sizes, click the Figma logo on the top left and navigate from there).
IV. Test (Round 1/2)
Initial User Feedback
Affinity Diagram - Themes
Analysis
In the initial feedback, each color sticky note represents a unique user. I noticed patterns or themes within the feedback and grouped them accordingly to create insights. From there, I could implement their feedback into the designs to produce the next iterations of them.
Usability Study Findings
Analysis
Based on these insights, I chose the main insights that would improve the user experience the most. To achieve this, I prioritized the insights based on the frequency that they came up in the usability study and the perceived level of impact on the user experience if taken into consideration. Insights that are high frequency and high impact are prioritized first. Followed by low frequency, high impact. Then, high frequency, low impact. Lastly, low impact, low frequency. After I arranged the insights using the matrix, the next step was to choose a typeface, color scheme, and choose icons that were cohesive to create a design system to design the website around.
V. Developing from Wireframes (Round 1/2)
Design System
I chose a color scheme that was simple but yet conveyed brightness and sense of energy. So, I chose the bright green (#1BD370) as the main accent color because I know, at least in the West, green symbolizes health, wealth, vitality, and, life. I chose the darker green color (#499E5B) to support the main color and add variation to the designs. Using this darker color allowed me to apply the Gestalt principles of design (common region, proximity, and similarity) to communicate to users relevant information in a more organized way.
Mockups
This screen shows the individual trainer's profile. I've added the trainers certification, a short paragraph about the trainer and badges that represent why the user matched with this trainer, specifically, and their laid back style.
VI. Test (2/2)
_edited.jpg)
I've added more customization for the account creation flow. For example, I've added the option for users to set their experience level, if they prefer online or in-person trainings, and more inclusive gender options when asked for users' gender.
VII. Develop: Iterating After 2nd Usability Test
During my second usability test, I used the findings to iterate on the mockups I previously made. Here are the findings from the second usability test:
Mockups
_edited.jpg)
I added the choice for users to enter "other" options when asked to enter their fitness goals, medical conditions, and the sports they may or may not play. I also rearranged the preferences so that it appears from the right when users click the profile icon on tablet and mobile devices. I also moved the dashboard button to a more obvious place for users when they navigate to the "edit profile" screen.
High-Fidelity Prototype
Click "VIEW PROTOTYPE" to run the simulated designs in Figma (NOTE: to view the different screen sizes, click the Figma logo on the top left and navigate from there).
VIII. Accessibility Considerations
_.png)
In consideration for those with visual impairments, I have made use of Gestalt principles, like common region, similarity, and proximity to create a user friendly experience. I also made sure to chose a color scheme that provides contrast between the visual elements and the background.
IX. Next Steps
_.jpg)
Impact:
The website makes users feel included by accommodating their unique goals, interests, and situations as much as possible. One quote from peer feedback:
“I can see that the website takes into a variety of user needs, backgrounds, and interests!"
What I learned:
I learned to apply Gestalt principles to create an engaging, effective, and coherent user experience that is responsive across multiple screen sizes. I also learned how to prioritize user feedback and that it's not completely necessary to incorporate every single piece of feedback that users have because designers and teams have a limited amount of resources to allocate to various projects. So, it's essential to prioritize user feedback.
Going forward:
The next steps are to iterate on the designs based on feedback from a third round of user studies and continue to conduct more user research to determine any new features to add/remove. I would also take a step further and add a way for users to see videos of their trainers and a way for users to get an idea of what kinds of exercises to expect when matched with a trainer.
.png)
