By using our site, you agree to our Cookie Policy
AcceptBy the Letter
If you can read these words, you’re in a fortunate group. About one in five New Yorkers can’t say the same.
The nonprofit organization Literacy Partners has been working for almost 50 years to change that, and we’ve worked with them on a number of fundraising efforts, including the annual Subway Reads campaign. The goal of their latest project was to help those who can read understand the difficulties faced by those who can’t, using visuals to inspire empathy and drive donations.
Creative agency The&Partnership first worked with Literacy Partners to develop a custom typeface—appropriately named Sans 18%—that visually represents the percentage of New Yorkers who are illiterate. With 18% of each letter missing, simple phrases become illegible. Illiteracy may pass unnoticed, but the jumble of Sans 18% can’t be missed.
The&Partnership then approached us to engage in a strategic partnership—specifically to help them communicate their concept digitally and execute the development.
Plan of ATTCK
We helped The&Partnership with the ideation of their concept, from building and designing the campaign’s landing page to determining its interactions. We also modified Literacy Partners’ donation workflow, streamlined it, and made it more visually appealing.
The Broken Typeface campaign was originally set to conclude with Literacy Partners’ annual gala in March 2020, but when the coronavirus outbreak made that impossible, we worked with The&Partnership to pivot the drive’s messaging. Since Literacy Partners’ spring gala is their biggest fundraiser of the year, donations were more vital than ever.
Inspired by concerns about the pandemic, the campaign’s focus shifted to the connection between illiteracy and public health. The&Partnership first produced a short film showing the crucial messaging that can be missed by those who can’t read. The video, now widely circulated, is featured prominently on the campaign page.
Social Impact
It was essential for Literacy Partners to drive home the fact that illiteracy affects everyone. Those who can’t read are unable to benefit from public notices and signage, let alone the newspaper. That means they’re less likely to know how to protect themselves and others. And for those who are already sick, information about where to find testing and treatment may be inaccessible.
Development
Our infrastructure strategy included leveraging WordPress, our content management system of choice, as well as one of our agency partners, WP Engine. WordPress is ideal for sites that are robust, scalable, and streamlined, offering custom experiences that are easy to adapt while still maintaining brand identity and visual integrity. In this case, the flexibility afforded by WordPress was vital when new priorities called for significant changes. Our collaborations with other nonprofits, including the United Nations, Robin Hood, and Common Good, have similarly benefited from this technology.
Interactive Animation
To translate the Sans 18% font into a digital experience, we first took its static type and set it in motion. When users load the campaign page, the first thing they see are the words Help us close the literacy gap. A small section of each of the magenta letters is set in cyan. Within a few seconds, the cyan sections disappear, leaving a mess of magenta shapes that hardly look like language at all.
Just a little down the page, we implemented various buttons, each with a different donation amount ($25, $50, $100, and so on). As users hover over each of the numbers, the letters above them fill in, bit by bit. The greater the dollar amount selected, the more of the letters are shown. By tying the completeness of the font to the amount donated, users see a graphic representation of their money’s impact. Effects like these—equal parts decorative and informative—are the kind of special touches we’re known for.
We also modified Literacy Partners’ donation workflow, streamlining it and improving it visually. When users click on $25, for example, the button turns from dark blue to cyan, and an input field—already populated with the dollar amount—appears next to a CTA reading Donate Now. As soon as the donate button is clicked, the window automatically scrolls down to reveal the first field in an onboarding form. This process reduces the workflow to the lowest possible number of decisions, making donations quick and easy.
TIMES SQUARE BILLBOARD PLACEMENT
RECOGNITION
Called Sans 18%, this ‘broken’ typeface illustrates what it’s like to look at a billboard, pamphlet or prescription and not understand what it says.
“This ‘Broken’ Typeface Symbolizes the Language Barriers Many New Yorkers Face”
From Launch to Beyond
The Broken Typeface campaign received an enthusiastic response when it debuted on June 8. With a billboard in Times Square and major press coverage in publications like Adweek and The Wall Street Journal, the campaign is well on its way toward creating change. We’re proud of the role we played, and we intend to keep helping Literacy Partners take 18% down to zero.
Credits
Designer
Developer
