my trainer

Project Overview

The Project

my trainer is a service that aims to bridge individuals, from any background, to certified trainers through a personally tailored, step-by-step process. Our service targets users of all backgrounds and strives to make finding a trainer easily accessible to all.

Project Duration

October 2023 to December 2023

The Problem

Finding a trainer is not as straightforward and easy as it seems, and it becomes even more difficult to find a trainer who can accommodate each individual's specific needs and wants.

The Goal

my trainer focuses on an easily accessible, personalized process for users to find their trainers who will help users reach their goals while building genuine relationships. The service aims to minimize hardships while aiming to cater to users' preferences when finding a trainer.

My Role

I was the UX designer and researcher leading the my trainer website and mobile app designs.

Responsibilities

Conducting interviews, creating paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies and testing, accounting for accessibility, iterating on designs and responsive design

Understanding the User

User Research: Summary

I conducted user interviews and proceeded by creating empathy maps in order to better gauge the target user and their needs. During this process, I discovered that majority of target users find that the process of getting a trainer is too much of a hassle, or they simply do not know where to begin.

Furthermore, target users are not able to find trainers for their particular target goals. However, the target users generally are looking to continue their health and physicality in any way possible, so if finding a trainer was not as difficult or inconvenient, they will most likely take the opportunity to acquire one.

User Pain Points

1) Time
People are busy. It's difficult to find a block of time insomeone's schedule to find a trainer.

2) Goals
Everyone has different goals, whether one is a beginner or is more experienced. People can train for different activities, sports, and goals. Finding a trainer for such specific goals can be difficult or even impossible.

3) Location
With people being busy already, most target users are not willing to drive far for a trainer.

4) Language
Some target users are interested in finding a trainer but are deterred by their fluency in English.

Persona: Joseph

Problem Statement: Joseph is a college student who needs intuitive website/app navigation, along with a personalized approach, for finding a trainer because he wants to circumvent personal issues with time and language.

User Journey Map

I created a user journey map of Joseph's experience using the site to help identify possible pain points and improvement opportunities.

Competitive Audit

Before proceeding into any design considerations, I conducted a competitive audit to analyze how similar services, comparing the accessibility and flexibility features of other fitness interfaces.

After creating this competitive audit, I created a report summarizing key findings.

Starting the Design

Sitemap

Difficulty with ease of access and not having specific preferences for a trainer were pain points for users, so I created a sitemap that targeted those points. My goal here was to make strategic information architectural decisions that would improve overall website navigation and straightforward in booking a trainer.

Paper Wireframes

I sketched some paper wireframes for each section of my web site's homepage. I decided on certain elements to help optimize my homepage for better navigation, browsing, and accessibility. my trainer is meant to be used on the go and at home, so I also created a mobile format for my paper wireframe as well.

Digital Wireframes

Transitioning from paper to digital wireframes made it easier to pinpoint important features for better visibility and navigation. The importance of combining useful button locations with strong visual element placement was key for this homepage design.

Digital Wireframes Screen Size Variations

As mentioned before, my trainer is a service that should work on different devices. I have created digital wireframes that are compatible with the iPhone and iPad.

Low-fidelity Prototypes

The process, for creating low-fidelity prototypes, focused on the primary user flow of finding a trainer while keeping in mind user pain points. I also received feedback from others about the visual placement and organization of the designs and addressed them accordingly.

Usability Study: Parameters

Study Type: Unmoderated Usability Study

Location: United States, Remote

Participants: 5 Participants

Length: 20-30 minutes

Usability Study: Findings

1) Confirmation
After booking a trainer, users were not prompted with a confirmation page.

2) Navigation
After users finished booking a trainer, they wanted a way to see their trainer(s).

3) Preferences
When users were selecting their preferences, they wanted a way to add suggestions for preferences if they could not find what they were looking for

Refining the Design

Mockups

Receiving feedback from the usability study, I designed a confirmation page after the booking process of trainer. Users will be prompted with a confirmation page that gives users an option to "confirm" or "cancel". If users confirm, they will be given another page telling them they're all set. If the user decides to cancel, they will be redirected to the previous page.

Users also wanted a way to check their trainer(s), so I replaced the "find trainer" icon on the dock with a "trainer list" instead. Users are already prompted by the "find trainer" button on the home page, so it seemed like an appropriate change to add the "trainer list". If users want another easily accessible spot for "find trainer," future changes can be implemented.

Mockups: Original Website Screen Size

Mockups: Screen Size Variations

I have considered additional screen size mockups based on earlier wireframes. Because users will most likely use this service from a variety of devices, I felt it is crucial to optimize the browsing experience for a range of device sizes. For these mockups, I have created additional designs for mobile and tablet users for smoother experience.

High-fidelity Prototypes

My hi-fi prototypes followed the structure of the lo-fi prototypes' user flow, but I built extensively upon them to capture the mission and features of my trainer. I also implemented revisions and improvements based on feedback.

Accessibility Considerations

1) Color
I used strong color contrast that is easily identifiable so that users can distinguish key points, areas, and text. This is important to me because I have a form of colorblindness and want to also help those with any color deficiencies. I used WebAIM to check if the contrast is accessible.

2) Hierarchy
I tried to establish a clear hierarchy using headings so that navigation will be more clearly defined.

3) Size
Designing in different sizes is another move towards making the website more accessible for those with different technological needs.

Going Forward

Takeaways

Impact: Our target users stated their appreciation for the website design’s approach for a personalized experience and its clear visual hierarchy.

What I learned

I learned how difficult it can get when prototyping an extensive product's design and how important it is to alleviate user pain points through the implementation of research and continuous feedback.

Next Steps

1) Conduct follow-up usability testing on the new website

2) Identify any additional areas of need and improve on them

3) Implement more accessibility features