BIKE SHOP / E-COMMERCE
VeloCyclo
Figma | Adobe XD
INTRODUCTION
VeloCyclo is a bike shop located in Montreal, Canada. They have been open for 30 years and have become experts in the cycling industry. Although they are well-known among cyclists in their neighborhood, they would like to increase revenue on their mobile app by improving the conversion from browse to completion of checkout.
PROBLEM
50% of VeloCyclo users open on average 7 item pages and then abandon the site without moving any items into the cart. They are likely unable to determine which bike is best based on relative features.
​
70% of VeloCyclo users who place an item in the cart do not purchase. Data shows that users abandon the cart at the registration page. Users must make an account to purchase.
For this Springboard project, I played the role of UX Researcher, Information Architect and UX/UI Designer. I was given a total of 90 hours to work on this project. I had to select methods that were most appropriate and efficient in order to find a solution to the problem within the constrained timeframe.
PROGRAMS USED
MY ROLE
SOLUTION
Design a product comparison feature to enable users to compare different bikes side-by-side.
​
Design a guest checkout with the user’s email address in order to speed up the checkout process.
TARGET USER
24-38 years old
User base is 72% men
High income earners
Take biking very seriously and spend a lot of money on this investment. They are picky and do their research.
STUDY OF INDUSTRY LEADERS
To begin my research, I did a Study of Industry Leaders to get a better understanding of how other mobile
e-commerce companies selling bikes handle problems similar to those of VeloCyclo. I looked at Amazon, Target and TrekBikes and identified what I liked and disliked, as well as action items to apply to my design.
Action Items
-
Enable users to review products. Reading product reviews is a big part of how customers shop, especially for expensive items (such as bikes).
​
-
Display stock and shipping details to ensure customers have this information immediately upon viewing the item. Inform the customer of all possible pick-up and shipping options.
-
Design a website that demonstrates an expertise in bikes, with the use of beautiful and functional photos and professional-looking descriptions and specifications.
-
Incorporate a product comparison feature to facilitate the selection process for customers and help them find the right product.
-
Include a guest checkout option to expedite the checkout process for new customers and thereby improve the conversion from browse to completion of checkout.
USER RESEARCH
For the next step of my research, I prepared a Screener Survey to determine the needs and paint points of customers who shop for bikes. 18 participants responded to the survey. This allowed me to quickly get the information I needed to start designing solutions. The responses to the survey successfully confirmed my solution hypothesis and helped answer my Research Questions.
How would you determine which bike is best for you?
Have you ever changed your mind about buying a product online because you couldn't purchase the product using guest checkout?
RESEARCH QUESTIONS
1. Do customers rely on reading product reviews when searching to buy a bike?
​
Yes, they rely on reading product reviews. In fact, 83.3% of participants responded that they would read product reviews to determine which bike is best for them.
​
2. Is it important for customers to be able to easily compare different bikes in order to decide which one is best, based on relative features?
Yes, comparing different bike models is important. 72.2% of participants responded that they would compare different bike models to determine if a bike is best for them.
3. How often do customers abandon the checkout process if they are forced to create an account to complete the purchase?
55.6% of participants have abandoned the checkout process if they had to create an account and weren’t able to checkout as guests.
USER FLOWS
To start visualizing the structure of VeloCyclo’s mobile app, I created a set of User Flows that represent the path taken by a new user who is interested in finding and purchasing a bike.
User Flows
LOW FIDELITY DESIGN: WIREFRAMES
Due to the project’s time constraints, I was unable to create both Sketches and Wireframes for VeloCyclo.
I chose to design Wireframes because it would allow me to test certain elements in more detail with my Low Fidelity Prototype. The Wireframes would also save me some time with the High Fidelity Designs because they would serve as a base structure for my High Fidelity Mockups. Here is a selection of wireframes.
Wireframes (selection)
LOW FIDELITY PROTOTYPE
While I created my Wireframes in Figma, I simultaneously started to work on the Low Fidelity Prototype. This allowed me to test my design decisions with the prototype’s interactions. This was a very fruitful method and it worked especially well with the time constraints of this project.
USER TESTING: LOW FIDELITY
I Guerilla Tested the VeloCyclo Low Fidelity Prototype remotely with 5 participants. My objective was to identify any usability issues and to determine if there were any areas of confusion.
It was useful to be able to test my Wireframes as a working prototype. The testing uncovered a few issues that needed to be addressed immediately, before proceeding to the design of the High Fidelity Mockups.
Issue 1: Comparison feature
There was some confusion with regards to the Add to compare button on the Search Results screen and the Compare icon on the Bottom Navigation tab. The scale symbol was not immediately clear to the participants and caused some hesitation. This needed to be reworked for the High Fidelity Mockups.
Issue 2: Back button
A few participants were unable to return to a previous screen because the Back Button had not been included on every screen. This needed to be adjusted to ensure that the users would be able to go back from any screen.
Issue 3: Remove icon
1 of the participants mentioned that the Remove icon on the Cart screen was too small. This needed to be changed to ensure that the users would be able to see the remove icon should they need it.
STYLE GUIDE AND BRAND PLATFORM
The VeloCyclo Logo, Color Palette, Typeface, UI Elements and Icons reflect a serious and dependable company with a professional mobile experience.
​
The Color Palette is restricted to a mix of black, grey and white neutrals with a hint of rust orange as its primary color. A turquoise accent color appears in situations that require particular attention from the user. The color of the Logo adjusts in relation to the background: black/orange Logo on light backgrounds and white/orange Logo on dark backgrounds. The rust orange color is consistently added to the UI Elements and Icons to show that they have been selected.
​
The San Francisco Pro Text Typeface is simple and easy to read.
White #FFFFFF
Light Gray #E5E5E5
Dark Gray #949494
Brand Personality
An expert in the field who is always knowledgeable about the very latest trends and best products related to biking.
Logo
Brand Attributes
Savvy
Focused
Serious
Dependable
Color Palette
Primary
Rust Orange #B2732F
Neutral
Black #000000
Dark Gray
#949494
Light Gray
#E5E5E5
White
#FFFFFF
Accent
Teal #168AA0
USER TESTING: HIGH FIDELITY
After putting together the VeloCyclo Style Guide, I designed my High Fidelity Mockups and Prototype, which I Tested Remotely with 5 participants from the target audience. All participants were between 24 and 38 years old. I tested the prototype with 4 men and 1 woman to reflect the ratio of the user base (72% men).
​
This round of User Testing demonstrated that the issues observed during the first round of testing, had now been mostly resolved. However, there was still some confusion with regards to the comparison feature and a few new issues.
Issue 1: Comparison feature
Participants were no longer confused about the Add to compare button, but there was some hesitation about what to do next in order to begin comparing the bikes. To resolve this issue, I needed to find a way to bring more visual focus to this next step.
Issue 2: Checkout screen
3 out of 5 participants noticed that the Checkout screen was missing the shipping fee and estimated delivery date. 1 of the participants mentioned that the Checkout screen was missing a field for the credit card’s security code. I needed to make some adjustments to ensure that nothing was missing from the Checkout screen.
Issue 3: Bike size guide
1 of the participants mentioned that there should be a size guide to help customers select the appropriate size of the bike. This was a good observation. I needed to add a size guide on the bike’s product page.
HIGH FIDELITY MOCKUPS
After reviewing the results of my 2nd round of User Testing, I made some final changes to the High Fidelity Mockups in order to resolve all outstanding issues. The following images are a selection of screens of my final High Fidelity Mockups.
High Fidelity Mockups (selection)
HIGH FIDELITY PROTOTYPE
Changes made to the final version of the High Fidelity Mockups are reflected in this prototype. My objective was to ensure that the visuals and interactions would seem as realistic as possible. I made the app bilingual (English and French), since VeloCyclo is based out of Montreal (a bilingual city). I added the Search and Menu as overlays. I designed a multitude of different versions of screens to ensure that all variables were accounted for.
Working on the VeloCyclo app has been a great learning opportunity and my first experience designing for
e-commerce. Selecting the right methodology from the onset was important to ensure the project stayed within the 90-hour timeframe. I initially hesitated between Screener surveys and User interviews for the research to conduct. I also hesitated between doing Sketches or Wireframes for my low fidelity design. Looking back, I think I made the right decisions about the methodology to use.
Of the two problems that were outlined at the beginning of the project, designing a guest checkout to speed up the checkout process was quite simple. The second problem, however, was much more complex. Designing a product comparison feature to enable users to compare different bikes side-by-side was not straightforward.
It took several iterations to reach an effective solution.
One of the main reasons this problem was so challenging to solve is because there is very little precedent for product comparison tools on mobile devices. And yet, due to the small size of the mobile screen, this type of feature is essential. On mobile devices it isn’t possible to compare different products by opening several windows side-by-side (like it would be on a desktop screen). Most online shopping is now done from mobile devices and the ability to compare items is crucial to our shopping experience.
The next step of this project would be to implement those solutions in VeloCyclo’s mobile app and determine if these changes will indeed solve the problem and improve the conversion from browse to completion of checkout.