Design & Content © 2019 Taoxi Li

Washington Bikes Website Redesign

Washington Bikes Website Redesign

MAR - JUN 2017

Overview

The Washington Bikes is an organization that advocates for bicyclists and a more bicycle-friendly Washington. At the beginning of 2016 Washington Bikes and Cascade Bicycle Club merged. Since the reorganization, the purpose of the WABikes changed, leading to a need of adapted and clear representation on its website. With restrictions on branding and previous design, we did our best to solve the problem. In a team of 5, I followed a User-Centered Design process and contributed to design and research of the website's revamp.

MY ROLE

Designer

Researcher

 

METHODS

Comparative Analysis

Data Analytics

Card Sorting

Information Architecture

Interviewing

Sketching

Usability Testing

Prototyping

 

COLLABORATORS

Clara Jauquet

Samuel Shen

Xiaodong Chen

Yao Lu

 

Process

Research

Ideation

Design

Test

Objectives

Redesigning a site is a huge project, so it is crucial to have top priorities clearly played out at the beginning. After discussing with the Washington Bikes' stakeholders, we decided to focus on the following goals:

  • Communicate brand purpose in light of merger with Cascade Bicycle Club

    • Educate users about the latest bike news/laws

    • Promote biking events and encourage users to join

  • Increase donations and highlight blog

 
Current States

Looking at the existing website, we were able to identify the following problems through user interviews and heuristic analysis:

  • Text-heavy content that is not readable or scannable

  • Confusing navigation and architecture

  • Remove information migrating to Cascade Bicycle Club site

  • Outdated visual styles and inconsistent design elements

Research

Understanding the users

As part of the preliminary research, we created a survey to understand our users. This allowed us to gather a large amount of quantitative data quickly at a low cost. Next, we scheduled 3 one-on-one interviews with our users to get an in-depth understanding of their needs and wants of regarding the product.

 

I'm donating money to you! Why does it have to be so difficult?!

USER INTERVIEW QUOTE

After the research above, we identified 4 archetypes: the novice cyclist, the avid cyclist, the cycling business owner, and the donor. We then created the following personas based on data to help us keep in mind who we are designing for.

Show More

 Create clear and intuitive information architecture

 

As mentioned earlier, one key problem we needed to address was the navigation and information architecture of the website. We conducted a total of 12 paper and online card-sorting activities. By analyzing the result, we were able to have a clear understanding of how users expect the information to be organized on the website. 

Ideation

Paper sketching

With a tight deadline, we first sketched out ideas on paper to test out ideas. This allowed us to explore different options quickly before creating higher fidelity works.

 

Low fidelity prototypes

We created low-fidelity prototypes in Sketch and tested with our designs with users again. In the meantime, we also tested with users to figure out any problems that we had.

High fidelity prototypes

After several rounds of iteration, we created the interactive high-fidelity prototypes with Sketch and InVision, which were enough to simulate a real product in a short time. Again, we tested with users to and made new adjustments as needed.

Example Design Justification

Below is an example of design decisions I made that were informed by my research from literature review and user interviews. Design rationales are provided, too.

Before

After (hover to see design justifications)

Outcomes
  • After the redesign, the website now clearly communicates the new Washington Bikes organization identity.

  • Our tests showed an increase in willingness to donate to the organization.

  • The content has been organized in a way that is more readable and easier to navigate.

  • The site also now has a more modern and cleaner appearance, which also enhance the overall user experience. 

  • Because our design followed a design system, the current design is also scalable, allowing the client to make necessary changes they may encounter in the future.

  • We made a good team. :)

 

From left to right: Clara Jauquet, me, Sam Shen, Yao Lu