BuzzFeed

Designing For The - Insert Blue Wave Emoji Here

Trying to sift through the noise of America’s politics in 2018 is almost an exercise in futility. There’s real news, fake news, actual fake news, and a seemingly endless roster of talking heads hoping their next screaming match ends in a viral tweet.

After launching the new destination for BuzzFeed News, my team turned our attention to the upcoming Midterm election.

When tasked with designing BuzzFeed News’ Midterm election coverage, the questions we posed had more to do with society and our political climate than KPIs and OKRs.

How do we break down the complex and make it understandable for our society’s ever-decreasing attention span?

How can we leverage BuzzFeed’s brand to connect with a millennial audience who doesn’t usually vote?

The Workshop

We kicked off this project with a workshop inspired by Jake Knapp’s design sprint. The key word being “inspired” as it lasted 5 hours instead of 5 days. I would’ve loved to have a week with all of the project stakeholders and contributors but it was impossible as the news waits for nobody.

Our workshop was broken down into three phases: Understand, Define, and Decide.

Understand

I’ve never covered an election. To be honest, I hadn’t even voted in a midterm election. So we invited members of the newsroom to join our workshop to share their experience and knowledge. We discussed what BuzzFeed had done in previous elections, what worked or failed, and together identified how BuzzFeed was positioned to cover an election.

Define

After agreeing on goals and with a shared understanding of the Newsroom’s election coverage plan, we took 90 minutes to individually ideate and sketch. Based on research conducted by the tech team with BuzzFeed News readers, these ideas focused on a few themes across the site:

  • Highlight key races that have turned a few candidates into household names

  • Make it easy to know if the house is going to flip (aka Is there a Blue Wave?)

  • Give users a way to engage with the election, election results, and BuzzFeed News

BuzzFeed design workshop

Our Engineering Lead, Filipe Brandao, shares his sketches during the Define stage of the workshop.

I always love getting non-designers to sketch and draw, especially at this stage. It not only includes stakeholders in the process but also works to promote empathy and understanding. It’s a great way to get ideas from completely different points of view.

Decide

Before the workshop, I reached out to Lisa Tozzi, BuzzFeed News’ Global News Director, and asked if she would act as our Decider. This role, as the title suggests, has the final say on if an idea moves forward to be executed by our team. It was really important to me that this person be a non-designer and somebody who both the Newsroom and our News tech team respected.

Following the Define phase, each stakeholder taped their sketches to the wall according to what part of the site the idea impacted. We then each marked the sketches that we felt best accomplished our goals and asked each other questions if the sketches failed to convey the idea.

BuzzFeed design workshop

Members from both the Newsroom and Tech organizations explore the ideas.

Sketches with the most dots were moved to a separate whiteboard for the contributors to detail the idea. This stage of the workshop proved we had the right people in the room. Ideas were evaluated through engineering, design, and news lenses with Tozzi giving the final thumbs up or thumbs down.

Features

Emoji Reactions

Emoji Reactions was born out of questioning how BuzzFeed could connect with our users during the election. By leveraging our fun and personable brand, BuzzFeed engaged our audience over controversial and difficult topics in a way only we could get away with: emojis.

When designing this feature, we went back and forth on if users should be able to select any 8 emojis they want or if we should give them a selection to choose from. I think it’s critical that as designers we think about the ways our products can be abused. Even though our feature was anonymous, my team put safeguards in place that allowed us to delete submissions if they were deemed violent, threatening, hateful, or offensive.

BuzzFeed emoji reactions

Various states of the Emoji Reactions unit along with an early sketch by Plum Ertz.

BuzzFeed emoji reactions

The Emoji Reaction unit also had to be able to display horizontally for other use cases.

BuzzFeed emoji reactions

An example of the Emoji Reaction unit on the homepage of buzzfeed.com

The Emoji Reaction unit on BuzzFeed News, helping folks share what problem the US should fix ASAP.

Race Results

As part of the election, BuzzFeed needed a way to show race results. We knew from speaking to users that our audience cared about specific data points more than others. I narrowed these down in order of importance.

  1. Who’s winning or has won?

  2. What’s the winner’s party affiliation?

  3. What’s the race for?

  4. What’s the lead or margin of victory?

Question #2 being more important than #3 says a lot about our current political climate. As such, we not only included the party next to the candidate’s name but when a race was called, used the party’s primary color as the highlight.

BuzzFeed Election race results

Various states of the Race Results unit. Fun easter egg — the binary code outputs “Vote Now"

BuzzFeed Election race results

Responsiveness meant deciding which data points to keep and which to drop (like the state icon).

BuzzFeed Election race results

Here’s an example of the Race Results unit embedded into an article.

Homepage Splash

BuzzFeed’s biggest investment for the 2018 Midterm Elections was our live show. I learned during the Design Workshop that video previously cannibalized article views. As such, a key design challenge was considering how much emphasis should be given to the video during the phases on election day.

The UI needed to give our editorial and curation teams the flexibility to move content depending on election status (races called, balance of power, etc) and time of day (pre-show, during, or post). Additionally, we enabled the live video to be deprioritized to avoid losing valuable traffic to our posts.

BuzzFeed Homepage Splash sketches
BuzzFeed Homepage Splash sketches

Thank You

BuzzFeed’s coverage of the 2018 Midterm Elections helped increase the brand’s awareness and showed how a news organization can be both serious and relatable. I want to thank the following people (and many more) for helping bring this project to life by sharing their expertise, skills, and passion with me.

From the Newsroom: Lisa Tozzi, Katherine Miller, Roxanne Emadi, Maggie Schultz

From the Art Desk: Dennis Huynh, Ben King, and Chris Applegate

Tech Team: Sam Kirkland, Filipe Brandao, Plum Ertz, Jack Reid, Jamie Fradkin, Alp Ozcelik, Noga Raviv, and Kelsey Scherer

Explore Other Projects

Commerce Cards

Commerce Cards

Introducing users to their next favorite app through inventory in apps they already use.

Button Developer Sandbox

Developer Sandbox

Making it easier for Button’s partners to test their integration before launch.