1
2
Tech research and ethics, data visualization, UX/UI design, and writing professional.
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
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?
Results
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.