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.

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.

BikeMatch User Flow

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.
​

LoFi BikeMatch Wireframe

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

Panache Logo

Panache HiFi Guest Checkout

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.

Panache HiFi Guest Checkout Final UI

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.
