A Better Bike Mobile Web E-commerce Redesign
ux design | prototyping | usability testing
Role: UX Researcher, Designer and Usability Tester
Duration: 3 months
Tools: Competitive Research, Figma design and prototyping, Usability Interviews
The Challenge
I was given the opportunity to revamp the mobile-web shopping experience for ABetterBike.com.
The goal was to improve the conversion rate from browse to completion of checkout to increase revenue on the product’s mobile-web experience.
My project manager shared data that showed 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. My PM’s hypothesis is that users are unable to determine which bike is best based on relative features. I would have to come up with some way for users to compare products quicker and easier. Additionally, 70% of users who placed an item in the cart did not purchase. Data showed that users abandoned the cart at the registration page. At the beginning of the project users had to make an account to purchase. My PM wanted me to design a guest checkout to solve for this.
Discover
Competitor Research
I started out by researching some of our competitors to see how their mobile websites worked. I analysed the browsing to checkout flows at Target, Amazon and TrekBikes.com. Only Trekbikes offered the functionality to compare multiple products of the user’s choosing. Amazon offered product comparisons, but only comparisons curated by Amazon. I knew the PM wanted a better way for users to compare products without opening multiple pages, getting frustrated and abandoning the whole shopping experience. So I tried to think of more places I could find to see who does product comparison the best. I finally realized electronics and appliance stores were great at this so I did some analysis of Best Buy and Abt electronics along with Trekbikes.
• Both offered a long vertical list of products with a checkbox you can click to add to your list of products you will compare. Then there was a pop up at the bottom which shows the products you have added, with a thumbnail photo and an x button if you want to remove it.
• Best Buy allowed up to 8 items to compare and Abt only allowed 4. I wasn't sure how many bikes a serious biker would want to compare but I’m guessing they would choose as many as possible.
• Best Buy seemed to show the most important specs at first and had a button if the user would like to open more specs. Abt listed everything by default and the page was very long. They both only offered an add to cart button at the top.
• Best Buy offered a toggle to highlight the differences that would potentially be helpful to shoppers.
Design
After the research phase I began designing. I created a user flow so I could refer back to it and always understand the layout of the website. The three main parts of the user experience would be the item search, item comparison and finally item purchase.
.jpg)
Item Search
I was given wireframes of the existing site to start from. As you can see from the existing wireframe on the left, I kept the existing patterns and condensed them for mobile-web experience. I then crafted the layout of the browse page for each category of bicycle.
Item Comparison
The first main problem I had to solve was how to eliminate the user from opening so many item pages, getting frustrated and abandoning their purchase all together. From my competitor research I put together the wireframes for how the item comparisons would work.
When building the prototype for the first round of user testing, I wanted to see which way users preferred to rearrange the order of the columns. One task in the usability test was to compare bikes 1 and 8 next to each other. I included three options for rearranging, the user could click the switch button and choose which column to send to from the drop down menu. The user could click and hold the switch button to drag the column. Lastly, the user could simply delete the middle two columns so that they were only left with bikes 1 and 8.
Item Purchase
The PM suggested I implement a guest checkout process so the user has an option to sign in if they have an account or continue as a guest. The PM laid out a requirement that guest checkout had to capture email, which is on the top of the third image. The user has a chance to add a password and create an account if they changed their mind. The bottom row shows the input pages for the shipping address, payment details and finally a confirmation of purchase page.
Validate
I was able to test my initial wireframe prototype with five users. I discovered a few things to work on before I created my high fidelity designs next.
• Multiple people had trouble with the checkboxes. They either could not see them or they expected to be able to click them by clicking the text next to them.
• Multiples users mentioned they would have liked a drag and drop feature to reorganize the columns during comparison. I would need to find a way to give more affordance to that functionality, as it already did exist.
• I could notice people were confused by the drop-down menu of the switch button. It was hard for people to think about where they wanted to send the column.
• A few of the users chose to just delete the middle columns with the 'X' button.
High Fidelity Designs
A Better Bike is an expert in the field who is always knowledgeable about the very latest trends and best products related to biking. They describe their brand with the attributes savvy, focused, serious and dependable. I found a UI kit I would use for the final designs. I chose “Neu UI Kit” because it had a clean modern look to match the brands attributes. I chose a blue palette because blue represents security, trust, loyalty, stability and confidence
After testing I was able to create my high fidelity mockups, incorporating my chosen UI kit and color palette.
From testing, one of the first elements I corrected was the checkboxes. I did more research and noticed that most websites put the check boxes on the left side of the text. I also made the text clickable since a few users tried to click there instead of inside the box. Using the blue color from my palette also increased the contrast and made them more noticeable compared to wireframes.
From testing, I was able to conclude that the dropdown menu of the switch button was not working. Users were confused by how to use it and expressed that they would rather drag and drop. I added the dotted border and the message 'drag to move' on clicking of the switch button. This created more affordance of the drag to move functionality.
After creating my high fidelity designs, I made a second prototype to test the iterations. Users had no issues with the tasks. The only iteration I made after round two of testing was to add the modal for when an item was added to the cart. Previously the only notification of the bike being successfully added to the cart was the number badge on the cart in the upper right corner. Now the user would receive a pop-up that confirmed the item was placed in the cart. The user can clear the pop-up, proceed to their cart, or continue shopping.
The Prototype
Results
In the absence of being able to actually test the performance of the website before and after the redesign, I believe this redesign of the Abetterbike.com mobile website will increase conversions and create plenty of repeat customers for A Better Bike. Savvy bike enthusiasts will enjoy the ability to compare bikes side-by-side and there will be a lot fewer abandoned shopping carts! If I had more time to complete this project, I would also like to do more extensive design of the specification and review sections of each bike listing.
%201.png){kind=small}
