Lancer
Solo Project
About
Lancer is an e-commerce store specializing in bikes, serving clients who are 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.
#PROBLEM
Users struggle to identify the best bike based on features leading to indecision.
Users on average open 7 item pages without making any purchases.
Users struggle to identify the best bike based on features, leading to indecision and a significant drop during the lengthy checkout process.
#DEFINE#HMWStreamline 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.
Research started by looking at the direct competition
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.
Sketches aimed to give users a visual side-by-side with compare feature
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
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 A
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.
Path B
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
Observing users spending a long time reviewing the compare list, it was clear that the site was too condensed with information
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
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
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.