Case Study | Improving Checkout Flow

Jett Cycling

Improving a cycling website’s e-commerce experience

Jett is a cycling brand that sells bikes online. Lately, people aren’t purchasing their bikes and leave their website even after adding items into their cart

These factors made the band recognize that they needed to revamp their existing site and checkout process.

Project Overview

My Role

Product Designer | UI/UX Designer

Tools

Timeline

90 hours

The product manager came up with possible solutions: add a product comparison tool and a guest checkout option

My next step was learn what the competition has done to solve these issues and understand cyclist expectations from a bike website.

The above image shows the website’s original wireframes

I Interviewed 4 individuals to gather behavioral insights on the process of choosing a brand and a bike

Research & Planning

I compiled these insights into an affinity map.

Persona Building

Since appealing to a varied audience was important to those I interviewed, I created 3 personas: the avid cycler, the weekend warrior, and the commuter

I wanted the website to be able to reach this audience, so I avoided focusing on just one type of cyclist.

Competitor Analysis

I then looked to other brands to see how they successfully reached a broad audience, so I could take what worked and leave behind what didn’t

I focused on the following heuristics: help from documentation, consistency and standards, and aesthetic and minimalist design.

Bianchi/01

Sleek website with easy to navigate pages, but their comparison features are lacking

Colnago/02

More of an elitist bike site that offers road, gravel, “iconic,” and time trial bikes. Takeaway: present the component, spec, and geometry information in a clean way with explanations of their design. They, like other websites, don’t have high inventory on their website and expect the user to find a store.

Specialized/03

Provide a range of products for every type of cyclist. Allow for bikes to be customized based on what the rider needs.

Trek/04

Lets users take a test to get matched to a bike. Most inventory is out of stock, but connects the user to a dealer who has the bike they are looking for. Great product descriptions, specs, components of the bike. Appeals to a wide group of cyclists.

Reflection

I knew I wanted to structure my website similar to Trek and Specialized since both aimed their content at a similar group

The challenge then became merging all the aspects they did right, implementing the PM’s priorities, and weaving in my own ideas.

I wanted a clean and simple font for accessibility purposes, so I went with SF Pro

Brand Identity

I used the Relume library’s style guide as a template and tweaked it to satisfy my brand’s needs.

Taking inspiration from Bianchi’s website, I kept my color palette simple with a pop of color

I went with a dark background color (rich black FOGRA 39) to make the products bounce off the page.

The other colors (steel teal and magic mint) were used to invoke trust, excitement, and fun. They also contrasted nicely with the dark background without being too bright and overbearing.

When it came to designing the font for the company, I used Adobe illustrator

I continued to play around with the style of the lettering until it looked how I envisioned. The end result looked modern and fun.

I then moved on to designing the logo. I wanted it to resemble a rocket jet, so cyclists thought of speed when they thought of the brand

I started out on a post-it note and jotted down some ideas. I simplified the idea until I got an abstract shape of a jet, which became the final logo design.

Style Guide

Color Psychology

Logo Font

Logo design

Designing the Solution

I wanted to visualize all the pages the site would offer, so I drew up a quick site map

I didn’t plan on designing a user flow for each of the various paths, but needed to understand the entire scope of the website before diving into identifying the path I would test

To keep within the 90 hour project limit and the PM’s design implementations, I made a user flow on the path someone would take to find a road bike

This step helped narrow my focus on what to design, so the screens I did end up doing I could ensure were done well.

See the user flow here

I then started to formulate how each page should look. So, I went back to some competitor screenshots I took during my analysis and made notes on the layout

I didn’t want to deviate too much from standards, so I could ensure I was meeting user expectations.

There were many differences among competitor homepage and navigation menu layouts, so I sketched how I would want to do it

At this point, the sketches and competitor references helped speed up the wireframing process.

Using the Relume library kit, I made wireframes of my website pages

These screens became the ones I would later conduct my first test on.

Site Map

User Flow

Competitor Screenshots

Sketches

Wireframes

Testing and Final Solution

For my first test, I wanted to make sure that everything on the website was intuitively placed. This test had 5 participants

I was happy that I added in some copy and made my designs more high fidelity because it kept my testers focused on the task instead of the UI.

Using Maze, I tracked user’s clicks on the screen with heat maps. The heat maps helped me identify my problem screens by showing all the different places users clicked.

The above image shows the major problem screens: homepage, product page, and purchase page

After my first test, I tweaked the copy and spacing issues and made my screens high fidelity

I wanted my website to look and feel like a real site, so I utilized photoshop to edit bikes to say the Jett name.

Test 1

High-Fidelity Screens

This image shows the alternate path I included based off of the high number of clicks on “view all bikes” during the first test

I then tested my paths again with a total of 7 users

I was able to identify that the new paths I made weren’t as common to click on as the first test led me to believe. (the above image is an example of one of those new paths I created.

The above image shows the heat map for the first task to “view all road bikes.” Users had little issue getting through this task

Test 2

Final Screens

Once again, the changes made to the screens were subtle

For the performance road bike page, I changed the copy to include a tagline for level of rider above the bike family name

This edit aimed to help those starting out in cycling to help eliminate the guesswork of what bike would be best for their level.

During the test, users selected the image rather than click “view bike.” To urge them to select “view bike,” I made the selections into cards

In hopes of eliminating any frustration around items not responding, this edit, I hoped, made the clickable feature more obvious.

The purchase button needed adjusting a final time to make it above the fold

Checkout the prototype here

How I could improve

Concluding Thoughts

Being the only designer and UX researcher for the project with a 90 hour time limit, I felt like my research phase was rushed.

If I could spend more time on this project I would’ve conducted more user interviews to identify any other variables the PM didn’t catch and work to implement those in the design.

Lessons learned and other thoughts

Photoshop isn’t rocket science–at least when it comes to removing brand labels

I had sparingly used photoshop prior to this project, so Iw as elated when I discovered how simple and fast removing logos and replacing it with my own was. That discovery was a tiny win for me.

Stay in your lane

I have a tendency to want to go above and beyond for projects, fall down rabbit holes and get lost, and spin my wheels. Since I had a 90 hour time limit, I was able to stay on task and design for only the most essential route that implemented the PM’s suggestions.

Draw the line

There comes a moment in every design that I’ve done where my mind wants more. More screens, more images, more routes, more, more, more. This project helped me realize that noticing ways to improve is great, but you don’t need to act on immediately. Stick to your MVP and complete the job are the major priorities