LANCER
Lancer is an e-commerce store specializing in bikes, serving clients deeply committed to biking. Lancer is known for their expertise in the latest bicycle trends.
Data indicates that on average 50% of users open seven items pages without making any purchases due to difficulties identifying the best item based on the feature and lengthy checkout process.
This was a solo project in which I worked to streamline the checkout process and find a better way to showcase the distinctive bike features.
Users struggle to identify the best bike based on features leading to indecision.
Users on average open 7 item pages without making any purchases.
#PROBLEM
Users struggle to identify the best bike based on features, leading to indecision and a significant drop during the lengthy checkout process.
#DEFINEStreamline Lancer’s checkout process and improve the presentation of bike features for enhanced decision making.
#SOLUTIONHow might we enhance the user experience and encourage more informed purchases by showcasing the bike features in a browsing-friendly way.
#HMW 
Research started with looking at the direct competition
The analysis focused on three of the top leading bike sites. This research shows that users anticipate a certain standard of UX features and services when engaging with high-end products like bikes.
Direct competition offers several features to narrow down the bike search
Examining online stores such as Tesla and Peloton, which offer clear, side-by-side model comparisons accompanied by user-friendly visuals, highlights an opportunity for the e-commerce bike industry to elevate the visual aspect of their comparison tools.
Leaning more on visuals and side-by-side comparison can help Lancer stand out amongst the direct competition.
Keep the compare feature easy to scan and lean on visuals
Sketches aimed to give users a visual side-by-side with compare feature
Sketching out prototype to test on a small set of users
While the sketches helped get ideas on paper, they didn’t provide the user insight I had hoped
Users had mostly positive feedback and looking back, the testing didn’t provide much insight.
The main flaw was how high-level the sketches were. By default, sketches have less information and can help with the ideation process. However, when testing on users for such high-detail products, the sketches were not the right tool to gain user insight. Low-fidelity wireframes would probably have been a better option suited for this testing.
Building the prototype: Exploring different ways that users can review the comparison feature
Path A
Add to compare
OPTION A. ADD TO COMPARE LIST
Making it easy for users to compare bikes was essential when creating the user flow for this website. Option number one was for users to add a desired bike to their custom compare list.
Path B
Toggle to compare
OPTION B. BUILT-IN COMPARE FEATURE
The second option is a pre-existing list allowing users to easily edit and manage their selected items via a drop-down interchangeable list.
A/B testing and user testing gave insight to improve the compare feature
The goal with user testing was to test the usability of the overall website, product page and do A/B testing on the path to compare features.
A) Add to compare list. Do users like to look at the project page and then add to the compare list.
B) Default existing compare list. Do users prefer to toggle to a default compare list that they can edit.
Through usability testing, it was clear that users prefer path B.
Users showed both curiosity around bikes that were already displayed on the list and wanted to explore other models to the default list further.
This insight was helpful and provided some guidance on further developing the compare feature.
USERS PREFER PATH B, TOGGLE TO COMPARE.
Compare feature list too long and wordy
Issue 1 The compare list contains a lot of information, making it hard to scan
Resolve 1 added icons to break up the text and make it easier to skim and for users to easily find the specific feature they are looking for
Resolve 2 Added headers and used white space to group text into sections
Resolve 3 Additional layers of drop-down to make it easy to navigate between bike models
Observing users spending a long time reviewing the compare list, it was clear that the site was too condensed with information
Lacking progress indicator for payment process
Issue 1 Lack of progress indicator during the checkout process
Issue 2 No indicator if the field is filled out correctly
Resolve 1 Payment steps updated to give users a sense of what step is complete and what is still pending
Resolve 2 Green checkmark added and box shortened when the field is filled out
Resolve 3 Current step outlined with blue color
Several users were unsure if they had filled out the check-out steps correctly. Adding progress indicator for the steps will help with this.
Reflections
USER TESTING WITH SKETCHES
In hindsight, the first round of user testing with low-fidelity sketches did not provide as much feedback as expected. The user testing was conducted with candidates who had a great set of knowledge of bicycles, however, the low-fidelity sketches were designed to portray the layout and could not contain the number of details needed to understand different bike types.
Looking back, the low fidelity wire frames would have been more beneficial for this set of user testing. One of the questions I was looking to get answered is what kind of information is the most important to users when it comes to purchasing a bike. With such low-fidelity sketches, it was hard to get the right feedback during testing.