the company.
Peak Ridge is an e-commerce cycling lifestyle brand that sells high end bikes and accessories to well researched, savvy customers. The company is looking to enhance their checkout and browsing experience to improve the site’s usability.
introduction.
As a designer on this project, it consisted of user research, quantitative competitive research, to get an understanding of the high-end cycling e-commerce space, sketching, UI design, developing the personality and brand structure, user flows, designing wireframes, a working prototype and completion of two rounds of usability testing.
tools.
the problem.
Peak Ridge is looking to enhance their browsing and checkout experience since data shows that 50% of users open an average of 7 item pages and then abandon the site without moving any items to the cart, possibly because they are unable to determine which bike is best, based on relative features. Additionally, 70% of users who place an item in the cart do not purchase, abandoning the cart at the registration page. Creating a guest checkout that captures the users email can help solve this.
the solution.
Giving cyclists a way to easily checkout as a guest and not have to log in when making a purchase was a top feature. It was also important to make the checkout experience more streamlined so that users didn't have so many pages to open before purchasing. The outcome is a clean, masculine and functional site that lets users create compare bikes and checkout easily.
process & methods.
research.
competitor sites.
Understanding industry leaders and how they solve problems to achieve similar business goals helped me to lay the foundation of my design process. I researched 3 e-commerce websites that sell bikes, Amazon, Target & Trek. Two of companies are not direct competitors but have a big e-commerce footprint, the third site is Trek which is a direct competitor. I approached all three user experiences as a new shopper, walking through all the checkout and bike comparison flows.
insights.
jobs to be done.
Job- Streamline checkout
Related Job- Add “compare bikes” feature & a guest sign in option
Functional - Make it easy to purchase
Emotional - Finding a bike that you love
Personal- Getting a bike so that you can be healthy
Social- A bike for marathons, and riding with friends
user stories.
Based on the data, the user was frustrated with the checkout process, wants a compare bike feature and doesn’t want to give up a lot of personal information in order to make a purchase. Having empathy and listening to the users helped to determine the MVP’s and important red routes to focus on.
persona.
Meet Jason Webber, a savvy, focused, dependable and serious cyclist. He is an expert in the field who is always knowledgeable about the latest trends and best products related to biking. He takes biking seriously, is picky and will do a lot of research before he makes a purchase, he has no problem spending a lot of money on this investment.
user flow.
This user flow is focused on browsing and checking out, these areas are where users are not staying engaged and thus, abandoning their cart. A guest checkout option was added to make it easier for users that did not feel comfortable inputting all of their information into the site to make a purchase.
sketches.
Based on the MVP’s and the users stories my goal was to sketch the essential screens needed to streamline checkout, but first I needed to determine the layout of the website including showing all bike categories, product detail pages and filtering options. I researched many competitive bike sites to see how they showcase their bikes including all of the details.
wire-frames.
Starting with the homepage, I created low fidelity wireframes in Figma, the focus was to create consistent screens that featured the four bike categories- mountain, electric, road and city bikes. It was important to leave space for images that would set the mood for the users to feel engaged, to keep shopping. Including all of the details of the bikes was very important as cyclists are very knowledgable and will compare stats.
ui design.
inspiration.
I researched high end bike companies such as Cannondale, Specialized and Campagnolo to see how they marketed and branded their products and web-site. They all had a similar look, feel and color scheme, using minimal colors focusing mostly on black, grays and a single pop of a bright color. The photography conveyed speed and the love of being outside.
branding.
I named the site, Peak Ridge, as it seems fitting to a cyclists journey, on the edge of a ridge, at peak performance. I focused on Jason Webber, and the traits from the persona when choosing fonts, colors and images. I wanted the branding to feel high end, daring and cool, targeting the athletic, male customer.
color & typography.
Exploring the theme that I saw on numerous high end bike sites, I decided to work within that trend, a simple palette of grey to black, a pop of bright color, easy to read, san serif fonts over action images. I choose Montserret and Ubuntu.
ui components.
I referenced UI Kits for design elements, and found some good components within the Figma Community and some on-line sites. I landed on rounded buttons with impactful, bold fonts, for CTA. Green accents were added to icons, buttons and lines to divide up segment areas.
prototype.
The prototype is a working, clickable site that users can navigate through for basic functions. It was developed to test only a few flows for insights about checkout, and comparetive layouts. It was made in Figma, and includes drop down menus, animated buttons and scrolling screens.
testing.
usability test. high fidelity
Tests were completed with 5 male participants within the target age range of 24 - 38 years old. All participants have knowledge of bikes and had purchased a bike in the past, and are on-line e-commerce shoppers. The first round of tests were performed virtually through video chat, participants were asked to share their screen and think out loud while navigating the website and completing certain tasks within the prototype. The goal was to see how intuitive the, compare feature and guest checkout, performed.
insights.
-
The header icons were to small, it is hard to read the font
-
Users were confused by the bike comparison feature, clarity is need on how it works
-
The guest checkout screen was to scarce compared to the other screens
-
Users liked the overall look of the site and felt it had a lot of information on bike features
-
Users were confused about the "pickup" bike option, more explanation is needed
final product.
learnings.
Using what I learned from the competitive research and the data from the usability tests, I discovered that selling bikes on a website is very difficult, because it is a high end purchase, the information has to be very detailed and there has to be many ways to compare all of the features / specs from one bike to another. Since users can’t actually touch or test ride the product they need to see the product in many views and shown in videos.
next steps.
Drawing on the experience of improving Peak Ridge’s website, I believe it is important to continue exploring different ways to guide shoppers through their bicycle research and selection process to provide more value to consumers. I would focus on more ways to showcase the bikes, because it is such an expensive purchase all details need to be shown to fully educate the user, including showing mock-ups of customized bikes, 3D views, videos, etc…to make the user feel as if they understand the product.