Project: E-commerce Website
Roles: UX/UI Designer
Timeline: 2 Week Sprint
Client: Shazam Crossfit Gym
Overview: I decided to choose a Crossfit gym because nowadays is an interesting way to exercise and get quicker results than going to a conventional gym.
Goal: Design an e-commerce website that will allow users to book classes, make online payments and get appropriate information about Crossfit.
I based my research process on design thinking, which is a strategy that organizes thoughts through visual processing in order to know what the user's expectations are and to immerse them to know their habits, pains, and goals and identify opportunities creating great experiences.
As you can see, most of the competitors offer optional services ( yoga, militar training, personalized, etc. ) with an inexpensive value. This is how the blue ocean, that is about creating and capturing uncontested market space of the industry, is located where optional services and luxury meet.
Main Discoveries
After compiling all the information and extract user’s clear data, I was able to define my user persona: their habits, goals, and pains. Finally, I built my primary persona who is really into fitness and is trying to make a transition from conventional gyms to Crossfit gyms to archive better results.
The affinity map helped me to visualized and extract the best data from my research process. In this case, grouping was helpful to identify user's repeating patterns.
As you can see there are ups and downs and also some sensitive areas where the pain points are located. Here are the pain points and opportunities that I discovered over the all process.
Pains
- Not enough information
- Classpass make the process longer
- Not clear info about Crossfit benefits
- Memberships are confusing
Opportunities
-To educate users about Crossfit
-To create a quicker check out
-To create a booking calendar
HMW'S
. How might we can design a feature for booking classes?
. How might we can inform about Crossfit benefits?
.How might we can design clear information about memberships?
As you can see I used the Moscow Method to sort my feature ideas that the website should and must have. Thanks to that I recognized the feature I needed to add to the Crossfit website which was: Book a Class Calendar.
According to that , my MVP would be focused on the booking class experience improvement with a distinguished feature: a book calendar.
We believe that creating a book calendar interface that allow users to reserve classes will increase the number of assistants for each one.
In the low-fidelity stage, I drew some sketches of the new feature and then I conducted usability testing with 5 users. The obtained results were almost 90% bounce rate, people felt lost because the lacking of information and the absence of a clickable calendar. I decided to create my mid-fid with those changes in mind.
In the second one ( mid-fidelity ), I made all the relevant changes creating an additional screen for each class and also a pop-up clickable calendar. Contrary to the first exercise, 4 of 5 users were successfully done.
Finally, on the third and last one, hi-fidelity stage, I created the feature with new colors and shapes according to the new brand attributes . Here is the result, this is the final step of my process.