A Digital Annual Report with a Visual Punch


THOR_BOM1.jpg

TRACKING MILESTONES

Cycling is near and dear to our hearts.

We had the honor of helping the non-profit group People for Bikes craft the visual story of their 2016 milestones. The project called for a great deal of custom imagery and in-depth content organization. We worked with our client to create and customize dozens of images for use in the piece. We built numerous storyboard drafts leading up to the development of a prototype to set just the right pace and tone for storytelling. The resulting piece is a concise journey through 2016 told in a stream of People for Bikes branded images.  


 Each image on the site has been crafted to the overall look of the People for Bikes brand. Many images are seamlessly assembled from multiple source images to create the perfect context for telling the People for Bikes story.

Each image on the site has been crafted to the overall look of the People for Bikes brand. Many images are seamlessly assembled from multiple source images to create the perfect context for telling the People for Bikes story.


 People for Bikes racked up a lot of milestones in 2016, and boards like this helped us put them in order.

People for Bikes racked up a lot of milestones in 2016, and boards like this helped us put them in order.


 We explored numerous narrative styles through storyboards during the initial stages of the project.

We explored numerous narrative styles through storyboards during the initial stages of the project.

 Our final storyboard left no details to chance and gave the client and developer a clear road map to the final site.

Our final storyboard left no details to chance and gave the client and developer a clear road map to the final site.

DEVELOPMENT

Developing any site with a large amount of animated graphics like those found in this annual report is challenging. In today’s multi-device world, the experience must work across a vast number of unique devices ranging from mobile phones and desktop computers to boardroom televisions and now, even automobiles.

Introducing the report is a sequence that simulates city, mountain and touring rides visually, pulling all PFB constituencies together using a popular parallax effect on the image overlays. We decided to base this site on the powerful ScrollMagic framework, which allows the website to be comprised of a series of animated scenes.

The introduction gives way to a series of scenes grouped into the organization’s major efforts over the last year. Each scene we developed came from the styled images you see here, overlaid with a finding from the PFB annual report in the ScrollMagic framework. The result is a highly interactive representation of PFB’s year through the animations.