The Bike Lab
Role: UX Designer
Help a bike company to enhance their mobile-web experience as their business expands
Duration: 2 Months
Tool: Figma
Overview
“The Bike Lab” is a new rising company that specializes in bicycles and accessories. As their business expands, they need to enhance their mobile-web experience, aka the browsing and checkout process to greatly improve their product’s usability, in order to increase revenue.
Outcome
I worked as a UX Designer for this project. I was able to create a solution for them to help increase revenue at the end of the project. 100% of the users agreed that the revised website has a better performance, which promotes more sales.
Problem and Background
Product Managers shared: user data had shown that 50% of users open on average 7 items pages and then abandon the website without completing the checkout process. On top of that, 70% of the users added items to the cart but never completed checkout, and they abandoned the website at the registration page.
Based on the data, the hypothesis is that
-
Users have a hard time making a decision based on the relative features on the website.
-
Constraints like “must create an account to checkout” have prevented users from experiencing a smooth and easy checkout process.
Research
I decided to dive more into the problem and confirm the hypothesis. Understanding how users navigate through an e-commerce website is critical in this situation. Hence the method I chose was observation and notes taking, followed by a quick interview.
I recruited 5 volunteers from different places. Since the targeted audience is high income earners who will spend a lot of money to invest in their hobbies, I decided to ask the participants to order something they have always wanted, and it has to be expensive but affordable. Then I observed and recorded the browsing and checkout process while taking notes. Additionally, I asked more questions, including “what made you decide which one to purchase at the end?”; “what were you looking for when comparing between two items?”; “Does having a filter system help your online shopping experience?”, to further understand the reason for certain actions.
Synthesize Method
Later on I analyzed the notes collected from observation by using the affinity map method, and found some common themes. Results show:
-
Most users will go to retailers that they are already familiar with to shop, such as Amazon and BestBuy.
-
Constraints to complete checkout are mostly involved in logging into the website.
-
Most users don’t like using filters because they prefer seeing all available options, so they can compare among different items.
-
Biggest trigger to push a purchase is a good review and rating, a big sale, and the pressure from “only 1 left”.
Derived from the notes above, I came up with a few pain points considering the current design of the website:
-
Low brand loyalty due to plain UI design.
-
No alternative options were provided to customers during the checkout process which failed to create a smooth user journey.
-
Sales triggers used to stimulate purchasing, such as good reviews or discounts, are not visible on the website.
-
Current website doesn’t allow users to compare among different options which creates an inconvenient experience.
So how might we create a unique design with smooth user flow that will stimulate more purchasing, and leave a strong impression to increase brand loyalty?
User Flow
With the HMW question in mind, I started my design process. To clear my mind from different design ideas, I decided to make a user flow first.
A smooth user journey allows options and open-ended flows. I created 3 ways for users to complete the checkout – log-in, create an account or check out as a guest.
Lo-Fi
The user flow helped me to define all the tasks, and the layout of the webpage, so I made my Lo-Fi wireframes in Figma. I then tested it with 3 usability test participants.
The first usability test was conducted on my low fidelity sketches with 3 volunteers remotely. The goal of the test was to verify if there is anything confusing about the interface of the website.
Overall, I got positive feedback from all 3 participants about the interface and the buying flow. They shared that everything is straightforward and easy to follow. No elements were confusing. I also got some great suggestions to improve the user experience on the website. Two participants suggested adding more details to the cart page, including the color option, quantity, and size choices to the item so they can clarify before proceeding to checkout. On that same page, they also suggested leaving more white space in between each section. The UI looks too crammed together which makes it hard for users to find the information they need. One participant also suggested adding the “like” feature to the items so she can come back to the website and compare among her options.
Hi-Fi & Usability Test
With the feedback in mind, I tried to make my HiFi mockups that will tackle all the pain points and I received overall positive feedback from users.
Pain point #1: Low brand loyalty
Solution: Added more brand consistency and customer engagement
According to research, most users will choose retailers that are already familiar and trust to shop, which makes branding indispensable to measure business’s success. Therefore it is critical to choose the right color scheme and font.
My inspiration for this website is nature and experiencing the beauty of it, so I chose colors that are earthy and grounded to represent the active and outdoorsy characters of our bikes.
I also added “our story” of this brand to allow users to feel connected and included, which makes the brand more trustworthy and professional.
All usability test participants shared that they love the earthy tone of the website which makes them feel: “the website is very professional” and “this brand is specialized in bikes, I can trust them”.
Pain point #2: Lack of alternative checkout option
Solution: Added “Guest checkout” option
Research showed that 70% of the users abandoned the checkout process because they are too lazy to sign in or create an account, therefore adding “guest checkout” is necessary.
Putting the options right next to each other provides options to users and definitely makes the checkout process smoother because all participants chose the “guest checkout” option due to different reasons. Some users don’t want to give the website any of their information, and some shared that they don’t remember the password, and most of them think it is faster to use guest checkout.
Pain point #3: Lack of final sale triggers
Solution: Solution: Added “tags”, “good reviews”, and “Almost gone” to push for more sales
Many of us have purchased something because “the item was on sale”, “it was the last one”, or “everyone bragged about it!” The original website didn’t have these final sale triggers that push users to the last step. I added “best seller” and “on sale” tags to grab more attention; positive reviews to encourage users, and “almost gone” reminder to add a sense of urgency that will lead to more sales.
Users shared that all three elements are extremely helpful in their shopping experience. Especially when they see something that’s on sale and it is “almost gone”, it gives them pressure to secure the item.
Pain point #4: Unable to like and compare
Solution: Added familiar UI element “like” to allow more interaction
The previous website didn’t have any elements that allow users to compare the features among different options. Adding the “like” icon helps users to track and compare all the options they picked. It creates a more user centric buying flow by making the shopping experience more accessible.
Overall the feedback I received from the usability test was positive. A few participants mentioned that they would love us to include “search” in the navigation bar, because they prefer not to spend too much time going through all the pages to look for what they need. I reiterated my design and added the final screens below.
​
Link to my prototype: https://www.figma.com/proto/1I5g0LmfMKa57xRkkScbjB/Capstone-2-Hifi?page-id=0%3A1&node-id=105%3A356&starting-point-node-id=105%3A356&scaling=scale-down
Next Step
The final usability test showed that all users agreed the revised website offered a smoother user experience and fulfilled all of their shopping needs. For the next steps, I would continue testing on ways of improving the UX and UI of the website and making it more innovative but accessible to attract more loyal users.