Background
Local shops and practitioners are suffering a decrease in the demand of their services and products due to the extreme situation COVID-19 pushed worldwide. This can affect local economies and many families. Alongside this, we can see true intent and a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.
Challenge
For this project, our goal is to design a desktop website for a local business or professional. The focus is organizing the information in a clear way, to be most effective for both the customer and provider.
Also, we want to tackle Interaction design patterns to make the exchange as streamlined as possible.
— Research
About our client
Siv Coaching is a freelance personal trainer, specialized in training women and problems of female physiology. She wants to offer them a safe space to achieve their full potential. She also provides trainings adapted to menstrual cycle variations and she needs a website in order to make herself and her job known.
Client interview & users interviews
We used most of the research time for benchmarking and market research as well as developing a sense of professional best practices and rules of thumb to rely on.
We interviewed our client, Siv Coaching, to gather a sense of her passion, her needs, her pain points.
To understand the needs of our users and how Siv’s activity can benefit them, we also interviewed five women. We asked them several questions, about their workout routine and why they workout, if they prefer to workout from home or at the gym, if they feel the need to have a personal trainer and if they would feel more comfortable with a woman.
Most of our interviewees responded really well to Siv Coaching’s offer and seemed genuinely interested.
— Define
Affinity Diagram
We gathered all the data found in an affinity diagram, to get a better overview of all our findings.
We categorized every answers and then we collectively decided on the pain points we would like to focus on:
- The motivation: working out from home can be difficult for some, so we agreed we need a clean and easy to understand platform so the users can find informations quickly and enjoy coming back to it. Additionnally, providing live sessions with the trainer, so the clients can discuss their progress or difficulties, is essential.
- For women, by a woman: every trainers out there have courses solely for women. But the strenght of our client lies in her deep understanding of women physiology, so it’s necessary that we highlight it.
User Persona
We then created a user persona, to have a better understanding of our target user, what they want and how we might help them.
Sophie is a young active mom. Since having her little boy, her body changed so as her needs and possibilities. She don’t have much time to go to the gym so she is looking for a home workout that will suit her.
User Journey Map
We then highlighted Sophie’s struggles in a user journey map to find opportunities for our product and predict how she will interact with it.
Scenario:
After a long day at work, Sophie is leaving the office to go home. She wants to workout tonight to relax. But Sophie had a little boy about a year ago and her needs changed. She doesn’t have much time to train now so her shape changed. She is looking for a trainer that will understand and guide her with adapted exercises.
Problem Statement
So what can we do to help Sophie? How can we help her easily find a training that will suit her and answer all her needs?
We wrote a problem statement to define the project’s main objective:
“Young active women who want to take care of their physical and mental health need to find a way to stay motivated and find trainings online that fit their needs because they don’t have enough time to either search for or go to the gym.”
We then wrote down three “How Might We” so we can have a start at generating ideas for our final solution:
HMW help young active women find courses online that suit their feminine needs?
HMW optimise the research of a specific workout?
HMW help young active women to workout regularly with a constant motivation?
— Ideate
MOSCOW Method
After stating our problem, we moved to the MOSCOW method to find and prioritize the most important features.
For our “Must Have” we decided to focus on features that would greatly improve the user experience and the decision purchase, like a workout description with video preview, before/after pictures, trainer follow-up and level precision.
Minimum Viable Product
With all this informations, we were now able to write our Minimum Viable Product.
The goal of SivCoaching website, at the bare minimum, is to provide women a space where they find online trainings in accordance with their level of practice, feminine needs and motivation to workout regularly.
Site Map & User Flow
Using our MOSCOW Method and MVP, we made a site map regrouping the pages and components of our product.
And then made a user flow that helped us validate the user journey and to show how users will proceed to find a post partum program and buy it.
Concept Sketches
And now, we are ready to proceed to the next step, which is our concept sketches. We divided the job between the three of us, regrouped everything and tested our concept with five users.
A few things were lacking in our first draft:
On the first page, the purpose and subject of our product were not clear at first sight. It was not clear if we were selling online programs or in class.
On the second page, the interviewees didn’t know if they were in front of different programs or sub-parts of the same program.
The 3rd page was also lacking details about the program selected.
Finally, on pages 6, 7 and 8, an account creation confirmation page was missing as well as a button to go back to the homepage when the purchase is done.
Mid-Fidelity Wireframe
We created our mid-fidelity wireframes taking into account the main feedback from the concept sketches testing to improve the user flow on specific pages and sections.
— Visual Design
Moodboard & Brand Attributes
To begin the branding process, we started by creating a moodboard for inspiration and to set the direction that we wanted to take for the Siv Coaching website.
We focused on finding different elements (colors, typography and imagery) that aligned with Siv’s brand attributes: empowering, energetic, motivating, feminine and confident.
Style Tile
We worked on compiling everything together and defining the specific direction we will be taking for Siv Coaching’s branding. Each decision we made for the branding elements were based off of effectively communicating her brand attributes.
High Fidelity Prototype & Final Prototype
Incorporating visual elements in line with Siv Coaching’s branding, we worked on the UI design of the website and created high fidelity wireframes.
And finally, I’m happy to share with you our final prototype! Check it out here:
— Next Steps
For the next steps, we would like to dive in the user’s profile section and create a library where they can find all the courses they purchased, their favorites, their wishlist etc.
We would like to design a new feature, like a progress bar, so the user can see where they’re at in the course and keep their focus and motivation.
Finally, we would love to add a “book a live fitness session with your coach” for those who are in the same area as Siv Coaching.
— Key Learnings
Those two weeks were very challenging. It took me a little bit more time than usual to find my place in the team. But we managed to communicate with each other with respect and understanding and ended up working really well together, despite the very fast pace.
It was also my first time working with a client and I realized how crucial the very first steps of the project are. Understanding the current needs and goals of the business is mandatory and the market research phase is a step that should not be neglected.
But thankfully, even in times of doubt, we were still able to move further and rely on the process.
Thank you for reading!
