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.
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
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.
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.
Typography.
SF Pro Text
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.
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.
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.
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!
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!