top of page


Cascade Bicycle Club


Project Manager
Misty Weaver

UX Researcher
Yuyao(Lexi) Zhang

Brand Strategist
Leah Breen

UX Designer
Pengzhou(Zoie) Huang


2022/01 - 2022/06  6 months

Group 34.png


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


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


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


Google Analytics | User Flow audits | Journey Map Crafting | Responsive Designs | Accessibility WCAG 2.1 |

Design patterns | Website Design | Zeplin | Figma

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.

ABC ride-all smiles (2).jpeg

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.


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


Static View Level2 (1).png
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.

Web Accessibility.png
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




未命名設計 (4).png


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

未命名設計 (8).png


Group 76308 (1).png
Group 76309 (1).png
Group 76310 (1).png
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. 

Group 76312 (1).png

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.

未命名設計 (6).png


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?


The last stage of the design discovery is task flow auditing. I audited 9 users' top tasks.
  1. Find and register for a free group ride 

  2. Learn about, register for STP (Seattle to Portland) Ride 

  3. Find, register, pay for rides, events, tours 

  4. Find, register, pay for a class 

  5. Join a special interest group

  6. Join a challenge 

  7. Get free bicycling / eBike education 

  8. Learn about, sign up for Youth programs 

  9. Learn about bicycle routes, resources

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

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

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.

截屏2022-10-04 16.45.26.png

Register button1

截屏2022-08-31 15.16.06.png

Register button 2

未命名設計 (13).png


✅ 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


  • Simple to configure, changes to green color when hovered.


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

unnamed (4).png
Utility / Top Tasks footer


unnamed (5).png


unnamed (7).png
✅ 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

截屏2022-08-19 15.20.50.png

The "Free Group Rides" are highlighted on the website

截屏2022-08-19 15.25.38.png

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.

截屏2022-08-31 11.04.02.png
截屏2022-08-31 11.11.30.png
🎨 New colors on design assets:
截屏2022-08-31 11.17.55.png

Hover status color & Announcement Bar

MacBook Pro 14_ - 1.png

The access to all rides & events and registrations

E-commerce cards style

The access to all rides & events and registrations

The breadcrumb web address

Group 135.png
MacBook Pro 14_ - 2.png

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

MacBook Pro 14_ - 3.png

A filter is applied to search resources

MacBook Pro 14_ - 4.png

The most important information: date, price and location.


Mobile menu.png
menu- Slides in.png

The Hamburger allows for direct navigational access

截屏2022-09-07 14.23.20.png
Mobile Footer-2.png



Move the social media link from bottom to the newsletter area

Direct email subscription



Design patterns
Screen Shot 2023-09-20 at 11.10 1.png
未命名設計 (15).png


IMG_0867 2_edited.jpg

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.

Group 7.png
Group 35418 (3).png

UX Designer

Zoie Huang

Interested in viewing more projects?
Group 76354.png
Group 76362.png
Group 76357.png
Group 76361 (1).png


bottom of page