CASE STUDY

Bikes @ Vienna

Research | UX Strategy | Interaction Design | UI Design

Redesigning an existing website to make it responsive for different screen sizes and branding

device mockup image

Background

Independent bicycle shops are typically a low-margin business, making significantly better profits from repairs, accessories, and custom work than the selling of bikes, though the latter is usually the core of their business. Stores with only a few employees won’t list all their inventory online, if it’s too much of a hassle to keep up to date. As customer experience matters most, and while online is part of that, it rarely ends there: a website cannot loop brake cables through your frame, and if a customer buys a bike from a shop they’re significantly more likely to come back there for repairs.

Challenge

There are an estimated 4,000 independently owned bike stores in the United States. They are frequently labors of love, and while cycling (particularly commuting) is rising as a function of migration to city centers, shops face varying degrees of disruption from online sales (depending on geography and clientele). Research and redesign the website for Bikes @ Vienna with an emphasis on responsive web design, branding, customer journey mapping, and strategic thinking.

Solution

I came up with six solutions after synthesizing the research findings and usability testing results to resolve user's pain points and integrate their feedback into the application.

  • Redesign an existing website to make it responsive for different screen sizes

  • Redesign existing logos / branding for both analog and digital media

  • Create a better information architecture for users to find information faster

  • Add a feature for scheduling repair appointments online

  • Add a feature for sharing events online and printing event details

  • Add how-to videos on the repairs page for users to watch when needed

Key Findings

I conducted my research by doing a thorough competitive analysis, user interviews, and an online survey. These are the key findings from my research.

  • The logos were inconsistent throughout analog and digital media

  • Customers prefer to buy bikes in store because they can ask questions and test ride

  • Customers prefer to schedule an appointment for repairs online

  • Customers want to quickly find information on the website about which brands the store carries

  • Customers want to quickly find information on the site about which services are available

  • Customers go to a particular bike store because of location and customer service

UX Strategy

I synthesized my research findings by creating a persona and storyboard, which helped me empathize and better understand my end users. I also created the business goals to translate them into a better UX strategy.

Persona

persona

Storyboard

storyboard

Business Goals


business goals

Interaction Design

I created the information architecture based on the research findings and designed the low-mid fidelity wireframes for the home, events, repairs, and product pages.

Site Map

sitemap

User Flows

user flow for adding events to calendar











user flow for scheduling an appointment

Wireframes



website wireframes

Prototyping

I recruited four users from ages 35 to 60 and conducted 1-to-1 usability testing using Invision. The click and preference tests were conducted on Usability Hub.

Testing Plan

Each participant were asked to complete the following tasks

  • Find the details of the recumbent bike, Bachetta- Giro 20.

  • Find the price to install handlebars on the repairs page.

  • Click the menu where you can schedule an appointment for repairs.

  • Which navigation menu do you prefer?

  • Which content order do you prefer for a bike store repair page?

Testing

I used my iPad Pro for usability testing and recorded the completion time and any hiccups they made.




participants image

Affinity Map

After all of the tests were completed, I created an Affinity Map to synthesize the test results.

affinity map

Results

testing result

UI Design

After I had studied my persona, Elaine, I decided that one of the main colors should be dark to give the brand a strong, rustic, and trustworthy feeling. The orange color was added to ensure that users still feel the warmth of a local shop. The Almaq rough and Copper Plate bold typographies were used for the headings to match the rustic and strong feeling. The Source Sans Pro typography was selected for the primary body text to give the site a modern and simple look. I also illustrated the bike icons to help users easily distinguish different types of bikes.

Style Tile

style tile

Key Screens

bike shop website key screens

Next Step

More usability testing will be conducted to validate the changes that were made after the last round of testing.