My Role
I was the sole UX/UI designer that worked on this project responsible for user research, wireframing, user interface design, prototyping and usability testing.
Problem
The challenge lies in the guest checkout process, where numerous users encounter an issue as they are required to create an account in order to proceed with that option.
Solution
Implement an optional account creation prompt allowing users the choice to create an account for future convenience. This will ensure a smoother initial checkout experience.
Competitive Analysis
I used Jakob Nielsen's 10 usability heuristics as the main foundation of my research for this project. This method helped me evaluate user experiences, and interfaces of industry leading digital products.
Findings
Match Between System and the Real World
TrekBikes
TrekBikes had a very simplistic design with a top navigation that is nicely organized. The navigation items are very easy to identify at first glance and the layout was similar to other industry standard designs.
Rad Power Bikes
The top navigation was over cluttered and not spaced out properly. The default state of the cart icon looked like a notification icon that usually lets the user know that they have an item in the cart.
Giant Bicycles
Similar to TrekBikes, this website has a very simple navigation bar that is easy to follow. The terminology that is used makes it very simple for a first time user on the site.
Recognition Rather Than Recall
TrekBikes
TrekBikes used a nice vertical layout of text fields while at the checkout screens. They also utilize a progress bar letting the user know how far they are in the checkout process.
Rad Power Bikes
Text fields are not vertically aligned while at the checkout screens. Vertically aligned text fields can enhance readability and improve the user experience by creating a clear and organized layout.
Giant Bicycles
Similar to Rad Powe Bikes, the website doesn't utilize vertical alignment for their checkout process.
User Control and Freedom
TrekBikes
The site offers a clear navigation structure allowing users to explore various bike categories easily. Trek's website allows users to customize certain bike features and find the nearest dealers for further assistance. This creates a sense of freedom for the user allowing them to choose the bike that best fits their needs.
Rad Power Bikes
Rad Power Bikes has a very simple navigation making the bike selection process very straightforward and easy to navigate. Users have the control to customizing electric bike configurations.
Giant Bicycles
Similar to TrekBIkes, this website gives the user control of specifications and preferences. The website's clear call-to-action features allow for a smooth journey throughout the site.
Wireframes
I started with low fidelity wireframes by using simple shapes and placeholders to outline the overall layout and structure of the website.
Low Fidelity Usability Tests
To test the overall function of the design, I conducted a round of low fidelity usability tests and gave the participants some tasks to follow.
Scenario 1: Comparing multiple bikes.
Scenario 2: Navigating to a specific bike category.
Scenario 3: Completing a purchase through a guest checkout flow.
Even though users were able to complete all the tasks, all the users wanted to see an add to cart feature in the bike comparison chart screen. The progress bar confused some users as well.
Bike Comparison Chart
Simplified Progress Bar
Usability Test Round 2
A second round of tests were conducted in high fidelity. I test users on the same tasks I did before with a few modifications to the design. Users were able to get through the flows without a problem.
Final Designs
Takeaways
This project really tested my design decisions and helped me gain a better understanding of my users. The guest checkout option provides users with a convenient and quicker way of progressing through the checkout process.
