Bike Shack Leyton Desktop Redesign

Project Overview

Participants:

Emma Perry (Solo Project)

Roles:

UX Researcher, Information Architect, UX & UI Designer, Project Manager.

Timeline:

2 weeks

Tools:

Figma, Zoom, Optimal Workshop, Slack, Google Drive, pen and paper

Project Summary

I was tasked with discovering, defining, and implementing ways to improve the online retail experience of a local bike shop.

Through a range of research methods, I discovered a variety of issues. Once these had been addressed, I was able to increase Bike Shack’s System Usability Scale rating from 55.5 to 96 based on a sample of 5 users.

Outcomes

  • Finding the right page shouldn’t be a cycle of confusion!

    Interviews revealed that many users prefer purchasing bikes and cycling products online, prioritizing trustworthy sellers and competitive pricing. Consistently, users rely on reading reviews before making their final decisions.

    Usability testing highlighted challenges with the Bike Shack website, where users struggled with navigation and were frustrated by inconsistent content and design.

    In response, my solution emphasizes easy access to customer reviews and offers multiple navigation paths, making it simpler for users to find the products they need.

  • Running into 'out of stock' surprises? Feels like hitting the brakes too late!

    Usability testing revealed that users faced challenges identifying which products were out of stock.

    While it was apparent when an item was completely unavailable, there was no clear indication of size and color availability. This led to confusion, as users couldn’t understand why certain products couldn’t be added to their basket.

    This issue was quickly resolved by “greying out” unavailable sizes and colors, providing users with a clear visual cue and improving their overall shopping experience.

  • When it comes to bike sizes, it’s all about the right fit—no need to spin your wheels!

    Users expressed frustration with the lack of clear information about bike sizes when shopping online. Bike Shack's website featured inconsistent size naming conventions, with some products labeled as 'Small, Medium, Large,' others using 'S, M, L,' and some displaying numerical sizes, which many users found confusing. This inconsistency made the shopping process more time-consuming and frustrating, as users struggled to determine the correct size.

    To resolve this, I implemented a comprehensive size guide that allows users to easily cross-reference the different size standards used by various bike brands.

  • Users appreciated the clean, minimalist design of the website, but felt it didn’t align with the authentic, down-to-earth feel of the physical shop. The website's aesthetic seemed disconnected from the real-life experience of visiting Bike Shack.

    Additionally, most users identified as commuters who primarily cycled in urban environments, making the mountain-themed logo feel out of place for a bike shop based in London. The logo seemed random and irrelevant to their daily cycling needs, which led to a lack of cohesion between the branding and the shop’s core audience.

    To address this disconnect, I created a mood board to explore how the minimalist aesthetic could be enhanced to better reflect the real-world experience of Bike Shack's customers. This process led to the development of an updated logo and color palette that resonated more with the shop's identity and its urban clientele.

    During usability testing, users described the new design as “very bikey” and noted that it had “a very Londony feel,” highlighting the improved alignment between the website and the cycling culture of the city.

The Client

Bike Shack, a friendly, community-focused bike shop in Leyton, has challenges with its online experience.

Despite having over 25,000 followers across social media platforms, Bike Shack’s website produces low engagement, and they mostly rely on eBay for online sales.

Heuristic Evaluation

I was tasked with discovering, defining, and implementing ways to improve the online retail experience of a local bike shop.

Through a range of research methods, I discovered a variety of issues. Once these had been addressed, I was able to increase Bike Shack’s System Usability Scale rating from 55.5 to 96 based on a sample of 5 users.

Outcomes

  • Finding the right page shouldn’t be a cycle of confusion!

    Interviews revealed that many users prefer purchasing bikes and cycling products online, prioritizing trustworthy sellers and competitive pricing. Consistently, users rely on reading reviews before making their final decisions.

    Usability testing highlighted challenges with the Bike Shack website, where users struggled with navigation and were frustrated by inconsistent content and design.

    In response, my solution emphasizes easy access to customer reviews and offers multiple navigation paths, making it simpler for users to find the products they need.

  • Running into 'out of stock' surprises? Feels like hitting the brakes too late!

    Usability testing revealed that users faced challenges identifying which products were out of stock.

    While it was apparent when an item was completely unavailable, there was no clear indication of size and colour availability. This led to confusion, as users couldn’t understand why certain products couldn’t be added to their basket.

    This issue was quickly resolved by “greying out” unavailable sizes and colours, providing users with a clear visual cue and improving their overall shopping experience.

  • When it comes to bike sizes, it’s all about the right fit—no need to spin your wheels!

    Users expressed frustration with the lack of clear information about bike sizes when shopping online. Bike Shack's website featured inconsistent size naming conventions, with some products labeled as 'Small, Medium, Large,' others using 'S, M, L,' and some displaying numerical sizes, which many users found confusing. This inconsistency made the shopping process more time-consuming and frustrating, as users struggled to determine the correct size.

    To resolve this, I recommended a comprehensive size guide that allows users to easily cross-reference the different size standards used by various bike brands.

  • Users appreciated the clean, minimalist design of the website, but felt it didn’t align with the authentic, down-to-earth feel of the physical shop. The website's aesthetic seemed disconnected from the real-life experience of visiting Bike Shack.

    Additionally, most users identified as commuters who primarily cycled in urban environments, making the mountain-themed logo feel out of place for a bike shop based in London. The logo seemed random and irrelevant to their daily cycling needs, which led to a lack of cohesion between the branding and the shop’s core audience.

    To address this disconnect, I created a mood board to explore how the minimalist aesthetic could be enhanced to better reflect the real-world experience of Bike Shack's customers. This process led to the development of an updated logo and colour palette that resonated more with the shop's identity and its urban clientele.

    During usability testing, users described the new design as “very bikey” and noted that it had “a very Londony feel,” highlighting the improved alignment between the website and the cycling culture of the city.

Defining the Problem

“Users need a fast, reliable and affordable way to access bikes and cycling gear to minimise disruptions to their commute and alleviate concerns about bike theft.

Users said white minimalist website was “nice but not in keeping with real life feel of the shop.”

Most users cycled to commute and said the existing mountain logo seemed “quite random” for a shop in London.

To address this disconnect, I created a mood board to explore how the minimalist aesthetic could be enhanced to better reflect the real-world experience of Bike Shack's customers. This process led to the development of an updated logo and design framework that resonated more with the shop's identity and its urban clientele.

During usability testing, users described the new design as “very bikey” and noted that it had “a very Londony feel,” highlighting the improved alignment between the website and the cycling culture of the city.

Branding shift

Product availability

Usability testing revealed that users faced challenges identifying which products were out of stock.

While it was apparent when an item was completely unavailable, there was no clear indication of size and colour availability. This led to confusion, as users couldn’t understand why certain products couldn’t be added to their basket.

This issue was quickly resolved by “greying out” unavailable sizes and colours, providing users with a clear visual cue and improving their overall shopping experience.

Access to Product Reviews

Interviews revealed that many users prefer purchasing bikes and cycling products online, prioritizing trustworthy sellers and competitive pricing. Consistently, users rely on reading reviews before making their final decisions.

Usability testing highlighted difficulty finding reviews on the Bike Shack website. In response, my solution provides easy and consistent access to customer reviews and offers multiple navigation paths, making it simpler for users to find the information they need.

The Solution