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.
Timeline
4 Weeks
Team
Solo
Role
Lead UX Researcher, Lead UI Designer
Tools
Figma, Google Drive, Miro, Zoom
Based off what the client wanted and the research done, here is a peek at the solution:
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.
.webp)
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The terminology for this page was confusing throughout the testing process, so I changed the wording and added extra tags for easier understanding.
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.
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.
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.
