The goal

Through research, the goal was to discover attitudes around small businesses—bike shops in particular. Those findings would then be used to create a responsive website for Johnny Sprockets that would facilitate bringing customers into the shop itself. In addition, new branding would be designed, including a memorable new logo that represents the local spirit of Johnny Sprockets and lends a cohesive brand element to the site.

Research

Secondary and competitive analysis research pointed to the difficult market conditions local bike shop owners face and the need for diversification of services. Local dealers are focusing efforts on private-labeling products, coaching/training services and workout centers, repair services, and events and bike expos. Knowing this, primary research was used to determine what qualities would help a local shop stand out among the competition.

One-on-one interviews were conducted via video calls in order to gather direct insights into participants’ motivation to bike, research methods before purchase, purchase considerations, experiences with bike repairs and attitudes toward small businesses.The interviews focused on three main types of riders (as discovered from secondary research)— casual/recreational, commuter and sports/enthusiast. These three participants were between the ages of 27 and 35 and represented both men and women.

To get further quantitative data, a 13-question survey was conducted with similar questions adjusted largely to avoid open ended answers. The survey was posted to social media and online groups to recruit participants. A total of 36 responses were gathered.

“THERE WERE A COUPLE THAT HAVE A REPUTATION OF BEING REALLY SNOTTY AND IF YOU GO THERE AND BUY A BIKE, THEY’RE GOING TO TALK DOWN AND SELL IT TO YOU LIKE IT’S A CAR. SO I WENT LOOKING FOR SOMEWHERE THAT HAD A REPUTATION FOR BEING FRIENDLY AND ACTUALLY HELPFUL AND LISTEN TO WHAT YOU WANTED AND WHAT YOU WANTED TO SPEND.”
‍— INTERVIEW PARTICIPANT

At the end of the day, 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. The thing that really helps a local bike shop stand out is its service and expertise.

Consumers want a good price, but quality of bike is paramount and going to a shop where the employees don’t talk down to you and can expertly help you pick out the best bike for your budget/fit/needs etc. will win over a big box store (or even other local bike shops).

There is a perception that many local bike shop employees are bike snobs, so breaking that mindset is important to establishing a rapport with customers. The buying experience needs to feel like a personal relationship where you are heard, no matter your biking level or budget.

Overall, people like small businesses because they’re a part of the community, so those that offer services that reflect that (like workshops, group rides, local maps, etc) are valued.

Define

From research gathered, most consumers fall into defined rider category types. Focusing on two of those category types, two personas and journeys were created to inform design decisions—one based on a commuter-type rider and the other on a casual/recreational-type rider.

Site map/user journey

Working with an existing site information architecture would not be a feasible option. The navigation bar had unfamiliar headings and the dropdown menus have seemingly redundant information in multiple places, leading to a disorienting site experience. To counter this problem, an open card sort was conducted with the existing dropdown options to discover how participants would categorize the information.

Taking the trends from these results, a new group of participants was recruited for a closed card sort (that featured pared down dropdown menu content). By doing a dual sort, the site map of Johnny Sprockets was simplified and made more readily understood.

From this site map, a journey was created for each of the personas I created.

Wireframes

With persona and site map in mind, desktop layouts for the homepage were explored:

For each homepage design, how the content would play in the mobile environment was a constant consideration. This concern, coupled with the results of primary research and the personas created, strongly pointed to one design in particular.

TESTING AND ITERATION

An initial medium-fidelity prototype was built in Invision to test the process of booking a basic repair.

Overall, users found the task easy to complete, with only a few issues relating to bugs in the prototype tool and two of the users had minor confusion in choosing either the date or time in the form because of visual cues.

From feedback, changes were made to adjust the visual hierarchy of elements in the form. Additionally, some participants expressed confusion as to whether “Repairs” might be under “Services” in the navigation menu. This was updated to “Repairs and Services" to eliminate confusion. To further improve the booking experience, changes were also made to the order of form elements (from contact details>date>time to date>time>contact details) and dropdown menus were replaced with buttons similar to existing form elements to make an easier and more consistent mobile experience.

Rebranding and UI

With these changes in hand, a new logo was created for the site, which would set the stylistic backbone for visual elements on the high fidelity version of the site. This logo was chosen for a fresher, modern look, as well as its connection to the city of Chicago and incorporation of a bicycle sprocket. More importantly, this logo would also lend itself better to mobile screens than its predecessor.

The original site design was not mobile responsive. It also had various competing elements  hierarchically (sale message, tabbed menu of specials/features/new items, parking information, a hero image gif, a very lengthy word from the owner and financing messaging). The new design places an emphasis on photography and clear calls to action. The messaging also drew from responses gathered in primary research, focusing on the aspects participants said would attract them to a local bike shop.

The existing Johnny Sprockets homepage

The redesigned Johnny Sprockets homepage

Further testing was done with new participants on the high fidelity prototype to make sure that no confusion stemmed from the UI elements chosen. Participants were asked to complete an identical task to the original testers on the lo-fi wireframe prototype. Those testing the site found it easy to use and complimented the visual aesthetic of the design. One final suggestion that came about from this final group of tests was to add a call to action button at the top of the Repairs and Services page. This would bring visitors directly to the booking form, since it was not clear in the mobile experience that the form could be found after scrolling through a description of the services offered.

“THIS LOOKS NICE. I WOULDN’T EXPECT A PLACE LIKE THIS TO HAVE THIS KIND OF WEBSITE—IT’S COOL.”
‍— USABILITY TEST PARTICIPANT

Conclusion

Repairs and services are a major source of revenue for local businesses. 77% of the survey participants indicated that visiting their local bike shop’s web site was a part of their research process. By designing a site that focuses on the main consumer drivers for bike shops (products, services and local events), visitors can find what they’re looking for faster and more efficiently. Making sure that the site is designed with responsiveness in mind means that the site is easy to use, no matter the context.

With 100% success in all versions of the prototype, the process for booking a service appointment on Johnny Sprockets is straightforward and quick to accomplish. The design is not only easy to use, but received good feedback as visually pleasing by most all participants and I’m happy with the end result.