Reflect on the Year:
Gates Foundation 2017
Role: Lead Designer (UX + Visual) at Pilot Lab
Share what the Gates Foundation accomplished in 2017 with an interactive model, which provides both a quick read and the opportunity for a deeper dive.
The Gates Foundation has traditionally celebrated their end of year progress with a letter from Bill and Melinda Gates, which from 1998 to 2012 was in the form of a downloadable PDF. For 2017, we designed an interactive experience for readers in the form of a microsite.
After exploring a range of UX models, we decided an accordion-like model functioned best for our intention: to give readers a high-level view of the information with the option of digging deeper by clicking on each blade.
— UX design and research
— Art direction
— Web Design
— Content Strategy
Research, Organizational Themes, & Early Thinking
— past Year in Review websites
— interaction models
Organizational themes I explored around ways we could curate content:
Working closely with the Lead Copywriter, I helped shape the Content Strategy and organize the site structure. The Foundation sent over a spreadsheet of potential content to use.
In order to fully understand how we could organize the information and tell the most compelling story, I read all the articles shared with us. It's my belief that content should inform structure and form follows function and without fully understanding the content, a designer is working in the dark.
1 Research + Iteration
Art direction: 3 approaches
We proposed three different approaches for the Year in Review, each rooted in a different concept.
— A: Color-coded by theme (Ex: polio vaccination is green, women's health is red, etc)
— B: Elevating the human aspect (warmer hues, more photo-forward)
— C: Content-forward (type plays a more prominent role as we focus on words and graphics being the predominant way to tell the stories, rely more on the Gates Foundation archive of imagery)
The client opted for Direction C with a pop of color.
We paired the three different Art Direction concepts with different UX models:
Direction 1: Accordion / Blades
— a quick read (sections on the horizontal axis)
— opportunity to dig deeper (on the vertical axis)
— each story is a discrete section
Direction 2: Zoom
— a single page overview
— more breadth at top
— expandable / scalable over time
Direction 3: Storyline
— linear / horizontal path
— uses common vertical gesture to move
— cinematic, option for voice over
The client opted for Direction 1.
Working closely with the developers and client to bring the product to life
I worked extremely closely with the Dev team to bring the concept to life -- spending time in conference rooms, we pushed pixels around together and found creative ways to solve problems together.
Because a lot of the content came in at the end of the project or changed throughout the process, it was constantly a reshuffling of cards.
I implemented a system to work with the client to receive real-time feedback, as we were working within an extremely tight timeframe.
— Trello (to track progress with Dev)
— InVision (to share updates with client and receive feedback)
— Sketch Symbols Library (to make designs consistent across the board)
Slideshow of the Process
Before & After Photography
3 Final Product
The final product
The final product was received extremely well by the client and its success was due to the teamwork between the Foundation and us. It was also a massive learning process and some takeaways included:
— Content is needed earlier
— Next time, we should have a more flexible framework to slot content in
— Start conversations with all stakeholders involved earlier on (we had to swap assets and that impacted the design)
— Involve dev earlier on