Responsive Website Redesign

b4hpdx hero image

Project Overview

Cycling promotes community, health, and sustainable transportation, but cost and knowledge can deter potential cyclists. Bikes for Humanity Portland (B4HPDX) aims to overcome these barriers and build a strong cycling community. This project focuses on creating an accessible, inclusive website to connect clients with B4HPDX's services.

The Problem

B4HPDX's current site is engaging but struggles with visibility and accessibility for its services. Existing user flows, information architecture, and UI elements pose challenges in identifying and accessing offerings. These barriers hinder potential clients from connecting with B4HPDX's remarkable services.

The Solution

We aim to revamp the site’s architecture, flows, and UI to improve client accessibility. Our focus is on optimizing service presentation, implementing efficient appointment booking, and adopting a contemporary UI. This redesign aims to enhance B4HPDX's work by transforming the online client experience.


User Research Coordinator, Stakeholder Contact, Style Guide Designer


50 Hours
February 18th  - March 5th 2023


Jordan Modic
Mara Peasley
Rylee Schlaht
Nicholas Ly


Figma, Miro, Trello, Google Suite


Streamlining information to improve community access.

Enhancing community access to services through the optimization of the site's visual hierarchy and information architecture.

B4HPDX Highlights 2

Bringing appointments to the forefront.

The updated appointment process enables users to efficiently schedule their next visit.

B4HPDX Highlights 2

User Research

Heuristic Evaluation

Personality, humor, and purpose.

Our journey began with a thorough exploration of the B4HPDX site, which boasts a vibrant personality (check out the Adopt a Bike page for a chuckle) and a commendable sense of purpose. Through our evaluation, we identified opportunities to enhance their online presence by refining certain components.

Heuristic Evaluation Photo


  • Redundant navigation options

  • Limited Visual Hierarchy

  • Lacking Accessibility Guidelines
    (i.e. insufficient color contrast)

  • Inconsistent design

User Persona

ISO: an affordable way to cycle.

Through thorough analysis utilizing user insights, affinity diagramming, and empathy mapping, we introduced Sage. He seeks affordable bike repair options, aims to acquire bike repair skills, and enthusiastically looks for biking companions for long city rides.

User Persona Photo

Sage Matheson

Age: 27
Occupation: Barista
Location: Portland, Oregon

Sage bikes as his primary form of transportation as well as recreation. He often spends his time off riding bike trails and he enjoys DYI projects. Sage wants to learn how to maintain his bike to make bike ownership more affordable and he would like to connect with a larger biking community.


  • Find an economical way to maintain his bike.

  • Gain bike repair skills.

  • Join local biking community.

Pain Points

  • Unsure where to gain bike repair knowledge.

  • Can't afford to have bike serviced regularly.

  • Difficult to figure out when repair classes are being held.

Stakeholder Interview

What does B4HPDX want from their site?

The B4HPDX communication director graciously shared insights during an interview, shedding light on the organization's digital approach, website priorities, and operations. This discussion, especially regarding pandemic-era website elements, was crucial for understanding the organization's future website plans.

Stakeholder Priorities

  • Expand website offerings as organization boosts services to pre-pandemic levels.

  • Update information on class programs.

  • Transition to updated appointment system.

  • Create e-commerce section of the site to sell used parts and supplies.

Stakeholder Contact Photo


Problem Statement

Barriers: affordability, knowledge, and community.

Our research data showed that users faced several barriers in accessing resource information for this cycling non-profit and others. This placed our focus on identifying and removing these barriers to support B4HPDX in increasing client resource access.

Problem Statement Icon

Cyclists are unsure of where to gain the necessary skills to maintain their bikes and struggle to find a biking community. How might we update the b4hPDX website to increase user access to classes and workshops while supporting a cycling community?

Feature Prioritization Photo

Honing in on the scope of our project.

We pinpointed high-impact, low-complexity features to enhance user experience. Due to project constraints, we focused on two features that addressed major challenges found in user research. These also aligned with our aim to improve resource access for the organization's clients.

Feature Prioritization

Information Architecture

Site Map Photo

A little reorganization goes a long way.

To simplify information access and improve appointment accessibility, we redesigned the site map, integrating booking pages with related secondary pages and consolidating information from tertiary pages. This reduced page count while enhancing user access to booking and resources.

Site Map


Style Guide

More contemporary and more accessible.

The Style Guide significantly improved the site’s style choices, emphasizing consistency and accessibility. Updates were made to typography, font colors, and the logo to comply with accessibility standards and modernize the design.

Logo and Branding

Style Guide: Logos


Style Guide: Buttons

Color Palette

Style Guide: Color Palette


Style Guide: Typography
b4hpdx mobile home mockup
b4hpdx mobile nav mockup
b4hpdx mobile learn mockup

Finding a collaborative design for four designers.

To begin, each design team member created their own mobile lo-fi frames. We then collaboratively reviewed and selected design elements to advance together, focusing on emphasizing the organization's mission, simplifying the home page options, and integrating bike-themed iconography.

Mobile Frames

Initial Desktop Frames

Making the transition from mobile to desktop.

We expanded our mobile design to develop the initial desktop version. By employing consistent styling, prioritizing booking and class information, and maintaining the site's original focus on photos from the organization, we crafted a design that caters to both user and stakeholder needs.

b4hpdx lo-fi desktop mockup

Hi-Fi and Desktop Prototype

Increasing client access through contemporary design.

We advanced the desktop version into a Hi-Fi Prototype. This prototype underwent rigorous usability and A/B testing to evaluate accessibility and user preferences. By refining this design, we aimed to deliver a product that not only enhanced usability but also offered a more contemporary UI.

b4hpdx hi-fi desktop mockup

Next Steps

Flush Out Full Site

Given an additional 15 hours, our team could have completed all website pages, fully realizing this design. A comprehensive design would have enabled us to proceed with various project components, such as extensive user testing and gathering stakeholder feedback.

Stakeholder Coordination

Our interview with b4hPDX’s communications coordinator provided invaluable insights. This conversation granted us a deeper understanding of the organization's intricacies and the diverse voices of stakeholders influencing the direction of its online presence. Incorporating stakeholder feedback becomes a crucial next step in actualizing this design.

Track Impact

Launching our design and tracking its impact would offer valuable insights for our team. Metrics serve as an additional lens, guiding further development and shaping future user testing strategies. By incorporating click-through rates, utilizing tools like Hotjar, and gathering additional user data, we would aim to measure our goals and refine the site to bolster user interaction and engagement.