Banner image for A Bright Identity for Education News

Case Study

The Hechinger Report

A Bright Identity for Education News

How we helped the country’s premiere education magazine explain who they are — with a little inspiration from an unlikely subject

Five years ago, The Hechinger Institute found itself at a pivotal juncture. Originally committed to training professional journalists, newsroom cutbacks forced the Institute to re-imagine itself. And, in the face of steep challenges, it did just that, morphing into a news organization (The Hechinger Report) dedicated to reporting on inequality and innovation in the American education system.

When we arrived, Hechinger was thriving. It had established itself as the premier news magazine covering education, a peer to The Chronicle of Higher Education. Just one problem: They didn’t look like it. Although their stories routinely ran in The New York Times, The Atlantic, and NPR (to name a few), their own website looked like a blog. That’s where we came in.

Upstatement set out to create a new identity and website that matched the quality of Hechinger’s journalism. We helped their small staff relaunch the website as a destination that would show (or, as their director puts it, exclaim) their mission. We can proudly say it’s been quite a success.

Part

1

Site Design

Making a brand statement on the homepage

While Hechinger had established itself with influential, award-winning stories, it lacked name recognition. There’s a saying in journalism, “Show don’t tell.” With Hechinger trying to cement itself as primary destination for education news, we wanted readers to quickly sense who Hechinger is and what they care about.

For starters, Hechinger is a magazine. They publish a select number of thoughtful pieces about the most important issues (Common Core, computers in the classroom), and places (New Orleans, Mississippi) in American education. Every few days, they produce a long, strong, original cover story.

To make things more challenging, Hechinger can’t count on strong photos to carry their vivid, human-centered stories. But what they lack in photography, they make up for in reporting prowess. Their stories are deeply researched, chock full of shocking, context-setting numbers that grab you by the shirt and make you want to read. We wanted the homepage to have the same effect.

New cover stories come out almost everyday, but don’t always have photos. We designed treatments that work with or without accompanying art.
Hechinger goes deep on the subjects it cares about most. The homepage showcases their most important beats.
Numbers are at the heart of every Hechinger story. These custom teases make it easy to see the stunning facts behind big stories — and provide the perfect entry point.
100

The average caseload of a public high school counselor — nearly double the recommended limit

Important features used to disappear from the homepage almost as soon as they were published. This attention-grabbing section gives a second life to big features.
Highlighting important passages improves scannability on a page filled with text. It also helps readers focus on key facts and phrases.
The redesign coincided with a relaunch of their weekly newsletter. This hefty call-to-action appears on every page — and contributed to a boost in subscriptions.

Photography

Balancing Style with Substance

While Hechinger can’t always rely on great photos, images are important to the editors and the audience. Throughout the process, we repeated the phrase, "Policy is boring. Kids are interesting." That’s why the site is peppered with photos that take us inside the classroom.

Many of those photos are iPhone shots snapped by the story’s author. Our tasteful presentation makes each image look good no matter what. And when Hechinger has great photography (they hire freelancers for their biggest features), they still have the option to go big.

“There is something fearless about the personality of this site. The impactful use of type and the striking yellow create an experience that is branded and distinct without sacrificing on readability and scannability of the articles.”

Part

2

Branding

Inspiration from an unlikely subject

The Dreaded Blue Book

Our palms still get a little sweaty at the thought of the classic pale blue exam booklet. Pencils ready, class! But once the flashbacks stopped, we found something inspiring in the dreaded blue book.

The same book you see above found its way onto our inspiration board and played a big role in the final design. We loved how evocative the exam booklet felt even without photos. The bold rules, big type, and simple construction informed everything from the final logo to the top story treatment.

Typography

Friendly & Approachable

While the blue book inspired us, we didn’t want Hechinger to feel like taking an exam. The design called for a friendly sans serif. Approachable, but still serious enough for the subject matter. National struck precisely the right balance.

For contrast, we searched for a chunky, bold serif. Enter Tiempos. Klim Type Foundry’s flagship typeface provided the perfect foil, particularly because both typefaces were penned by the same person, the magnificent Kris Sowersby.

Brand Guide

Completing the System

After developing the branding and site design, we extended the system to cover business cards, buttons, stationary, and social media (an often undervalued expression of the identity). Our extensive brand guideline book also includes alternate logo uses, a type/color guide, and instructions for how and when to use photography.

Download

Part

3

Smart
Stream

Making complex pages easy to manage

At Upstatement, we believe that a great reading experience starts with a great editing experience. That’s why we recently hosted a content management hackathon with teams from ESPN, The Verge, and National Geographic. And when Hechinger’s editors needed a simple solution to manage their complex homepage, we designed and built Stream Manager, a slick editor that seamlessly integrates with the WordPress backend.

With Stream Manager, content management problems that used to cause headaches are accomplished in a snap. Want change a story position? It’s as easy as dragging and dropping. Add a new story? No problem, the freshest stories automatically appear in your stream — and await approval before showing up on the homepage. What about pinning stories? We’ve got that covered, too. Pin a story anywhere, from the very first to the very last slot on the page.

Drag & Drop Organization

Pin Important Articles

Easily Search for a Post

Part

4

Results

Increased traffic and a happy client

We couldn’t have asked for a more passionate, dedicated team than Sarah, Davin, Matt and the gang at Hechinger Report. We’re immensely proud of the work we did together. The project started with clear goals, and we accomplished each one.

  1. Design a new identity that reflects Hechinger's distinct voice

  2. Show people who you are and what you do

  3. Help Hechinger to become a destination site

The third goal included some key performance metrics. We wanted the new design to encourage recirculation (the number of pages somebody visits after their initial page view) and to see an overall increase in traffic. In the end, we saw both go up — and by a substantial margin.

13%

Increase in page views

2x

Increase in Recirculation

“Upstatement was attentive to our goals and did a great job of figuring out how to define what we do visually. We love love love the design.”

Sarah Garland
Editor, The Hechinger Report

What We Did

  1. Research
  2. Content Strategy
  3. Design
  4. Front-End Dev
  5. CMS Development
  6. Launch