04

See my design work

Cascade Bicycle Club

TEAM MEMBERS

Project Manager
Misty Weaver

UX Researcher
Yuyao(Lexi) Zhang

Brand Strategist
Leah Breen

UX Designer
Pengzhou(Zoie) Huang

PROJECT TIME

2022/01 - 2022/06 6 months

THE PROBLEM

How might we design an accessible and mobile responsive website for Cascade Bicycle Club riders?

CONTEXT

I was proudly selected by the UW Digital Media graduate program to work with Seattle Cascade Bicycle Club as the Website UX Designer.

CONTRIBUTION

✅ Revamped 18 website screens (desktop & mobile) to enhance cohesiveness and accessibility for the club's 10,000 members.

SKILLS PRACTICED

Design patterns | Website Design | Zeplin | Figma

Media Coverage of the Project

Create the sense of belonging for club members

From the Cascade Bicycle Club’s website, I found a quote :

Bicycling cannot solve systemic racism in the United States. But systemic racism can’t be fixed without tackling it within bicycling.”

- Former Los Angeles Bicycle Coalition Executive Director Tamika Butler.

To create a sense of belonging for club members, I focused on improving accessibility and inclusivity of the website. This was in line with CBC's mission to eliminate inequities and build social inclusiveness through bicycling.

SOLUTION

Site visitors should be able to find, read, understand and take actions on all information via mobile device.

PROCESS

Website Audit

Employed top tasks model to find necessary recommendations
Deciphered the web via google analytics
Spotted blocks on user flows

User Research

Empathized by partnering with the user researcher: client & user survey, website first impression and user journey map collaboration.

Accessibility Checker

Analyzed the website accessibility problems
Created accessible components

Design and Prototype

Sketched possible solutions
Presented and received critique feedbacks
Designed hi-fi prototype in Figma and recommended the best practices to the client

REDESIGN HIGHLIGHT

Before

After

COLLECTIVE INTELLIGENCE

From the CBC organizers

" We want the people to have a better connection experience to the website. To know who Cascade is, What are their values? How do they put those values into practice regularly? "

" We want more transparency - Be able to easily promote and provide relevant safety information for current events "

From the Designer, Researcher and Brand Strategist

Website first impression from the Designer, Researcher and Brand strategist

LEARN ABOUT USERS

We utilized the Top Tasks Model to identify opportunities for enhancing the user experience on the Cascade website.

In Top Tasks review, we used feedback from Cascade along with analytics review, user surveys, comparative review of similar organizations, and industry best practices to form our list of priorities and recommendations.

From Google Analytics, I discovered that the most frequently visited subpage is the Ride & Events. This information indicated the importance of designing a seamless ride and event registration process for the users.

Additionally, the analytics showed that nearly half of the website's users accessed the site from mobile devices, which led me to prioritize the design of a mobile-friendly user experience.

Nearly 50% of the users visited the website on mobile devices.

THE SURVEY

Super Fans - What is the most important reason that made or would make you want to join a bicycle cl

Regular riders - What is the most important reason that made or would make you want to join a bicycl

What kind of information or resources do you find most helpful?

Super Fans - What is the most important reason that made or would make you want to join a bicycle cl

1/5

User survey result

Based on the survey results, it was evident that having a sense of community was crucial to all users, particularly regular riders and super fans. The most common reason for users visiting the Cascade Bicycle Club website was to sign up for a major ride, tour, or event. The survey data also indicated that users found the information on group rides, tours, or events to be the most useful aspect of the website.

After knowing about the expectation from the business stakeholder, professional impression from the team and learning about the user , we drew the "how might we" question.

How might we design an accessible and mobile responsive website for Cascade Bicycle Club riders?

AUDIT THE TASK FLOWS

The last stage of the design discovery is task flow auditing. I audited 9 users' top tasks.

Find and register for a free group ride
Learn about, register for STP (Seattle to Portland) Ride
Find, register, pay for rides, events, tours
Find, register, pay for a class
Join a special interest group
Join a challenge
Get free bicycling / eBike education
Learn about, sign up for Youth programs
Learn about bicycle routes, resources

The followings are typical examples. 📃View the full audit report

Example1: 4 ways to register for "Chilly Hilly" event

Way1

Way2

Way4

Way1

1/4

Event registration workflows

There are four different paths for site visitors to register the "Chilly Hilly" events. The way4: go to the "2022 event schedule" to register is the simplest.

However, all four paths share the same issue where visitors must click "register" twice to reach the final registration information page.

Register button1

Register button 2

DESIGN

✅ Pros:

Showcase events and activities and display sub-content within the same hierarchy.
Icons are used to emphasize key features such as "search", "shop" and "sign in".
The color scheme of gray and black helps distinguish between the main menu and sub-menu.

❌ Cons:

The size can be overwhelming, obscuring information that lies beneath when expanded.

Finally, I chose to implement the combination with design 1 and 3 as my design solution. This decision was made because of the balance of user needs and the project constraint, the client is easy to implement as they lack in-house engineering resources.

Straightforward navigation menu without drop down

✅ Pros:

Simple to configure, changes to green color when hovered.

❌ Cons:

Lacks functionality for first-time users, only allows viewing of main pages.

Utility / Top Tasks footer

Green

White

FOOTER Design

✅ Pros:

Uncovering topics that are not readily visible through the main navigation
Heightening recognition of the site's central content

❌ Cons:

The footer may become cluttered and lose its focus due to an excessive amount of information.

Finally, I chose the doormat footer (Design1). Due to the large amount of content on the Cascade website, the sitemap footer appears cluttered. And the client has requested the addition of a newsletter subscription option in the footer.

The announcement bar has been relocated to be positioned under the menu

The major event is on the daily calendar

The "Free Group Rides" are highlighted on the website

The blog articles are displayed in a card format

👁 Accessibilty

I analyzed the home page and global navigation design using various accessibility tools, which resulted in a score of 44 out of 100. The main problem identified during accessibility analysis was insufficient contrast between the background and foreground colors.

I altered the background color to a darker green (#32861e) and the hover color to blue (#0080a4), which passed accessibility standards.

🎨 New colors on design assets:

Hover status color & Announcement Bar

The access to all rides & events and registrations

E-commerce cards style

The access to all rides & events and registrations

The breadcrumb web address

Relocate the "ride information & support" sidebar to the bottom with accompanying icons.

A filter is applied to search resources

The most important information: date, price and location.

📱 MOBILE DESIGN

Footer

1

Move the social media link from bottom to the newsletter area

Direct email subscription

Before

After

Design patterns

REFLECTION

Presented my work with pride at the department annual design summit 😀

Collaboration fosters diversity in perspectives

User friendly design

Our team engaged in close collaboration, utilizing a user journey map as a reference point. Each team member brought unique perspectives to the table, contributing to the formation of a collective intelligence that facilitated the attainment of our objectives.

Adhering to the principles of Universal Design is crucial in the development of interactive devices. Implementing accessible design not only benefits individuals with disabilities, but also enhances the user experience for everyone.

Effectively communicate with the client

In practical situations, limitations such as time constraints, budget restrictions, and availability of team support are inevitable. Through my experience, I have developed the ability to effectively communicate with clients and offer design solutions that are aligned with these constraints.