Background
This project was a 90-hour challenge, to improve a fictional E-Commerce mobile-web’s conversion rate. The product manager has revealed that on average 50% of our users would abandon the cart due to uncertainty of choosing a bike. Also, the data revealed 70% of the users abandon the cart at the registration page. Based on these information, I have been tasked to design a solution to improve the browsing and checkout flow.
My Role
I have been responsible for designing end-to-end design process such as conducting research, user interviews, wireframing, low and high fidelity prototypes, and usability testing.
Timeline
12 Days
Links
Project Plan
In order to finish this project within a deadline, I have created a project plan to guide me. As a result, I was able to define the brand identity, conduct and synthesize my research, create both low- and high-fidelity designs, and run usability tests.
Challenges
Having a stronger understanding of the project, I have assessed that there are 3 major challenges that I will encounter:
- How to create a brand identity and style guide with the use of only the project brief?
- How can I design a solution to help the customer’s experience a more frictionless checkout process?
- How can I help customers get the perfect bike they want or need?
Research & Discovery
Research Goal
The research objective is to identify the potential solutions to increase conversion of bike sales. The 3 questions at the end of the research I should be able to answer are:
- What are the demotivating factors that prevent users from purchasing a bike?
- Why are people not comfortable signing up for the website?
- How do people decide on which bike they want to purchase?
Research Process
I have reached out to 4 individuals from my personal network that fits the participant’s criteria that the company was looking for. The participants must fit inside these criteria:
- 24 – 38 Years Old
- The user base is 72% men
- Individuals tend to be in the higher income bracket
- They take biking very seriously. They will spend a lot of money on this investment so are very picky and do their research
Interview Takeaway
- A few factors why the participants are not likely to purchase a bike because of the high cost of purchasing a bike, not sure what bike is best suited for them, or not being able to trust the brand.
- Customers hate having to create accounts for a new store since it requires them to manage multiple accounts on their end.
- The participants have mentioned that when searching for a new bike they would go ask their friends or local bike shops for recommendations and even use other online channels such as YouTube or Bike Forums.
Competitive Analysis
Understanding market leaders on how they solve problems of similar products has helped me define what creative solutions could be implemented and improved for our extension.
Empathy Mapping
Based on the collected data, I was able to construct an empathy map to better understand how our user might be.
Persona
From the empathy map, I established a user persona to have a clear representation of who I am designing the solution for and to guide our design decisions.
Challenge #1
Challenge) For my first challenge, I have been tasked to create a brand identity and a style guide while only being provided the target user group information, brand personality, and business goals.
Solution) I researched and created a brand identity and style guide by observing and drawing inspiration from other market leaders such as Trek Bikes, Giant, Amazon, and Target.
Challenge #2
Challenge) For the next challenge, I had to design a solution to create a more frictionless checkout process for our users like Josh.
Solution) Looking at the project brief, I have realized that the current website does not offer a guest checkout. Based on my research forcing users to register before completing the purchase leads can decrease conversion (Estimate of 35% of abandon cart rate).
Challenge #3
Challenge) For the last challenge, I had to design a solution to help customers get matched with their perfect bike.
Solution) In order to tackle this challenge, I would propose creating a recommendation feature to help narrow down the choices of bikes.
Interaction Design
User Flow
I have created a user flow that highlights the critical paths a user would have to take in order to achieve a specific task.
Low-Fidelity Designs
Interaction Design
Brand Definition & Style Guide
I have created a user flow that highlights the critical paths a user would have to take in order to achieve a specific task.I have created a brand document and style guide to aid me while I create the high-fidelity designs.
Brand Definition & Style Guide
Test
Usability Test (Round 1)
After finishing up the high-fidelity designs, now it was time for one of the most crucial part, which was usability testing. The 2 features I have tested is the guest checkout and recommendation. I was hoping to discover areas for improvements in the usability for both features.
Usability Test Results
Guest Checkout
All the participants were able to go through the checkout process smoothly and felt that there was no friction doing so.
“The guest checkout seemed like a simple process it follows the same standards of other guest checkouts I experienced before”
Recommendation Feature
The participants had a difficult time trying to locate the recommendation feature.
“I don’t know the difference between the collection page and recommendation page, and it feels a little overwhelming with the amount of choices”
Design Changes
Based on the results of the usability test, I have made design changes in order to combat the friction the participants have gone through when doing their tasks.
Design Changes #1
Call to action button change
During the test phase, the participants had a difficult time finding the recommendation feature. Also, based on the project brief it was crucial to help Josh find his perfect bike. So I have replaced the call to action to make it easier for Josh to locate it.
Design Changes #2
Product Highlight
By being able to feature or highlight one bike at a time, it can help Josh to be less overwhelmed by the different options he has.
Design Changes #3
Add to Cart Position Change
By being able to change the position of the “Add to Cart” it will help Josh reach to the call to action button easier than before
Design Changes #4
Reduced Purchase Steps
By reducing the checkout screen for guests, it provide less friction for Josh, allowing him to have a quicker and smoother experience for the checkout process.
Usability Test (Round 2)
After implementing the design changes, I have decided to conduct a second usability test to ensure that the changes make an impact on the product’s usability.
Usability Test Results
Guest Checkout
All the participants were able to go through the checkout process smoothly and felt that there was no friction doing so.
Recommendation Feature
All the participants were able to easily identify where the recommendation feature were. Also, did not feel overwhelmed by the bike choices they were recommended.
Retrospective
Create functionalities that achieve business metrics while being empathetic with users.
- Initially working on this project, I have thought creating a lot of functionality will increase the conversion rate of the store. However, I have soon learned that was not the case and instead it can cause more friction and discomfort for users. Because of this, I have prioritized features that I understood would be delighters or a need for users.
Don’t always imitate the market leaders
* It’s a great idea to look at market leaders for inspiration on how to solve problems but not great for copying design. Just because a company is successful does not mean that it will work for everyone.