Web Design
Spring 2017

Working Bikes

This project focuses on designing a responsive website for Working Bikes, a nonprofit bike shop, in order to convey and complement the community-centered, educational culture of in-shop experience.

READ ON MEDIUMVISIT WEBSITE


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

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.


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.

Document showing a person in their 20s named Tracy, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
Persona representing a curious, prospective customer.
Document showing a person in their 30s named MJ, who represents a target audience group. The document includes a bio and personality information about this hypothetical character.
Persona representing the avid cyclist and longtime Working Bikes supporter.

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.

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.

Site map document showing the proposed information architecture, including page structure and hierarchy.
Working Bikes site map.

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

Task flow document showing a sample pathway a user might take on the website in order to register for a class.
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.

A set of four mid-fidelity, greyscale wireframes representing key pages of the website, including the home page and a page for classes and workshops.
Mid-fidelity wireframes.

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.

A set of five blue boxes containing quotes from usability testing participants.
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.

Phase 5: 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.

A set of four tiles with proposed visual design, including typography and color palette options.
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.

A design document showing the final branding and visual design elements, including typography, color palette, sizing guidelines,  and sample buttons.
Final style tile.

The Final Designs

A set of four high-fidelity, full color, desktop wireframes representing key pages of the website.
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.

A set of four high-fidelity, full color wireframes representing the website on desktop, tablet, and mobile screens.
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.


BACK TO PROJECTS
Connections are nice

Get in touch.

Whether you want to bounce ideas for a project, want to talk about design and decision-making, or just want to say hi, I'd love to hear from you.

CONTACT ME
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.