Client: Kwon Li | Role: UX/UI Designer | Duration: 4 weeks | Tools: Figma
Overview
Kwon Li is an independent certified personal trainer who lives in Los Angeles, California. In the few years that he’s lived there, he has gained clients through referrals. Knowing that this business has busy and slow seasons, Kwon wants to increase his clientele while retaining his current ones as well.
Challenge
With numerous trainers in Los Angeles, it can be tough deciding which one to work with. The challenge was to find out what people value the most in a personal trainer and to combine that with Kwon’s expertise to make him stand out from other trainers.
My Process
Shown below are the steps I chose for this project. It was important to start with a discussion with my client on the type of website he wanted and what was important to his brand. Then I conducted research on the types of personal trainer websites and learned what people’s views on a trainer was. Throughout the process, I would keep my client informed on the decisions I made regarding the types of features and what my designs looked like. With his input, I was able to build a prototype of his website to perform usability testing with.
Goal
Design a responsive website that showcases Kwon’s skills as a personal trainer in order to attract more clients and create a brand that resonates with his current and desired clientele.
1. Research
To start off my research I looked at different types of personal trainer websites to identify common design patterns and to see what type of information was being presented. For my interviews, I needed to make sure that the participants included both people who have worked with personal trainers before and people who haven’t but would be open to.
Secondary Research & Competitive Analysis
I learned about the different types of personal trainer websites and was able to determine what my client wanted. When I looked at other trainer websites, I took note of the sites that were visually appealing and easy to use based on the organization and the amount of content shown. This would show me what was important to include on my client’s website.
Key Findings:
A website showcases a trainer’s credibility and increases their chances of being found by new clients
Including other social media platforms on a trainer’s site help boost their presence online
The best personal trainer sites address the pains and problems of their ideal clients
There are 3 types of personal trainer websites: client-focus, brand focus and topic focus
Types of personal trainer websites
Interviews
To further my research, I needed insight from users on their opinions, experiences, preferences and expectations of trainers. In addition, knowing what reservations users have with hiring a trainer will give me the chance to seek out opportunities for Coach Kwon’s site to attract and retain clients. My interviewees consisted of people who have worked with a trainer and people who have not but would like to. Below show the insights from the participants.
2. Define
The interviews allowed me to create a persona that would represent the target users. In order to address the users’ needs I came up with a feature roadmap and added the most important features to a sitemap. From there I create a task and user flow and made sure there weren’t too many decision points so that users would have an easy experience when using the website.
Persona
Knowing the goals and frustrations from users, I decided to create a persona to help identify the type of audience Coach Kwon is looking to grab the attention of. Say hi to Joe Core! Joe represents the average person whose career and habits have gotten in the way of living a healthy lifestyle and is looking to make a change for the better.
Feature Roadmap
With Joe representing the target audience, I then had to think of the type of features that would not only draw him to Coach Kwon’s site, but would make him want to train with Kwon. Listing and prioritizing all the features allowed me to address the users’ needs so that the site can stand out from other personal trainer websites.
Sitemap
Once I had my list of features, I created a sitemap to structure the pages of the website. This helped me organize the features so that the user will find the site easy to navigate. Based on my interviews, it was important to have an about page and testimonials so that Kwon can establish his credibility.
Task Flow
After I established the overall hierarchy, I put together a task flow to help me determine what to build to attract and retain users. Having a path to find exercise videos can show how to attract a user and make them want to sign up for membership. This would result in user retention.
User Flow
To better understand the user’s journey of the website, I created a flow that a new user would take to book a session with Coach Kwon. I considered the users that would want to try it out first as well as the ones that would be committed to starting a program.
3. Design
Next was to design the look of the website. I began sketching ideas based on what I had seen on other trainer sites but made sure to highlight the important features based on my research. I then moved to wireframes to build out additional pages. Then I developed a style tile and UI kit to further develop my wireframes into high-fidelity designs.
Sketches
With all the different trainer websites out there, I knew the aim was to separate Kwon’s site from the rest. Having simplicity and intuitive functionality was my focus. I started by sketching out what the homepage would look like. I took the features with type priority based on my research and placed them on the homepage.
Wireframes
Then I created the other pages along with the homepage as digital wireframes for desktop and mobile. In addition to incorporating the important features for the users, I went with a more image-heavy look in order to gain the users’ attention and spark their interest.
Branding
Next was to develop a brand for Kwon. Instead of starting entirely from scratch, I decided to use the name Coach Kwon as a starting point and further develop from there. Since the name was already used with his current clientele, I kept it as a logotype. From there, I enlarged the C to give the name more of a logo look. I chose orange for the primary accent color since it represents motivation, positive attitude, and enthusiasm for life. The yellow was chosen as it represents happiness and sunshine since Kwon is based in Los Angeles.
UI Kit
Following the branding, I prepared a UI Kit with design elements that users are familiar with. This would include icons that would go on information cards to make it more visually appealing. I also made sure to include a lot of pictures to attract the user. This would help me in designing multiple pages efficiently for desktop and mobile.
High-Fidelity UI Designs
I then took the UI kit to further develop my wireframes. With the UI elements, I started building out high-fidelity responsive UI designs in order to prepare a prototype for usability testing. This would include two additional pages, the free training session page and the cardio training program page. This also gave me a chance to see if there was good balance with the overall color scheme.
4. Test
Once I create all my pages for the website, I built a prototype using Figma. Next was to perform usability testing with the prototype to see what improvements should be made. Users liked the simplicity and design of the site and thought it provided good information. However, they felt some of the wording was confusing and thought it would be good to inform the user of the free session throughout the site.
Prototype
I developed a prototype of the website for desktop. I wanted to make sure the site was easy to navigate through while also providing invaluable information. Click below to view.
Usability Testing
Using the desktop prototype, usability testing was conducted to test the flow of the site and to understand any issues the users may come across. The test had the users find information about a cardio program and then get in touch with Kwon to claim a free session.
Affinity Map
I sorted all my findings in an affinity map so that I can address the issues the users came across. Overall they liked the simple and clean look of the website but offered some minor suggestions.
Findings:
Wording on information form can be more concise
Additional choices for information form can be added
A section title was a little confusing on the homepage
Having the free session section on more pages can increase conversion
Revisions
After identifying the issues, I revised the prototype by making the appropriate changes shown below.
Add “other” to checkbox choices
Change “I prefer to talk via” to “I prefer to be contacted by”
Change “Coach Kwon Philosophy” to “Get to know Coach Kwon”
Put the Free Session section at the bottom of more pages
Next Steps
The next steps would be the continued development of this website. I would add some written sample workouts to each individual program page as that was suggested from the testing. After showing Kwon the prototype, he had come up with the idea of having the main CTA button on the homepage take the user to a questionnaire. This would help determine which type of training program will be right for the user without them having to read the detailed information.
Final Takeaways
The big takeaway here was learning through research what was hindering people from taking control of their health and seeking a professional for guidance. Knowing everybody’s perception is different and then coming up with ways to solve their problems is what really made this task challenging. I definitely enjoyed this project a little more because of the fact that it was a passion project. Being able to change the way people embrace fitness has been rewarding. With the development of this project I hope to get further insight from users and come up with more ways that will get everybody to make their health a priority.