Introducing BuzzFeed’s Design Process

The word “process” appears 44 times in our roles doc — our reference for evaluating designers — and only increases its prevalence as a designer grows in seniority. So, why is having a unified process important? And, what does BuzzFeed’s design process look like? This post details the shiny new process we recently rolled out and how we’re aiming to increase the chance of our projects unfolding like the synchronized divers below.

👈 when a project goes smoothly / 👉 when a project doesn’t go smoothly

Our goal was not to enforce a new way of working, but to observe and codify what’s currently effective and create just enough structure to aid communication, clarity and transparency throughout the lifecycle of a project, both inside and outside of the design team.

A unified process provides a precise vocabulary and set of expectations to help all involved understand what’s happening and course correct early as a project unfolds — not waiting until there are polished visuals before questioning something more fundamental to the product.

A strong design process establishes a shared vocabulary and sets clear expectations to course correct early and often

The process behind the process involved plenty of research ranging from user interviews with the team to looking at approaches used in product, consulting and academic contexts. Finding the sweet spot between each led us down the path of two complementary models, one provides a macro-view while the other focuses on the micro-view of a project. While each has its strengths it’s the combination of both that I’m really excited about and that I hope will be most effective at meeting our needs.

The Phases of Product Design

Phases provide the macro-view of a design project with a focus on navigating time and clarifying expectations. Whatever stage they’re at designers should have a strong sense of what the remaining phases look like and be able to reflect on what phases they’ve been through so far, both for themselves but also to communicate with others on a project. Adapting quickly is important to how our organization functions so dealing with uncertainty is a reality we need to face. Due to this we choose an approach that highlights known knowns and known unknowns rather than forcing a designer through a specific sequence, or series of gates, ala the waterfall method.

There are five phases in the BuzzFeed Product Design Process, which break down as follows:

• Define — Know the problem and uncover as many constraints as possible
• Explore — Generate as many solutions as possible while exploring the problem space
• Refine — Validate which solutions work before distilling down the simplest design
• Build — Translate this design into reality through code or specs
• Learn — Understand whether the design was successful and what needs further work

They unfold over time:

A project doesn’t necessarily have to conform to a particular sequence but the goal of reaching Learn as quickly as possible provides a north-star and the flexibility to adapt as the realities of a project unfold after kick off. The scale on the x-axis is variable to fit any sized project, this works as well for a project lasting a week as it does for a 6-month marathon.

And here is a project showing a slightly more realistic sequence complete with the loops that each phase is made up of:

Note the overlapping phases, out of order sequence and dates on the x-axis, all helping this technique scale to a variety of projects.

The Product Design Feedback Loop

The loop provides the micro-view, it’s the atomic unit of our design process. While it also happens over time, time is much less relevant here, the focus is toward deconstructing something designers typically internalize as one fluid movement in order to pinpoint areas for clarity and growth. Think of a tennis coach deconstructing a serve, this is our toolkit for analyzing each component part and helping designers grow their capability across them.

• Gather input through observation, listening or research.
• Synthesize this input, identifying where you need to go next and what artifact will help get you there.
• Make an artifact, using an appropriate tool and level of fidelity.
• Communicate the artifact you’ve made, through the right channel, to the appropriate audience, to gather further input.

Digital product design is such a new discipline that most practitioners have learned through experience, but everyone has taken a different path and some work environments simply don’t require as much explicit communication or synthesis e.g. a solo designer without a team or manager. It’s not uncommon for inexperienced designers to jump to solutions before they’ve fully unpacked and understood a problem, or to fold in all feedback they’ve received because “my peers are smart” without practicing the skill of filtering out input that’s distracting or not inline with the goals of a project. This model provides a shared language allowing others to offer precise feedback, helping a designer grow capabilities throughout the loop.

Here’s an example of three loops that could happen during an explore phase.

As you can see, this is less of a hard science and more of a tool to reveal blind spots. While this GIF explicitly mentions tools like Sketch, the framework is intended to be tool agnostic.

What we’ve learned so far

We rolled this out to the designers in May and the wider tech team July. It’s still early but initial signs are promising, here are a few highlights:

• Our weekly crit reminder email now includes the phase each project we’re critiquing is in, helping increase the chance of delivering—and receiving—the most timely and actionable feedback.
• When a designer starts to churn on their work, the loop and phases have provided a useful tool for others to nudge them back on track. I’ve also noticed designers recognizing this for themselves, and re-calibrating their approach when enough consensus has been reached.
• Debriefing after crits has become more actionable with the loop, helping designers synthesize which input to take on board and identifying which type of artifact will be most useful to make next.
• Setting soft-skill goals and giving feedback during 1:1s has become clearer with a shared understanding of the loop. Synthesis and communication are often the largest opportunities for improvement—especially in less experienced designers—so having a shared language to discuss this through with them has resulted in significant progress in these areas across the board.
• I couldn’t publish this post without showing the scenes that unfolded in the office after we rolled this out. ❤️❤️❤️

👈 Jac prefers to make her own banner ads / 👉 Allison likes to keep humanity at the core of her process

Next Steps

This hasn’t been a radical shift, it’s a progressive enhancement. While we expect our process will evolve it’s important to have a line in the sand to move forward from, and this first version marks that moment.

Process is often unique to the organization it functions inside. While our approach might be less relevant to your team, I hope you found something valuable here. At worst, it doesn’t prove useful, at best it provides a whole new way to collaborate and ultimately raise the bar for product design in your team.

Feel free to take what’s valuable and iterate on what’s missing. I’d love to hear how you get on so why not ping me @tomharman to let me know which pieces have proven effective for you?