Research | UX Strategy | Interaction Design | UI Design
Redesigning an existing website to make it responsive for different screen sizes and branding
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.
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.
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
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
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.
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.
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.
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?
I used my iPad Pro for usability testing and recorded the completion time and any hiccups they made.
After all of the tests were completed, I created an Affinity Map to synthesize the test results.
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.
More usability testing will be conducted to validate the changes that were made after the last round of testing.