A Digital Annual Report with a Visual Punch
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.
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.