Bike and Build

Campaigning for the affordable housing cause with bike rides across the USA.

Context

In 2012, I took a cross-country cycling trip in support of affordable housing with an organization called Bike & Build. It was the time of my life. In 2013 I was given the opportunity to design the majority of the organization's marketing collateral. This included Jerseys, Brochures, and Annual Reports. I helped the organization unify their visual brand and shift from their existing PDF report into a responsive, web-based version.

Annual Report - 2015

The 2015 report was a collaborative effort with Spencer Harrison.

The Challenge

Tell the story of a year in Bike and Build to brand new audiences, program alumni, and board members alike: explaining the year's specific successes and milestones, and the organization's broad offerings in the same flow.

Architecting the Content

Our initial content delivery consisted of a word doc outline, excel sheet of finances, and dropbox folder of rider-taken photos. We employed card-sorting to quickly experiment with different content types, ultimately discovering a storyline that wasn't obvious from reading the initial outline.

Story as Journey

After some iterations, we selected a pattern that told a step-by-step story of how Bike & Build operates through a year, through its key metrics. We prototyped a long scroll layout, with options to skip to audited financials and actionable items.

The Final UI

We used a rhythm of icon, fact, data, and image to tell the key story. Red boxes served a simple visual separator for deeper dives into non-sequential content, including explanations about Bike & Build, and rider testimonials.

Monochromatic color treatment.
Monochromatic color treatment.

Seeing Red, White, & Blue.

Every year photography is a challenge for the report - There are thousands of beautiful images taken by participants but they vary greatly due to unique cameras, settings, and filters. We really wanted the year's photography and layout to sing harmoniously, and ultimately this required absolute color minimization. Duotones drove the aesthetic and visual language and synced with the typography.

It’s not a race, but load time is.

We developed a custom single-purpose-class CSS library to accelerate our prototyping workflow and keep our codebase performant. We employed wow.js and animate.css for transitions and most of our scroll-based animations. Chart.js and canvas powered our data visualizations.

Animated Route Map

We used animated SVG's to help articulate the routemap.

Results

What started as an audited financial document for public records has grown into one of the most important marketing tools for the organization, helping boost donations, new corporate partnerships, and rider participation.

View the live annual report at bikeandbuild.org/2015annualreport.

Apparel Design

I was contracted to design Bike & Build's Jersey's from 2013–2015, I simplified the color palette and encouraged a simplified graphic structure for each.

2015

2015

2014

2013

2013

Services

  • UX / UI / IA
  • Data Visualization
  • Front-End Development
  • Apparel Design

Year

2012–2016