A biking e-commerce website redesign and feature addition.

Cycology is a company that sells bikes to serious bicyclists on the web. An expert in the field who is always knowledgeable about the very latest trends and best products related to biking.

The client wanted us to improve conversion from browse to completion of checkout, help users determine which bike has the best features, and make a guest checkout.


4 Weeks




Lead UX Researcher, Lead UI Designer


Figma, Google Drive, Miro, Zoom

Based off what the client wanted and the research done, here is a peek at the solution:

Improve Conversion from Browse to Completion of Checkout

Online shoppers value a website's trustworthiness. Cycology assures their customers from the homepage that their money and purchases would be safe. There's also related press to show real people using the products.

Help Users Determine Which Bike has the Best Features

It's human nature to want to do some research before purchasing something of great value, and it's always convenient to be able to compare items directly side by side.

Make a Guest Checkout

Guest checkouts make it easier for users to purchase. Research found that being forced to make an account can cause a user to leave without completing checkout.


Research Interviews

What makes people go from browsing to purchasing?

I focused my research interviews on how people liked to shop online. After I completed my interviews, I sorted through key comments during the interview. I was able to find three big categories: website features that they appreciated, how they would research for purchases, and why they enjoyed shopping online instead of in person.

User PErsonas

Who are we trying to sell to? People who want to bike.

With some general ideas of what I needed to focus on for my website redesign in mind, I wanted to make sure that I truly encompassed all the things that my interviews had pointed out to me. I created two different user personas: Beginner Biker Daisy and Experienced Biker Edward.


User Flow

Figuring out the path most taken by users.

I made a diagram of what I thought the most used user path would be in order to narrow down the main pages to focus on designing.

Sketches & Wireframes

From drawing to Figma, keeping the first drafts simple.

I wanted the bikes to be the main focus of the website and I wanted to make sure that the user would be able to really immerse themselves into learning about the bike.

As I began my wireframes, I wanted to keep up with design standards and decided to utilize the mobile first design strategy in order to make a better mobile experience even though my main focus would be on the desktop version.

Style Guide

Design speaks to people and Cycology wanted to display trust in their website.

Color Palette

The color palette chosen for this website design was focused on the brand attributes given: savvy, focused, serious, and dependable. The blues and greens chosen were because they are more natural colors found in nature which gives off a more reliable feel to the website.


Noto Sans was chosen for the bulk of the website due to its readability. And Rufina was chosen with the idea in mind that our main user base would be those like "Experienced Biker Edward", I wanted a more elegant font to match the more serious buyers.


Usability TEsting

Users liked that the website felt familiar and professional.

I did two rounds of usability testing and received a lot of good comments, some even saying that my wireframes looked nice enough to be an actual website with how everything was so nicely laid out and how smoothly the process was from browsing to order confirmation. A lot of users commented that the process and features encompassed everything that they were used to on other websites.

Issue 1: Compare Page

A lot of my users noted that they appreciated the compare option and they liked being able to compare specific bikes. As users explored the compare option, they either had to be guided on how to access the compare page or they questioned the limitations and the details of the compare page. 

This led me to focus on how I wanted to more clearly show the compare button in my high fidelity design, how many bikes I wanted for users to have the ability to compare at once, and how to best organize more details on the comparison page while still keeping the design clean.

Issue 2: Shopping Cart Icons

In order to make the icon more simple and clean, I changed the cart button from having the word cart to using just a cart icon and used a color bubble in the corner to indicate that the cart had items. I also added a popup for the "Add to Cart" process for a better user experience.

Issue 3: Top 3 Page

The terminology for this page was confusing throughout the testing process, so I changed the wording and added extra tags for easier understanding.

Iterated Design

Cycology: Your expert in all things biking.

Final Thoughts

Next Steps

There are more features to add to the design.

Project takeaway

I've learned so much from this project.

The Complexity of a Website

My previous projects had been more app focused, so this was my first time really working on designing a website with several working parts. For an app, there are only so many things that you have to think about connecting, for a website, there are many multiple intricate paths that can lead users to the same result. The most important task as a UX designer is to highlight the easiest path in order for users to more easily navigate the website.

E-Commerce Troubles

This was my first time designing anything related to E-commerce. With that being said, it was a new challenge to build a checkout process, especially one that was able to gather all the information needed, that was easy to complete, and that was nice to look at. I also struggled with learning how to balance displaying individual products as well as multiple products.

Mobile First Design Strategy

Due to this being my first time building a desktop website, it was my first time really utilizing the idea of designing the mobile version first. Although it was tricky to have to size some of the things accordingly from mobile to desktop to mobile again, I definitely saw the benefit in being able to design mobile first. By working on my mobile designs, I was able to figure out a lot of different ways to position things for my desktop website. I definitely was able to see the benefit in designing mobile first.

More Projects

Website Redesign
Brian BLack Tea
See More →
APP Redesign
See More →
Additional Work
All Projects
See More →

Let's Connect!

If you like what you see and want to work together, get in touch!