兿 | An UX Designer 💻 + Industrial Design Fan 🤖 ; Previously designed @ EA 🎮
Banner2.jpg

Copy of Working_Cascade Bicycle Club | Web Experience Redesign

 
 

Cascade Bicycle Club Redesign

 

+ Duration | 10 Weeks

+ My Role | Research, UX & UI Design, Prototyping

+ Methods | Interview, Persona, Usability Testing, Wireframe, Information Architecture, Content Strategy, and Visual Design

+ Team | 4 Members

+ Tools | Figma, Marvel, Optimal Workshop

+ Interactive Prototype

 
 

 

Overview

In this 3-month project, I worked on creating a new website design for the Cascade Bicycle Club, including redesigning IA, user flows, page templates, content strategy and visual guidelines.

Client: Cascade Bicycle Club is the nation’s largest statewide bicycle nonprofit based in Seattle. They offer programs and rides for all age and diversity groups to teach the joys of bicycling, advocate for safe places to ride, and produce world-class rides and events.

 
 
 

Challenge

How might we help users find information they need quickly and accurately?

CBC website is the major channel for commuters and bicyclists to find events, register for rides, manage membership status, and stay updated in the biking community.

Currently, It’s cumbersome to navigate, overloaded with content, and lack of visual hierarchy, making it difficult for visitors to browse naturally and have to rely heavily on the organic search. This create a significant barrier in terms of event, membership, volunteer and donation conversion.

 

Project Goals

Goals.jpg
 

Solution

 
 
 
 
 

Features

Features.jpg
 

My Process

01

Empathize

Define Goals with Client

02

Research

  • Google Analytics

  • Usability Testing

  • Card Sorting

  • Personas

03

Ideate

  • Competitive Analysis

  • Information Architecture

  • Sketching

 

04

Wireframe

3 Major Scenarios

05

Test

Usability testings

06

Iterate

  • Interactive Prototype

  • Visual Style Guide

 

 

Define Goals

Kicking off the project with stakeholders, we defined the business and branding goals:

  1. Usability: Easy navigation, intuitive and clean

  2. Identity: A website that highlights what they are passionate about without being overwhelming.

  3. Revenue: Always translates information to CTA.

  4. Flexibility: An easily updatable structure for staffs to make changes.

 

 

Research

 

Methods

we evaluated the current website through heuristic evaluation, stakeholder interviews, user testings and Google Analytics data analysis to better understand underlying problems and define scopes.

 
Screen Shot 2018-08-04 at 4.02.13 PM.png

Google Analytics | Identify Users & Tasks

Original STP.png

Heuristic Evaluation | Define Scope

Usb test.png

Usability Testing | Define Painpoints

 

Research Insights

 

2 PRIMARY USERS & USE CASES

We identified 2 primary users and their needs based on the Top Visit page and demographic data from the Google Analytics,

 
 
 
 

The Information Seeker

Just started considering biking as a way to commute, these users are new to the biking community and want to explore routes and learn safety instructions on biking in city. They are browsing for a variety of information on the first visit to the website. They need:

  • Quick overview of CBC

  • Intuitive navigation to find the right event to start; easily digestable information

  • A simplified membership flow

 
Bitmap.jpg
 

The Event Participants

These users are actively engaged in the biking community. They are already members and have ride with CBC before. They use the website to register for rides, get updates and manage membership and upcoming registrations. They need:

  • Shortcuts to manage membership status and registered events

  • Rides catelog & rides detail preview

 
 
 
Problems Copy.jpg
 

USABILITY ISSUES

insight 1

Confusing IA & Navigation Design

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.

insight 2

Overloaded and Unmanaged 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.

insight 3

Taxonomy Issue

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

 

 

design recommendations

Optimize For Information Seeking

Reconstruct IA & Navigation

The overall structure needed to be reorganized and simplified in a meaningful way.

Create Consistent Templates

Templates that can reduce both browsing and managing effort.

Visual Hierarchy

Intuitive and refreshing UI design that fits into current branding theme.

Membership Registration Flow

Clear membership introduction to help increase conversion.

 
 

 
IMG_20180430_171131.jpg
 
 

Reconstruct IA

Based on the core users and their needs, we reduced the top-level IA items from 13 to 7.

 
 
 

Methods

Card Sorting

Goal: Understand users’ mental model

We did a card sorting section using Optimal Sort to manage the subcategories and pages. We understood better about how users would like to categorize content and how they would like to name each category. Based on the findings from card sorting, we re-arranged Cascade website content, adjust the terminology, and refined the information architecture.

 
 
 

User Tasks Heat Map

Goal: Understand priority

We then created a heat map of user tasks to identify hierarchy of CTAs to appear on navigation bar and landing page.

Task Heatmap.png
 
 
 

 

Takeaways

The less, the better

The Card sorting connected dots for us. Participants grouped

Need an account management hub

Membership is one of the most frequent destination for all 3 users.

Bring contribution to the top

Considering the business aspect, the contribution items(donation & volunteer) should be easily found on the top level.

 

 

Prioritize Navigation Categories

User tasks.jpg

Result

Based on user actions, I categorized this initial navigation bar into 2 major sections: information-centered section(Events, Resources, New, etc.) and business-centered section(Membership, Volunteer, and Donation). The new navigation system prioritizes primary user tasks with simplified taxonomy and actionable CTAs.

 
把颜色对上!!!

把颜色对上!!!

 

 

Concept Sketches

We took the newly defined IA and sketched out screens accordingly. I went as broad as possible and sketched multiple variations for each scenarios.

We then critiqued these concepts and narrowed down….

 
Event_sketch.jpg
2018_12_02 11-14-05.jpg
Landing page_wireframes.jpg
Group Copy.jpg
 

Ideation Highlights

No sub bucket under Events

Users can directly view the event catalog without click into subcategories.

Highly visual-dominated

Route maps and event photos are shown with the same weight as text to improve browsing experience.

Create event summary sections

A summary card that contains primary info and registration CTA is placed on top of event detail page.

Add multi-functional search bar

A search bar that offers both search and sort function. Users can find events based on time, location, or just names.

 

 

Wireframes & Testings

There’re so many stuff to look at. I’m not sure where to start.

We designed around 3 major scenarios and learned following insights through usability testings:

Success

The new IA was intuitive.

Issues

The content and event details layout was still crowded.

 

Scenario 1

First Visit

THE LANDING PAGE

  • Clear hierarchy & selective contents

  • Preview upcoming events

  • Image-dominated visual style

Testing Insights

Participants would love to view more events options and even directly filter their interested events on landing page without going deep into event page.

Landing page Copy 7.jpg
 

Scenario 2

Browse and Register

Landing page Copy 6.jpg

THE EVENTS CATALOG

  • All upcoming events in chronological order. Users can view specific categories using the filter and search functions.

  • Preview key info: name, date, location, tags, etc.

  • Switch between card and list views

Testing Insights

Participants would love to view more events options and even directly filter their interested events on landing page without going deep into event page.

RIDE DETAIL PAGE

  • Key info summary + highlighted registration CTA

  • Tabs that organizes event details into sections

Testing Insights

Participants would love to view more events options and even directly filter their interested events on landing page without going deep into event page.

 

Scenario 3

Membership Registration

THE REGISTRATION / UPGRADE FLOW

  • A dedicated hub to introduce users to how to get involved

  • Interactive benefit table

Testing Insights

  • Hard to know the difference between creating an account vs. membership

  • Participants expect to find upgrade feature in profile page

 
 

 

Takeaways

Visual Hierarchy
‍‍
Users want to do more with the upcoming events section on the landing page. More details rather than just CTAs.

Upcoming Events Preview
‍‍
Users want to do more with the upcoming events section on the landing page. More details rather than just CTAs.

Card vs. List
‍‍
Many users preferred the list view over the card when viewing the event catalog. But they also…

Scannable Content
‍‍
Among all of our users, there was a strong preference for data and content that was scannable.

wireframe testing

Are visual representations always more informative than text?

How should I design it to minimize long-term maintenance effort?

 

 

High-Fidelity Prototype

Major Changes:

  • Double nav

  • Template

  • Registration flow & profile page

 

The Landing Page

Landing_hifi.jpg
 

The Event Catalog

Catalog_hifi.jpg
 

Event Detail Page

Detail_hifi.jpg
Nav_change.jpg

THE NAVIGATION

Ideation

  • Intuitive configuration of 3 main functions: information, personal. and business

  • Use of common and consistent terminology

  • Highlight business-related CTA through “Get Involved” and “Donate"

  • Create a clear personal center for user to manage their registrations and other profile functions

Testing Insights

  • Double-layer navigation was more clear to users

Initially, I sketched options to combine all functions within a single-layered navigation bar to reduce users’ navigation effort. However,

Design Decisions

  • Keep the double-layered style, but create a clear hierarchy: Information Section > Business Section > Personal Section

 

A Closer Look

Footer

 

UI Spec

Mood board

UI Spec

Style+guide_Presentation.png
Design decision_example.png

Takeaway


Kickoff / Goal & Matrix

After the first few stakeholder meetings, we have conclude goals for both business and usability aspects:

Business Goals

  • Increase membership conversion

  • Increase revenue through paid event & classes

  • Increase donation

Usability Goals

  • less needs for calls

  • more appealing, and easier to manage

Branding

  • Showcase the image of group diversity, women on wheel