How might we generate excitement, interaction, and clear communications between customers and staff of a popular local bike shop?

erika
erika
May 26, 2018 · 7 min read

The Challenge: Working Bikes, a Chicago-based non-profit bike shop, needs a website with fresh, up-to-date content, flexible customer interactivity, and ease of maintenance.

The Approach: A responsive website that conveys and complements the community-centered, educational culture of the in-shop experience.

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.

Duration: 4 weeks

Tools: Sketch, InVision, Google Sheets

Phases: User Research — Design Strategy — Interaction Design — Wireframing and Prototyping — Testing and Iterating — Branding and UI Design

My Role: User Researcher, Interaction Designer, UX Designer, UI Designer


The Design Brief

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 stakeholders.

Photo courtesy of Wayne Bishop via Unsplash

Phase 1 User Research

Primary Research: Interviews and Surveys

I first 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. However, I did not have access to Working Bikes’ direct customer base, so I conducted surveys with participants who were similar to Working Bikes’ audiences. I 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.

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).

Secondary Research: Competitive Analysis

I also sought to examine the current the Working Bikes website, as well as the websites of other local bike shops, in order to identify potential areas of improvement for Working Bikes’s online presence. The competitive analysis and audit of the Working Bikes website confirmed that Working Bikes’ existing website offered very limited direct interactivity, and that many existing site pages contained outdated or unclear information.

Some of the results from the competitive analysis.

Phase 2: Interaction Design

The initial research phase made it clear that the current Working Bikes website needed improvements in presenting and organizing content.. The existing website offered limited calls to action and outdated content, and it lacked features that users wanted, such as a search bar and a contact form.

I used the primary and secondary research data to design a site map. Through the site map, I sought to reflect more options for user engagement and clearer language for navigation menu items.

Working Bikes site map.

II also reviewed the user personas to identify some pathways people might experience on the Working Bikes site and created task flows. By creating a site map and task 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.

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

Phase 3: Wireframing and Prototyping

Based on the 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 sketched low-fidelity wireframes with pen and paper, and then designed a set of mid-fidelity wireframes of key pages, including the home page and a page for classes and workshops.

Some of the mid-fidelity wireframes representing desktop views.

Phase 4: Usability Testing

I conducted a round of usability testing, both in-person and remotely, 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.

Quotes from usability tests.

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, 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. 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

Phase 6: User Interface Design

Instead of proposing to rebrand, I worked with Working Bikes’ existing logo in order to provide a digital experience that would complement the in-shop experience. I offered variations of typography and color palette to create a sense of freshness in the online experience while staying consistent with the existing logo and wordmark.

Style tile options.

I ultimately chose to continue using Working Bikes’ color palette from its existing website 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. 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 provided a fresh interface without entirely abandoning the aesthetics and identity of Working Bikes’ current website; rather than conveying a total remake, I sought to convey an update.

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 work on this 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.


Thanks for reading!

everything is design(ed)

examining power in, and of, design

erika

Written by

erika

i care about discovering and designing meaningful, multimodal experiences that inspire critical thought and action.

everything is design(ed)

examining power in, and of, design

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade