WHEDA Interactive Annual Report

Rough sketch of interactive annual report
Design

WHEDA publishes digital and print versions of its annual report and financial statements annually. In the past, the digital version was just a PDF of the printed version, or an "interactive" flipbook where you could manually page through the printed version, and embed videos. For the first time, when summarizing fiscal year 2018/2019, WHEDA decided to embrace the possibilities of a fully interactive digital annual report.

Microinteractions and animations in presentation, interactive charts and maps, and video could all be built into the report.

Management made the decision to have the print and digital versions of the report still share similar look and feel, with the digital version simply having more content available than the print version. The graphic design for the page was completed in tandem with WHEDA's Creative Services Coordinator to ensure consistent look, feel, and tone across both versions of the report.


Interactions

One of the primary ways to add engagement to a digital version of the annual report was to add micro-animations to content as it is scrolled on page. Most content was animated to slide in, with mirrored slides for left/right aligned content. Quotes were given a special flip animation to make them stand out. Additionally, in lieu of a table of contents, a static header menu provided quick navigation through the sections of the report. The links were made to scroll smoothly when clicked, giving the user a sense of travel up or down the page.

On letters from the governor and the CEO of WHEDA, animating the signatures on page added a skeumorphic touch of the real world, giving the letters a more personal feel. This subtle animation is not necessary to a user's reading the letters, but adds a certain sense of "extra" to the experience.

Adding image/video galleries at the bottom of each featured story allowed more images of each subject to be used than in the print version. Additionally, users can click/tap on an image to see a larger version, along with captions for more information. Video allows for engaging with another sense (hearing), literally expanding the user's experience through sound and motion.

Interactive charts allow users to view summaries of dry, raw financial data. Hovering over slices on the pie chart yield more information through subtle micro-interactions.

Mapping allows the user to visually see the collective impact across Wisconsin in a way the financial data cannot. Due to printing limitations, this map was not included in the print version, even though there was nothing else limiting it to the digital version. Having extra content available in the digital version is a way to incentivise users to seek out the easily accessible digital version, and disincentivise the expensive print version.

Screenshot of the interactive annual report

A media gallery, one of the many examples of additional content available only in the digital version of the annual report
Outcome

The annual report for FY2018/19 has just launched, so its impact is still being measured, but initial anecdotal evidence is positive. WHEDA ultimately would like to move away from printing annual reports, so a successful interactive digital report will help speed that process.

View the Interactive Annual Report