Responsive Website Redesign
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.
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.
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
Enhancing community access to services through the optimization of the site's visual hierarchy and information architecture.
The updated appointment process enables users to efficiently schedule their next visit.
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.
Redundant navigation options
Limited Visual Hierarchy
Lacking Accessibility Guidelines
(i.e. insufficient color contrast)
Inconsistent design
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
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.
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.
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.
