top of page

Panache Cycles Case Study

Mari Shear, UX Designer
Duration: 8 weeks
Tools Used: Sketch, Figma and Zoom
Role: Heuristic Analysis, Ideation, Wireframing, Prototyping

Design Methods
+ Research

Project Overview

A company called "Panache Cycles" sells bicyles on their mobile-web experience. They needed to enhance their browsing and checkout experience to greatly improve their product’s usability. 

​

​

​

They are looking to improve the conversion rate from browsing to completion of checkout to increase revenue on the product’s mobile-web experience.

The Challenge

Design Process

Research

Analysis

Design

Design

Prototype

Testing

Prototype

Testing

Test

Refine

Refine

Final Iteration

Design Thinking Process

Research

The first step in my process was heuristic analysis of other companies that were attempting to do the same thing as Panache Cycles. With a user persona given by the project manager I wanted to get into the mind of a typical user and explore the options that were already on offer. I did comparitive research of four major bicycle brands - Trekbikes, Yeti Cycles, Jenson USA and BikesOnline

​

As I browsed the websites I paid closed attention to usability, user flow, the checkout process, tactics for product matching and any other strengths or weaknesses that may shine a light on what Panache Cycles wanted to improve upon.

​

​

Analysis

Throughout my analysis I kept my persona in mind. For Johnathan, the website has to be edgy and youthful but not too focused on nice photos and image only. The detailed content has to be there to provide the a picky bike enthusiast with the right amount of information to make an informed decision.

 

The quality also has to be there in each product with the social aspect of direct product feedback from real customers. Johnathan is a young person who is used to a fast checkout flow, he has the most current technology so apple pay, paypal and guest checkout is a must.

panachepersona.png

User Persona

Design

As I came through the analysis I often noted that a lot of the websites were more image focused than focused on the actual details of the bikes and what features they provide, specifically Yeti Cycles. Trekbikes boasted a healthy knowledge base of bike specs for each model and a neat bike placement quiz, as well as a guest checkout. The most of impressive of the four was BikesOnline, which offered a thorough and interest bike product placement and a super quick guest checkout. Jenson USA was a bit overwhelming with loads of sales popups and email signup pop ups, it also didn't focus too heavily on bike specs and details. 

 

​

As I began my ideation process, I reflected on the websites I had looked at during my comparative analysis and I wanted to quickly draw both a product matching user flow and a guest checkout user flow that I thought would be helpful when creating my first lofi wireframe designs. 

PenacheuserflowBIKEMATCHWIZARD.jpg

BikeMatch User Flow

PanacheUserFlow.jpg

Guest Checkout User Flow 

After my analysis I knew that I needed to focus on a great way to match a customer with their perfect bike and I needed to create a flow that helped the checkout process flow as quickly as possible. I used some inspiration from my white board user flows.

 

​

Penache Cycles BikeMatch Userflow.jpg

LoFi BikeMatch Wireframe 

PanacheCyclesLoFiUserFlowGUESTCHECKOUT.jpg

LoFi Guest Checkout Wireframe 

Testing

First round of testing was with 5 participants. 3 in-person testers and 2 remote testers. These testers were seasoned bike riders who have purchased a bike themselves in the recent past. Being that my bike knowledge is limited I got suggestions on how I could improve the BikeMatch feature on my wireframe. Some of the best suggestions included:

​

  • A height question to match a rider with the right bike

  • A materials question, to match a rider with the bike material they would be most interested in.

  • I was also prompted to make an age category for the rider, if it were a bike for a child.

​

I also had some suggestions regarding the guest checkout process as well. Some of the best suggestions included:

​

  • Included a "Continue Shopping" button just in case the buyer wasn't done shopping.

  • Another was a a privacy policy checkmark that most websites with financial transactions taking place have.

  • Finally, a "locked in" quantity on the checkout end screen so it doesn't look like the quantity can be manipulated in anyway.

Refine

As I refined my lofi wireframe design I also wanted to create a new color palette for the site and a logo that reflected an image of quality.

 

​

Panache Color Palette

PanacheLogo.png

Panache Logo

PanacheGuestCheckout.png

Panache HiFi Guest Checkout

PanacheHiFiBikeMatchWizard.png

Panache HiFi BikeMatch Wizard

Second Round User Testing 

After my first round of testing and the development of my Hifi designs, I went for a second round of user testing to see how the fixes translated to new testers. My second round was with 3 testers in-person and 2 testers remotely. My new feedback regarding my BikeMatch design included:

​

  • A suggestion to include centimeters as well as inches in my height question to bypass a users need to convert their height from an outside source.​

  • Another suggestion was to remove the question "beginner, intermediate and advanced" if one was shopping for a child bike, as most kids are beginngers.

​

Suggestions regarding my guest checkout process included:

​

  • The "place order" button at the end of the checkout should be a different color to represent an action that is going to be the most important and difficult to backtrack from.

  • I also got a comment regarding the shopping cart being hard to see and read.

Final Iteration 

In my final UI, I took all the feedback from the user testing sessions and fixed any cosmetic issues with spacing, color and design flaws that existed from my first hi fi designs. 

PanacheGCFinalUI.jpg

Panache HiFi Guest Checkout Final UI

PanacheBMFINALUI.jpg

Panache HiFi BikeMatch Final UI

Conclusion

Taking into account all of the feedback from user testing and comparative research I was able to come up with a design that I thought really solved the issue at hand. I do feel like the bike matching process could be a bit more thorough possibly and include different spec choices for bikes, like possibly, color, wheel size, brand, gears and speeds. I think the future for BikeMatching will also need to include any new technology that bike enthusiasts may be interested in purchasing.  

Bicycle Handlebars
bottom of page