Washington Bikes Website Redesign
Washington Bikes Website Redesign
MAR - JUN 2017
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.
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
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
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.
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.
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.
After (hover to see design justifications)
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