Personal Trainer
Freelance Case Study End-to-End Project
My Role
Full-Stack Researcher, Designer and Developer
Project Type
Case Study – End to End Responsive Design (RWD)
Freelance Project
Timeline
2 months – Mid Jan to Mid March 2021
Tools
Figma, Miro, Trello, Photoshop, Maze, Google Survey, Sublime Text, WordPress, HTML5, SCSS, Jquery
The problem
Freshly arrived in Denver Maxime wants to make his passion he every day life by creating a business as a Personal coach. In order to be known in the community for his experience as the official trainer for the French Army school and increase his amount of clients, he needs an online presence .
Goals
Creating and Developing an online presence of an entrepreneur, a personal trainer, after being the official trainer of the french army school. After achieving multiple projects in France, Maxime decided to train the beautiful folks of Denver. Freshly after his arrival, he contacted me to help him launch his business in order to help people reach their full physical potential.
The project is to define Maxime’s clientele, define their goals, Research, strategy, branding, translation, copy writing, and design a complete website.
MY Methodology
RESEARCH GOALS
For designing a fitness website, I wanted to understand how people proceed to search for a personal coach. These observations would allow me to understand user behavior patterns such as the steps taken to complete certain tasks.
From there, I wanted to understand how the search, decision, and hiring process could address common pain points and enhance the experience as a whole.
- Empathise with the user and gain useful insights into their lives
- Come up with solutions backed by research
- Improve my solutions based on user feedback
- Communicate my design process
Research Methods
Based upon my research goals, I decided to use three research methods
- Competitive Analysis
- Surveys quantitative data
- Interviews qualitative data
- Stakeholder Interviews
Stakeholder Research
To kick-start the design process, I Interviewed the stakeholder which helped establishing the foundations for the project by providing valuable insights. These insights guide the flow of the entire project, such as business goals, technical constraints, and usability problems.
- What are the short and long-term business goals?
- Who are the users?
- What is the stakeholder’s definition of product success?
User Research
User Insights
“Knowing the price before contacting a potential trainer is important but if I made my mind for hiring someone, cost is not a decision factor”
“Being and staying motivated is the hardest when working out”
“With Covid, I put on weight and I’d need a personal trainer”
Competitor Analysis
Carrying out a UX competitor analysis will empower the business choices. Through researching the competition, I can glean insights from the data I collected and make informed UX design decisions.
A competitor analysis allows me to find out if there are any gaps in the market. Indeed, I discovered that the competitors’ products have a “free resources” section. In order to align the stakeholder business goal with the competition, I Informed him, it would be essential to add free content.
Building empathy: User Persona
Personas: Based upon the user data and to communicate the user needs to my stakeholder, I developed a persona. The personas represent a diverse demographic and thus, experience different goals and frustrations during the trainer research process.
This is Elsa, she is a marketing manager, She is very busy with work, and lacks the motivation to work out. Her main goal is to stay fit but also develop motivation, enthusiasm and make fitness part of her routine.
Ideation & Brainstorming & Stakeholder Meeting
Data ANalysis and skateholder presentation
The results from the research methodologies were organized within an affinity diagram. The affinity mapping helped me analyze and synthesize our user research findings by patterns and themes. I presented my findings to the stakeholder in order to align business goals with user needs.
USER JOURNEY MAP
Journeys: During the meeting, the stakeholder was reluctant about research findings. I developed a user journey in order to communicate the importance of making design decisions around this data findings, like prices, descriptions of services. By analyzing the persona’s thoughts and emotions at each phase, I was able to show the user needs to the stakeholder and rationalize my design decisions.
The outcome of the meeting was somehow positive. The stakeholder changed his mind on adding a page/section that would include details of his services but without pricing.
Architecture & Wireframing
ACCESSIBILITY
My clients wanted a very light green for his branding, in order to communicate a sereine fitness session with him. Through prototypes, I showed him that his choice was very hard to read. People with various types of visual impairments, such as color blindness and low vision, perceive colors in different ways. I analyzed the color with an accessibility & contrast checker tool.
The guidelines say that normal text must meet a contrast ratio of at least 4.5; large text should have a contrast ratio of at least 3. This example shows clearly that the stakeholder’s original color choice is impossible to read with a white background. It is almost painful to look at the text.
Stakeholder choice
“The first requirement for an exemplary user experience is to meet the exact needs of the customer, without fuss or bother.”
My suggestions
WIREFRAMES & LOW FIDELITY PROTOTYPE
“Making people think or remember requires the most mental resources. Look for trade-offs, where you can increase visuals. ”
My client wanted to communicate nature, confidance and peaceful environment by using a very light green for his branding. Color is an important part of visual accessibility. Through prototypes, I showed him that his choice was very hard to read with a white background. I suggested a black mode website but he was not a fond of this option
USER TESTING
Overall, users were able to achieve their tasks. But as expected, the color was too bright to be read by people. By testing with real users which are potential clients, the stakeholder realized that changing the color would be best in order to avoid losing potential customers by creating an unpleasant experience on the website.
UI Design
Mood Board
Minimalism Relaxing Confidence Professionalism Clear Nature
To reinforce the communication between my stakeholder, I designed a moodboard that translates my visual ideas.
COPYWRITING & COntent
Copywriting is also an important things too to make communication between our product and our users more clear. Effective copy content improves the usability of the apps and websites as well as encourages people to interact with the interface and complete their goal. People tend to be lazy when reading lengthy paragraph or sentence. People like to scan or skim when reading.
I was entirely in charge of the copy writing and the content of the website. I followed a process.
- Research, to understand the personas
- User Guidelines
- Clear, Concise and Consistent
High Fidelity SCREENS
While moving to High fidelity, with the color that was not respecting design practices, I reduced the amount of green originally planned. I kept the green mostly for hovering or with a background behind. When the stakeholder wanted a title in green, I made it bolder and way bigger with a little bit of shadow. I wanted the user to be able to read especially for their first visit to the product
PLATEFORM CHOICE
Two priorities:
- Being able to maintain his website after being designed
- Stay within his budget
After presenting some WYSIWYG options, we narrowed the choice to:
WordPress: Cheapest options, not the most intuitive but it’s learnable with Elementor
WIX: Very easy CMS but more expensive
What's Next?
Hamburger menu for Mobile: Design practices around the hamburger menu are on the top right corner. The actual menu is centered. I have done some coding tests to modify the positioning, just needs to be implemented.
Interaction Design: In order for the user to interact with the product, create engaging and meaningful relationships between people and products. I am currently brainstorming on the type of interaction to implement.
Key Takeaways
EDUCATING WHAT VALUE UX BRINGS
- Educating and persuading the stakeholder that UX research is fundamental and crucial for the project. Communication is important and it helped to clarify certain subjects.
THE RIGHT TOOL HELPS TO COMMUNICATE
- Choosing the right UX tools helped convince the stakeholder to allow me to design and solve pain points from user needs gathered from research:
- I somewhat convinced him on the color choice
- I included a “Services” section per findings in the research
Being passionate about people and fighting for their needs was really my main goal. My empathy for users and understanding for business helped me fulfill the goals of the Stakeholder and Users