Mary Ann Badavi
Mary Ann is a UX designer, content expert and noodle lover based in Washington D.C.

Partnership for Public Service Annual Report

March 2018

UX/UI Design, Web Development

The Partnership for Public Service had always published its Annual Report in print, without ever translating it to digital. In 2018, I decided we would change that. Taking the initial print report, I translated it into a digital mockup, and then hand-coded the custom page using CSS and JavaScript.

Initial Mockup

Initial Mockup

At first, I thought the digital version of the report should be a more condensed version of the print report (which is over 20 pages). Thus, I used information architecture to categorize the information in a way that made sense for digital.

However, after discussing the mockup with the Development team, I learned that this method did not suit their needs—they needed the digital version to be the same length as the print report. How could I display 20 pages of information in a way that wasn’t overwhelming?



I decided to move forward with a Table of Contents that would appear in a modal, with each recommendation representing a chapter, so the sections would be more usable. I also used colors to signify different chapters.

Feedback on the final result was overwhelmingly positive. One sponsor even reached out and said:

“I also wanted to congratulate you on your annual report. It is one of the best I’ve seen (and I used to produce them for a living)! Clear, simply, focused, with graphics that illustrate an idea at a glance (like the interlocking puzzle pieces).”

You can view the full report here.