Hero image of the Annenberg Foundation website mocked up on an iMac desktop.

Annenberg Foundation website redesign

In 2020, my team and a partnering agency were tasked with redesigning the Annenberg Foundation's website.

annenberg.org

Team

Creative Director: Hamish Robertson
Digital Director: Vance Hickin
Visual Designer: Andrew Vuong
Partnering Agency: Solid Digital

Role

My role was to engage in discovery with the team, present a competitive landscape, develop and take the resulting sitemap to create wireframes, high fidelity mockups, and oversee the visual design of the project.

Objective

The old website was a few years outdated and the priorities of the Foundation have shifted in the last year. The goal was to present the website in a way that drives content first as the work coming out of the Foundation will be heavily story driven. The look and feel we were hoping to achieve was a mixture of a modern content platform while still leveraging the Foundation's established brand.

Challenge

The Annenberg Foundation has over 10 initiatives under its umbrella and a large portion of the external audience knows of only one or two. The challenge was to highlight a majority of these initiatives and programs on the homepage without overcrowding while still prioritizing new content.

Result

The result was to design a responsive grid system for the homepage (that is then adapted to subsequent pages) that highlights the content above the fold, while having the initiatives and programs laid out below. Because the visual aesthetic of the content above the fold relies heavily on imagery, we utilized color fill as the background for some grid blocks to ease the viewer's eye through the page and avoid visual overload.

Desktop mockup of the site's homepage, color palette and typography used.Desktop mockups showing page layouts for an article and explore.org page.

Sitemap and Wireframes

Sitemap of the website.Wireframe mockups of the website.