Several pages of the campaign website stacked on top of each other

together4tomorrow

Advocating for the right to an education with a campaign that informs and inspires

Coursework, 2019

Outcomes

A friendly information hub and a global call to action that offers resources and actionable steps to get involved

Role

Branding, Illustration, Copy, UI, Animation

Tools

Illustrator, InDesign, XD, After Effects

Values

Education and Progress, Kindness and Positivity

Crafting a campaign for human rights

This project got its start as a campaign for the Universal Declaration of Human Rights’ Article 26, passed by the UN in 1948. In just a few short paragraphs, it outlines the foundation for everyone’s right to an education that should be made accessible, acceptable, adaptable, and available, no matter who they are or where they are in the world.

But together4tomorrow became a lot more to me once I dove into the research and started working with the material—not only is education one of my core values, it’s a fundamental tool to achieving the health, equity, and prosperity that everyone deserves.

Discover. Learn. Act.

together4tomorrow’s website blends the often serious nature of its content with playful, schoolbook-inspired illustrations and animation.

Planning a campaign: introduce, then inform, then inspire

together4tomorrow doesn’t assume any prior knowledge on the part of the viewer of the Universal Declaration of Human Rights, what’s meant by a right to an education, or how education rights play out in other countries or for other minority groups. Instead, the campaign is designed to help viewers flow through steps towards action.

First

Introduce them to the problem

Give our viewers a high-level overview of Article 26 in a way that’s engaging, friendly, and approachable. Ensure all content is clear and accessible across languages and locations.

Then

Educate them on the issues

Focus on exploring the issues and their solutions together, with clarity, to make big, distant problems—like the right to an education—more approachable and actionable.

Finally

Inspire and enable them to take action

Avoid negative language, emphasizing hopefulness and togetherness instead. Guide them in taking small steps to get involved that lead to greater advocacy down the road.

Designing how it flows and feels

Since the campaign’s first step is to inform, encouraging the audience to visit the together4tomorrow website from the get-go was crucial. Once they were there, they’d be able to learn more about the Universal Declaration of Human Rights, explore the issue in greater depth, and get involved with the campaign.

together4tomorrow’s website made up the bulk of the campaign in this stage (in addition to a style guide), so it was important that the first page our audience encountered really delivered, telling the campaign's story and inspiring action right from the start.

The first page of sketches, showing two hand-drawn website screens for the campaign
The second page of sketches, showing two hand-drawn website screens for the campaign
The fourth page of sketches, showing two hand-drawn website screens for the campaign

Creating a simple, globally accessible illustration library

Simple, bright, and universal

The illustrations for the campaign were designed to be easily recognizable across cultures and age groups, and focus on the positives outcomes of an education, rather than the negatives people experience when they are denied access to it.

Examples from the set of illustrations I created for together4tomorrow, organized into two rows. A document, phone, hammer, book, corn, beaker, and eraser are in the top row; and flags, a pencil, gavel, language bubbles, blocks, a paintbrush, and a stack of books are in the bottom row.

A style that’s honest, but playful and approachable too

Schoolbooks, crayons, and creativity

The color palette for the campaign was directly inspired by the many elements of a childhood education—children’s books, a box of crayons, and the creative exploration goes with them.

Clarity, inclusivity, and accessibility

together4tomorrow’s typography was chosen to maximize legibility and readability, as well as be as inclusive of other languages and levels of ability as possible. It combines Halyard Display for headings and display type and Aktiv Grotesk for body copy.

A sample of together4tomorrow's color palette and typography. It shows swatches for the main color, Future Blue, as well as five secondary colors and two type styles: Halyard for headings and display type, and Aktiv Grotesk for body copy.

Meet the campaign designed for everyone, anywhere

The final experience consisted of a Campaign Style Guide, a website, and a web animation prototype, each designed to emphasize the opportunity that all of us—no matter who we are or where we’re at in the world—have to demand change that betters education for folks around the globe.

With bright colors, friendly illustrations, and clear, actionable messaging, together4tomorrow makes understanding and advocating for everybody's right to an education a little more approachable, a little more impactful, and a little more doable.

Works with any device and connection speed

together4tomorrow’s website was designed to be responsive, so it looks great on any size device. And thanks to its use of SVG images only, it’s lightweight and loads quickly, even on slower internet connections.

together4tomorrow's website displayed in an iPhone and a MacBook Pro side-by-side
The first detail page of together4tomorrow's website in a MacBook Pro, showing a headline titled 'More About Article 26' against a blue background. A graphic of three flags from different countries is displayed beside the headline, and body text follows below.

A campaign website that guides viewers to understanding

together4tomorrow’s website is made up of four parts, each building on those before it. As users explore, they first learn about the UDHR, then the benefits education provides, then the pieces that make up quality education, and, finally, the reasons education is under threat.

A smart language switcher ensures that everyone’s included

If the site detects a visitor from a location with more than one frequently-used written language—like the United States—a language switcher appears at the bottom of the screen. Once they pick a language, it remembers their choice the next time they come back.

Several screens of the together4tomorrow website, all overlapping one another

Designing an app that makes tracking winter sports faster, easier, and more useful