Annual Report - 2015
The 2015 report was a collaborative effort with Spencer Harrison.
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.
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.
We used animated SVG's to help articulate the routemap.
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.
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.