Hyewon Son
cascade_cover.png

Cascade Bicycle Club

cascade_cover.png

Cascade Bicycle Club

Background

Cascade Bicycle Club is the nation's largest bicycle non-profit organization that advocates bicyclists and strives for a more bicycle-friendly Washington. Because of the range of services and information it provides, the organization was facing challenges with maintaining an user-friendly website. As a team of 4, we worked on a redesign of the website and collaborated closely with Marketing manager and Event manager at Cascade.

Timeline

11 weeks

Role

Research, web data analysis, content strategy, information architecture, wireframe, prototyping, visual design

Tools

Figma, Marvel, Optimal Workshop

prototype

Link to prototype


challenge

The current experience

The website is the major channel for bicyclists to find and register for events, manage membership and gain information about the biking community and regulations. However, the current website has severe usability problems that make it challenging for visitors to achieve their tasks quickly and accurately. Some major usability issues were:

  • Disorganized and overwhelming content

  • Confusing IA and navigation

  • Lack of hierarchy and inconsistent CTA

before.png

Goals for redesign

We interviewed our stakeholders to determine the goals for the redesign. We made sure to view the problem holistically and addressed three different types of goals: usability, business and branding.

Usability

Improved browsing experience will allow the users to navigate and find information quickly and efficiently.

Business

Event and membership sign-ups are the main drivers of the revenue. The website should focus on conversion.

Branding

Clean and modern visual brand will attract more visitors as well as make the website easily maintainable.


Persona Development

Understanding user needs

Based on the goals of the website, we determined two types of users and their primary use of website. This helped us to prioritize pages to redesign and discard pages that don't meet user's needs and goals. 

needs.png

Identifying usability issues

We used heuristic evaluation, web data analysis and card sorting method to uncover major usability issues of the website and fix them to align with users’ expectations. The research helped us understand user behavior on the website and organize information in a way that makes the most sense to the users.

1. overwhelming content

The amount of content and excessive CTAs increase user’s cognitive load and makes it challenging for them to consume information and take the next action, such as registering for an event.

2. unclear navigation

Unclear navigation and information architecture make the users feel lost, and they don’t know where to proceed. Categorization of content is unintuitive and disorganized.

3. confusing taxonomy

Users could not tell the difference between creating an online account vs. becoming a member. Membership program was not communicated clearly to the users.

Based on research findings, we needed to simplify and reorganize the navigation structure so that the users can find the content intuitively and effortlessly. We constructed a simpler IA by decreasing the navigation categories from 13 to 7.

Old IA

oldia.png

New IA

newia.png

Design decisions

Card & list view

To organize information in an easily digestible way, we decided to use cards and lists design. Card allows flexibility for different types of information and can be quickly applied to many pages on Cascade website. 

card&list.png

Single navigation bar

Since navigation was the source of many usability issues, it became a high priority for improvement. We completely removed the side navigation bar and simplified double navigation to single navigation by grouping content more effectively. Moreover, participants found it difficult to differentiate the navigation categories so we reworded them with more intuitive words. 

Style Guide_Nav .png

Filter and search function

Rides page is the most visited page on the website so we wanted to best optimize the search experience for new and returning visitors. We placed filter and search function on top banner for users who had specific event in mind.  If not, they can explore the list of upcoming events with key information (time, location, type of ride).

Event copy.png

Introducing membership program during sign-up Process

We introduced complete new flow for membership enrollment. First, we changed the wording from "online account" to "free membership" and "membership" to "premium membership" to differentiate two status. Then we prompted the users to choose the membership plan during their sign-up process.

membership.jpg

Visual Design

Competitive analysis

We looked at other bike organization websites to examine their visual design and how information is organized. Two common patterns were using full-width banner and card UI to organize information. 

Style guide

We maintained Cascade's original branding color, green, while shifting to a more minimalistic and clean look. We wanted the website to be inclusive and attract bicyclists from all skill levels and ages.

style_guide.png

Final mockups

Landing page

Landing.png

Event page

Event.png

Event details page

Education page

Ride.png
education.png

Presentation to Cascade Bicycle Club

We presented our final deliverable to various stakeholders at Cascade, including Director of Technology and Senior Director of Marketing and Communications. 

Update: Cascade recently implemented some of our recommendations on their website, especially the rides page! They completely removed the side navigation and updated categories for upcoming rides and past rides.

A1D8D014-A29C-4413-B8D7-C8836C8EDC27.JPG

Success metrics of the redesign

  • Reduced number of customer calls for questions

  • Increase in event and class registration rate

  • Increase in membership rate

  • Decreased in web bounce rate on critical pages


Reflection

If we had more time, we would have worked on responsive design and think about how the new website will fit into mobile. Also, one of the key lessons from this project was finding the sweet spot between content, UI design and stakeholder's goals.