Velox Bike E-commerce
Velox is a redesign mobile website project that aims to enhance browsing and checkout experience to greatly improve product’s usability
Role Tools Project Type
UX Research Figma E-commerce
UX Design Miro
UI Design
50%
70%
Problem
of users open on average 7 items and then abandon the site without moving any items into the cart
of users who place an item in the cart do not purchase
Important insights
The company believes that the customers abandon the site because they are not able to find the right bike based on relative features
.Data also shows that the customers abandon the site at registration page, where they are required to sign up, as guest checkout is not available
Solution
1.Conversion
Create an easy browsing experience for the users, by integrating personalized search, expert’s help and enhanced filters to help find a bike for every visitor on the website.
2. Customer retention
Add features that will prevent users from abandoning the site, by adding guest checkout and comparing features, that will make the user’s experience smooth and easy.
2.
3.
1.
2.
1. Empathize
Features
1.
1.1 Problem Overview
Achieving success in e-commerce revolves around effective conversion. The primary objective for any thriving e-commerce business is to ensure that every visitor not only explores the website but also completes the journey from browsing to making a purchase. Velox aims to achieve this goal by redesigning their browse to checkout experience to increase product usability and revenue.
1.2 Secondary Research - Industry Leaders
To dive deeper into the problem,, I decided to see how the industry experts have approached the same problem and achieved the same business goal. The companies that I studied were:
While doing my research, I took notes of all the approaches that worked well for them and could work for Velox too.
Key Takeaways
1.3 Competitive analysis
I have also conducted a competitive analysis among four highly rated e-commerce bike websites. This competitive analysis compares all the features that create a good experience for all the e-commerce bike users. Compare, quiz, chat, customization, filters and reviews help the user choose the right bike based on relative features and increase conversion on the website. Guest checkout prevents the user from abandoning the website and checking out as a guest.
I have also noticed that none of the e-commerce websites have all the features. They miss at least one feature.
2. Define
2.1 Research synthesis
After I have learned all about the problem, I wanted to understand and empathize with the user to understand their needs. To do so I have created an Empathy map and Persona that shows what the user thinks and feels about the problem.
2.2 Understanding the user
Empathy Map
Persona
2.3 Problem statement
Based on research, these are the two problems that need to be solved.
3. Ideate
1.
2.
3.1 Brainstorm
After I learned more about the problem, it was time to find possible solutions. I started brainstorming on “How might we?” questions.
3.2 User Flow
After conducting the research and brainstorming possible solutions, I mapped a flow that shows how the user will achieve their goals.
1. Choosing a bike
2. Checkout process
4. Design
4.1 Wireframes
Once I identified the user flow, it was time to create the wireframes based on all the research and user understanding.
Wireframe screens
Main features
1.Quiz & Expert help
The website has a short quiz, for all the users that want an easy way to find a match for their bike needs. The questions help create a shortlist of bikes based on the user's answers.
2.Bike comparison
This feature lets the user compare any 4 bikes side to side. It lets them compare all the aspects of the bikes next to each other, helping the user to make a choice based on relative features.
3.Guest checkout
This feature lets the user skip the registration page and checkout as a guest. It saves time for the users and makes their experience more pleasant.
4.2 Usability Testing
To validate my initial designs and usability of the website, I conducted 5 remote usability testing for the low fidelity wireframes . I have asked the users to complete series of tasks and see if they run into any usability issues
Tasks
Browse homepage
Find the right bike
Compare 2 bikes
Customize your bike
Checkout
Low Fidelity Usability Testing - Findings
Compare feature
While adding bikes to the compare page, the tab was not visible for the users, 3 out of 5 users suggested adding the picture of the bike that gets added to the compare page.
Filters
2 out of 5 Users suggested adding Filter and Sort features in case there are more than 3 options.
Homepage
2 out of 5 suggested having pictures for each category with a “View more” button.
4.3 Visual Design
Moodboard
Style Guide
4.4 UI screens
4.5 Hi-Fi Usability Testing
After conducting low fidelity usability testing and collecting all the feedback from the user, I have made all the needed iterations. Now it was time to test the Hi-Fi mockups. I have conducted another round of usability testing with 5 more users.
Hi-Fi Usability Testing Findings
Customize feature
4 out of 5 users did not notice the “Customize button” and were unfamiliar with that feature. Suggested to change it to a button and put it together with other features in the customize section
Iconography
5 out of 5 Users did not expect the plus sign to be a compare feature. Some thought it was for adding pictures. I changed the icon to a "compare" icon, to not confuse the user
5. Prototype
6. Lessons learned
3.
Dark UI
I learned how to design a dark UI. Choosing colors for dark UI is a bit more challenging than it is for lighter UI. Choosing colors that not only look visually appealing but also convey hierarchy, emphasis, and interactivity.
Standard iconography
I have learned that it is better to use standard icons, as they are widely recognized and understood by users across different platforms and applications. Standard icons contribute to accessibility, efficiency and consistency.
Competitive Research
I have learned that it is crucial to research about industry leaders and competitors to understand the user's expectations and identify any gaps and opportunities that the product can capitalize on. Learning from competitor success and failures helps avoid mistakes.