WhiteBB.5.png

The Birchwood Bike Co.

The world’s most convenient bicycle company (REBRANDED).

About.

The Birchwood Bike Company is a (fictional, theoretical) premier bicycle company with a growing number of locations around the globe. They sell their own brand of top quality bicycles, built with the latest technology and marketed with our uniquely branded, service-oriented strategy.

The Dilemma.

The Birchwood Bike Company’s website has usability issues. 50% of users open on average 7 item pages and then abandon the site without moving any items into the cart. It was hypothesized that users are unable to determine which bike is best based on relative features. Additionally, 70% of users who place an item in the cart do not purchase a bike. Data shows that users abandon the cart at the registration page. Right now, users must create an account to make a purchase.

BBhowdoesitwork.png

How does it work?

In just a few simple steps on any mobile device, users can select one of our service specialists who have years of experience in the bicycle industry. From there, a customer can choose up to four bicycles to test ride. The service specialist transports these bikes to your home or location of choice, at the date and time of your choice, providing an official fit test. Birchwood’s specialized service vans are equipped with all the necessary tools and technology to provide each customer with detailed attention.

My role.

Research and interviews, UX and UI design, prototyping and testing, heuristic analysis.

Project length.

12 weeks

Design tools.

Sketch - Affinity Designer - Miro

Research findings.

I developed a research plan to prioritize the main goals and scope of the project. I embarked on a heuristic analysis of 3 leaders in the industry to compare and contrast their strengths and weaknesses. Through this research I grasped some possible solutions for a user flow as well as determining which UI elements and patterns would be necessary to make the product competitive. I then completed secondary research, surveys, and usability tests. During this process, I discovered things that I thought would improve the website’s drop rate and increase customer purchases. I completed the following research methods:

10+ bicycle and ecommerce sites reviews.

 

Help decide.

A few websites devoted to bicycles had a “help me decide” feature that walks the user through a variety of bike set ups, assisting the customer in making the purchase.

Inefficiency.

I discovered that most high-end bicycles sold online had a difficult ordering process and the customers typically were required to find the nearest retailer, which may or may not be near to the customer.

Comparing.

A feature that allows the user to compare two or more different bicycles would allow the user to see the differences and similarities between bikes.

See it.

Clear illustrations and graphics denote special features and technologies that can be emphasized. 360 degree imaging technology captures beautiful images that show the bike from all angles.

33 online survey responses.

 

Overview.

26.5% of survey respondents considered themselves bicycle enthusiasts who would be willing to pay a premium price for a bicycle.

Making a decision.

Respondents cited cost, style, and quality as the most important deciding factors when purchasing a bike.

Revelation.

88% of respondents had never purchased a bike online. 

Supporting evidence.

All respondents stated that they would only, or prefer to purchase a bike in store and would only use the internet for initial research for purchasing a bike in store.

Key findings.

  • People typically don’t buy bikes online

  • People want to experience the bike before making a purchase

  • People want a proper fit, especially for an expensive bike

  • People use platforms that they are most familiar with such as Amazon.

  • Seek out brands that are familiar

surveychart1.png
surveychart2.png

Designing a solution.

Because this project was a theoretical scenario, and after discovering that most people would never buy a bike online, and given the circumstances surrounding the global pandemic, I decided that the best solution to this dilemma would be a complete rebranding of the Birchwood Bike Company. This afforded me the ability to ask,

“How might we sell bikes online, in such a way that customers could still test ride our bikes”?

Sketching.

My solution was to bring the bikes to the people!

From this point, I started sketching the most necessary screens on paper. Through initial research, I determined that it would be helpful to include three different paths to find a bike. First, to use a premium service for delivery, which included an associate delivering four bikes and offering a proper bike fitting. Second, a user could find a bike in the app and then find the nearest retailer that had that particular bike. Thirdly, the user could purchase the bike online and have it delivered to their home just like any other online retailer would do.

first+screens.jpg

Engage.

A hero video seems to be the trend for this kind of website and I thought how brilliant it would be to have the first screen be a 3 second long, looping helmet cam POV of a wild bike ride on a mountain trail.

 
second screens.png

Support.

I included an option to chat with a representative at any time. I also believed that a feature similar to ‘help me find a bike’ would be beneficial to users. So I started sculpting out what that might look like.

third screens.png

Simplify.

I wanted a large, clean product image and a screen that included all the necessary information about the bike and an intuitive button for adding the product to the cart.

 
fourth screens.png

Choices.

I thought that providing the user with a few varying options for delivery and support would be beneficial. Perhaps some customers would prefer normal delivery, or to go pick up the bike themselves.

fifth+screens.jpg

Finish.

The process needed to include a guest checkout, so I envisioned how that could be included upon reaching the payment and delivery screens.

 

Information Architecture.

I asked myself, “what are the most necessary paths a user needs to navigate this app”? First, the user needs to be able to find a bike. Second, the user needs to be able to buy that bike, and fundamentally be able to add the bike to their shopping cart. Thirdly, the user needs to be able to pay for the bike, confirm that the transaction has been completed, and receive delivery confirmation.

 

Visual design.

Next, I wanted to begin actualizing the visual aspects of the brand by developing a style guide. The style guide also underwent a series of iterations, but maintained an overall consistency. I invested in colors that were sophisticated and rebellious. I also designed a logo that could represent the brand effectively.

Colors.

Sophisticated and rebellious.

Icons.

Simple and classic.

Elements.

Actionable.

Logo.

Simple, elegant.

BBlogo.png

Typography.

SF Pro Text

Typography.png

Validation.

There were a total of three rounds of usability testing. Each round consisted of five total usability tests at the sum of 4 hours of user feedback. All tests were moderated, some were conducted in person, others online.

 
Screen Shot 2021-05-24 at 12.28.26 PM.png
Screen Shot 2021-05-24 at 12.30.26 PM.png
Screen Shot 2021-05-24 at 12.31.10 PM.png

User feedback.

No visual cues.

Issue.

The users spent a lot of time trying to understand the description of riding positions.

Solution.

The first iteration was lacking icons or imagery to help the user understand what was being communicated. I added images to the second iteration.

 

Lack of clarity.

Issue.

All users were confused about the different buying options and did not understand that a service representative could deliver four bikes to the user’s home for fitting.

Solution.

I added explainer screens with an option to skip the screens. This caused another issue that should have been obvious-everyone chose to skip reading the service explanation.

CTA button not discoverable.

Issue.

The ‘add to cart’ CAL was not intuitive as it was down in the floating tab bar. Users were not sure how to add a bicycle to their cart.

Solution.

I prominently featured the CTA button and compare options on every screen of the red route. 

Cognitive overload.

Issue.

95% of users chose to skip reading the explanation regarding the app’s products and services. Because this premium service delivery is unheard of, users still did not understand the app.

Solution.

Because the idea is unique I decided to narrow the brand's reach to one specific service, which is to deliver, service, and sell bikes to people at their homes.

First iterations.

If selected from the start screen, this route will help the user find the right bike by answering a minimal number of questions.

 
 
firstiteration2.png
firstiteration1.png
firstiteration3.png
 

Second iterations.

Summary.

After review of the first round of usability tests, I decided to include a walk through explanation of the main feature of the app that was simple, clean, and easy to read with appropriate icons for explanation. I mimicked the simplicity of these screens in the remainder of the app, replacing images with icons. I also made the color theme more consistent and easier to digest. Additionally, there was a desire for users to browse all bikes easily, and therefore I included that action on the home screen, along with the ability to search for products.

 
 
seconditeration1.png
seconditeration3.png
BBiteration.png
 

Learning conclusions.

  • Ratings are important, they help users make purchasing decisions.  

  • People really don’t like to read, they want intuitive processes. Too much information can cause confusion, frustration and abandonment. 

  • It is important for users to be able to filter products, especially by price. 

  • Eliminate what is unnecessary, and don’t be afraid to start over. 

  • Be careful trying something new, it may not be intuitive to the user. 

  • And once again, user feedback is paramount!

firstiteration2.png

Before

afterscreen.png

After

 

Final iterations.

 

After careful consideration and user feedback, I contemplated the prospective uniqueness of the Birchwood business plan and decided to highlight the premium delivery service and make this the sole feature of the app. I refined the images to help users get to the next screen faster and used the color palette to excite the user on their journey. The final prototype is an attempt to help the user find a set of bikes (4) to test ride, schedule a service date, and complete the transaction.

Reflections.

It was a challenge to include all the information necessary to complete an online transaction. Analyzing industry leaders such as Amazon really helped with understanding the intricacies of such a platform. My personal experience leads me to believe that thinking outside the realm of what is currently possible can be beneficial in steering a company towards success. While I realize reorganizing an entire company's mode of operation is not usually possible, I thoroughly enjoyed conceptualizing an entire business model based on a simple UI UX problem and redesign.

Thanks for reading!