Michael Mesker, Designer.

Mk 1

Case Study

Translating The Ounce’s offline brand to the modern web

Timeframe

Summer — Fall 2013

Team

Robin Barre, Allison Manley, Nancy Essex

The Ounce of Prevention Fund is a Chicago-area institution that gives children in poverty the best chance for success in education from birth to age five. They believe that high quality early learning opportunities are an integral part of our nation’s education system. Over time, their offline brand had flourished in the form of well designed collateral and annual reports, leaving their web presence looking a little left behind. In late 2013, Palantir.net was called in to collaborate with The Ounce’s marketing department to reimagine the website from the ground up.

To unify their offline brand with the web, we advised that the first step towards feeling on-brand would involve creating typographic consistency across print and digital collateral. Based on inspiration gathered from existing print collateral and annual reports, I suggested a number of typography options in the form of browser-based style tiles.

In the end, the style tile exercise proved to be a good client feedback ice-breaker, and facilitated a key conversations around how the fonts actually looked on screen. While we didn’t actually use any of the styles we proposed, the exercise helped us rule out certain design treatments that weren’t working for our client, moving us closer to defining the right look.

While I was exploring the visual side of things, strategist Allison Manley was hard at work sorting through The Ounce’s existing information architecture. After auditing roughly 400 pages, Allison pitched the idea of breaking out the main navigation into two tiers: narrative and organizational. The narrative items could be used to direct visitors to more emotional, story-based content, while the organizational items would cover the typical who, what, and where.

By adjusting the navigation structure, we were able to push The Ounce’s story into the spotlight, encouraging users to discover how their integrated approach to early childhood education sets them apart from other organizations in the field.

Our client had a deep library of compelling photography that they’d become accustomed to using in print materials and presentations. We created a suite of design components that utilized large, full-width photography paired with blocks for headlines and calls to action. These components would help them leverage their existing photography assets and further illustrate how they are making a difference in the realm of early childhood education.

In the interest of promoting “giving” beyond a simple button in the header, we created a design component that exposed individual pathways to give. Within our system, the giving component could be easily dropped into the sub-footer of any landing page.

We built out the style guide over the course of the design process, and used it as a project hub for our client iteration meetings. A typical check-in would involve pulling up the guide, walking through a few design components, and then viewing said components within a prototyped page layout. Using the style guide in this manner helped set the table for meaningful discussions around the components and their roles within the system. Those conversations allowed us to iterate more effectively, and armed our client team with the knowledge to make informed decisions.