UX Case Study: Working Bikes Website Redesign

How might we support customers of a popular local bike shop in finding the most current information online about the shop’s in-store offerings?

The Challenge

Working Bikes is a used bicycle shop in Chicago that “rescues discarded bicycles and gives them new life by redistributing them as tools of empowerment in local and global communities.”

Working Bikes has an informative website with a humble feel, but there is room to improve the way the website serves new and existing customers. This project focuses on designing a responsive website for Working Bikes that aligns with its values and enhances Working Bikes’ relationships with its various stakeholders.

Photo courtesy of Wayne Bishop via Unsplash

Project Goals

  • Redesign the Working Bikes website to include updated features, content, and calls to action, subject to strategic needs.
  • Define clear, logical information architecture to support the organization of existing and new content on the Working Bikes website.
  • Ensure responsive mobile design to fully support the different needs of customers on desktop vs mobile.
  • Ensure coherent branding that aligns with the in-shop customer experience.

User Research

I kicked off the project with primary and secondary research. I sought to better understand Working Bikes’ target audiences, and to learn about target users’ attitudes and beliefs in engaging with Working Bikes, both in-person and online. Because I did not have access to Working Bikes’ direct customer base, I conducted surveys with participants who could represent a comparable customer base. I did so by recruiting people who had ever engaged with local bike shops in their communities, and asked questions about reasons, motivations, needs, and goals in interacting with their bike shops.

I also sought to examine the current state of the Working Bikes website as well as the websites of other businesses in the local bike shop market in order to identify potential areas of improvement for Working Bikes’s online presence. The competitive analysis and audit of the Working Bikes website revealed that the existing Working Bikes website offered users very limited direct interaction, such as e-commerce or event registration, and that many existing site pages contained outdated or unclear information.

Some of the results from the competitive analysis.

Through the initial research phase, two target audience types emerged: (1) the long-time Working Bikes supporter, and (2) the bike enthusiast who has heard of, but never been to, Working Bikes. I developed two personas — one of a regular Working Bikes customer and volunteer, and one of a bicyclist who was interested in learning more about Working Bikes — and used the personas to guide future stages of the design process.

Personas for the regular Working Bikes customer (left) and the prospective customer (right).

Strategy Development

The user research revealed a shared goal among stakeholders: for customers to have a satisfying online experience with Working Bikes that complements the in-person experience.

Photo courtesy of Ezra Jeffrey via Unsplash

Interaction Design

The initial research phase made it clear that the current Working Bikes website needed improvements in the ways that content are organized and presented to users. The existing website offered limited calls to action and outdated content, and it lacked features that users prioritized, such as a search bar and a contact form. Thus, interaction design quickly became a priority focus of the project.

By reviewing the primary research data and competitive analysis, and website audit, I developed a site map that sought to reflect more options for user engagement and clearer language for navigation menu items.

Working Bikes site map.

I also reviewed the user personas to identify some pathways people might experience on the Working Bikes site and created two user flows: (1) registering for a class, and (2) scheduling a bike donation.

Sample task flow for registering for a bike repair class at Working Bikes.

By creating a site map and user flows, I was able to map out some of the possible journeys that a user could encounter within the website and identify any challenge areas prior to starting to design wireframes and prototypes.

Wireframing and Prototyping

Based on the initial information architecture laid out in the site map and user flows, as well as the synthesis of user research, I designed wireframes of screens that would represent a user’s journey in registering for a class at Working Bikes. I quickly sketched a set of low-fidelity wireframes by hand, and then designed a set of mid-fidelity wireframes for both desktop and mobile screen sizes. I incorporated both placeholder elements and production text in order to represent the lower-fidelity nature of the wireframes while also providing testing participants with some context about the purposes of each screen. Specifically, I incorporated production text related to the information architecture so that the usability tests could generate insights about quality of the proposed interaction design.

Some of the mid-fidelity wireframes representing desktop views.

Usability Testing

I conducted a round of usability testing, both in-person and remotely, on the desktop and mobile prototypes in order to identify potential pain points, areas of frustration, and sources of error in the interaction design. I asked users to share feedback on the overall layout and basic interface design of the screens, and I asked them to complete the task of registering for a bike mechanics class.

The overall error-free rate of the usability tests was 100% — all users were able to successfully navigate through class registration, with an average time of completion of about two minutes. While users flowed through the task without difficulty, there were other key areas of frustration that emerged:

“The font here is too big…and here it’s too small.”
“I want to see that I will receive an email confirmation.”
“Buttons like ‘Get Involved’ feel too vague.”
“What’s the difference between ‘Bike Shop’ and ‘Online Store?’”
“Is there a back button in the checkout process?”

Additionally, I conducted two preference tests to gather feedback on proposed page layouts for the home page and a program page. The preference tests not only informed the designs of high-fidelity wireframes, but they also provided additional insights about site characteristics that users value. In this case, I learned that users value simplicity, organization, a “clean” design, and text that is minimal but useful.

Iteration and Content Strategy

Through the results of the usability testing, as well as informal feedback from peers, I learned that the design iterations should focus on on improving the clarity and simplicity of content, navigation, calls to action, and user interface design.

In addition to iterating on the wireframes, I reviewed the competitive analysis, website content audit, and surveys from earlier research in order to inform content strategy. I prioritized content that provides users with clear information about how to engage with Working Bikes, encourages the development of a supporter base, and potentially generates revenue. This meant that it was critical to provide information about shop hours and location, descriptions of upcoming events, and details about the multitude of ways that users can engage directly with the shop.

Photo courtesy of Viktor Kern via Unsplash

User Interface Design

I chose to work with Working Bikes’ existing logo because it is widely recognized and loved by staff and customers alike. Since one of the original goals of the project was to provider users with a digital experience that complements the in-shop experience, I wanted to make sure that the user interface design reflected the in-shop brand. I did so by retaining the current logo and heavily drawing on image assets from Working Bikes’ large library of photos online.

I prepared style options with three color palettes — one that represents the current site’s color scheme, and two variations. I chose to continue using Working Bikes’ existing color palette in order to provide a sense of continuity to its current digital experience.

Final style tile.

The Final Designs

High-fidelity mockups in desktop browser view.

Based on feedback from participants in usability tests, it was clear that users value consistency, organization, and ease of information consumption, all of which are important factors to consider in designing any page. Thus, in the high-fidelity designs of key screens, I sought layouts that balanced text with imagery, balanced negative space with essential content, and featured a limited number of clear calls to action. The high-fidelity composites represent an update to the information architecture, content strategy, and overall visual design of the Working Bikes website, but they retain original site elements, including the logo, color palette, image assets, and tone of content, in order to present users with a fresh interface without entirely abandoning the aesthetics of Working Bikes’ current website.

High-fidelity mockups with various device sizes.

Key Takeaways

Due to resource constraints, a flexible and smart approach to user research and testing proved to be critical to this project. By utilizing a combination of remote and in-person research and testing methods, I was able to collect feedback early and often throughout the stages of the project.

This project also highlighted the importance of thoughtful, clear content strategy. While Working Bikes’ primary mission is to donate bikes to communities in need, it is widely known and believed to be just another used bike shop — and the website is a key tool for messaging their brand, activities, and impacts to both new and potential customers. Throughout the design process, I was able to closely examine both the strengths and weaknesses in how existing content conveyed the organizational mission, and was able to propose designs that communicated content in more streamlined, simplified, and consistent ways.

Further extensions of the project should involve the development of additional user personas that reflect other target audiences, such as funders, large-scale donors, and staff of partnering community organizations. It would also be critical to gather specific input from Working Bikes staff about the in-house capacity to update and maintain the website. Finally, this project could be enhanced through further design and testing of key user flows, including scheduling a bike donation, contacting the shop, ordering items, subscribing for the newsletter, and donating funds.

Questions? Thoughts? Interested in working with me? Let’s connect at erikaharano.com. Thanks for reading!