California Bicycle Coalition: User Research and Website Redesign

March - September 2021

Intro

The California Bicycle Coalition (CalBike) advocates for equitable, inclusive, and prosperous communities where bicycling enables all Californians to lead healthy and joyful lives. CalBike is the only bicycle coalition working statewide to develop and improve legislation, paving the way for local coalitions to make an on-the-ground impact.

Curious about volunteer opportunities in transit advocacy, I reached out to CalBike and independently led this project to redesign and improve the user experience of the organization’s website. Currently, the website is still under construction.

Challenge

Design a user-friendly website experience that promotes learning, engagement, and donation for a bicycle advocacy nonprofit

Outcome

New page layouts and a refined navigation/site map based on qualitative and quantitative user research, UX best practices, and a reimagined website strategy

My Role

Managed the project, facilitated workshops and interviews, conducted UX research, gathered website data, designed wireframes, gathered feedback and worked with a developer to implement the site

Scope & Process

Leading CalBike Through the UX Research Process

Throughout the project I used this approach to help CalBike understand each component of a typical design process.

Website Goals

We set key goals for the future website that would guide my process and help me to deliver a holistic design project that addressed each of the needs for the future site.

Guide visitors through our site seamlessly

Simplify navigation & establish consistency with main nav, footer, & drop-down protocols

Remove confusing elements that are do not tie back directly to our website’s strategy + vision

Ensure project pages & initiatives are engaging, relevant, and easy to skim

Provide feedback & follow-up for every interaction

Determine pages to be deleted, simplified, or combined with one another

Discovery

Overall Research Strategies

Heuristic Analysis

Applied knowledge of basic UX principles to document problematic user experiences in existing navigation, content hierarchy, page layout/structure, readability, imagery, and accessibility

5 User Interviews

Conducted 45-minute interviews through Zoom to speak with California residents about their connection to cycling, bike advocacy, & their experience with the website

Competitive Analysis

Taking a look at overall messaging, key features, site hierarchy, and product strategy for various other nonprofit organizations to identify opportunities and inspiration

Visioning Workshops with CalBike Staff

I led two workshops with the CalBike team to kick off the project and learn about their website vision. We also brainstormed their organizational goals, ideal tone and aesthetics, and other nonprofits they admire.

A screenshot of a tone exercise we collaborated on in Mural, a digital collaboration tool.

As a result of the workshops, we defined how their website could better respond to their organizational needs and those of their website visitors.

Qualitative Research

One-on-One User Interviews and Observation

To gather a range of perspectives on the website, I interviewed some California-based cyclists who had previously supported CalBike and some who had not.

During virtual calls, interviewees shared their screens with me and scrolled through the website, sharing their thoughts aloud while I asked prompting questions to learn what grabbed their attention and what content or elements confused them.

Journey Mapping

I conducted think-aloud exercises with interviewees and distilled some of the key pain points users encounter as they navigate the site into journey maps that detail their needs and where they often encounter issues.

Research Summary

These slides capture core insights, guidelines, and opportunities for improvement from research.

Site Analysis

Google Analytics to Inform Page Strategy

I used Google Analytics to gather page view data and understand visitor engagement. Some pages contained important content yet had lower views, so I combined some pages with others and shifted content to accommodate a more straightforward website with fewer pages overall.

The many pages listed under CalBike's "Resources" section that we decided to simplify.

Current Website Structure

I created this site map to document all of the existing pages on the website and where they lead to document their methodology for structuring the site, display the complexity of the current format, and identify inconsistencies.

A screenshot of just one portion of the extremely complex current site map.

Improving Navigation

The existing header navigation overwhelmed users with options, so I proposed these changes to the navigation menu to minimize churn, reduce choices, and prioritize key calls to action.

To tie back to some of our established website goals, we tried to simplify the navigation as much as possible.

Strategy & Synthesis

Developing a Cohesive Website Strategy

To build consensus on the overall direction for the website, I shared the following slides with the CalBike team to redefine their Vision and Outcomes based on our previous conversations.

Ideation

Footer & Header Navigation

I created two restructured header and footer options in Figma, a web design tool, and shared them with the CalBike team to choose their preference and leave feedback.

I then shared the options through a collaborative Figma file for the CalBike team to leave comments and feedback.

Proposed Nav Option #1

Proposed Nav Option #2

Layout Experimentation and Feedback

I then created 3-4 layout concepts for seven different landing pages in Figma, reimagining the design to meet their goals of projecting a more professional and prestigious brand.

Final Design

<< previous: uc davis health

next: workplace research >>