View all essays

Editorial Design is a Team Sport

Where to Eat Chinese Food in NYCscreenshot of the final project

Editorial design on the web tends to manifest in two extremes: a one-size fits all “here’s a container, fill it with content” template and gorgeous one off custom projects (you’re probably thinking Snowfall right now, but there are some great ones here). The ability for a publisher to execute projects like that is affected by so many factors: available resources, dealing with the limitations of legacy CMS’s, the relentless pace of publishing. I admit that I’ve felt pangs of jealousy when I see great editorial projects (and admiration, of course)!

Often I look at our tiny Product team of two and think, how can we possibly achieve that level of quality and to make it useful more than once? (Haha try to justify the resources for a Snowfall-esque piece gives me anxiety) A voice in my head says don’t even try to go there. 

 Over time, though, I’ve realized that it’s not about having a huge team or a pile of money to pull it off. The secret ingredient to great editorial design is the effort that designers put into fostering a collaborative environment across disciplines. 

 1. Talk It Out 

Every step in the process should facilitate communication. If you notice it doesn’t, throw it out, modify it or find a better way; there’s no excuse to say “that’s always the way we did it”. Designers, sorry to break it to you but the era of the “big reveal” is over. Slack (I know people go ON about it but it’s still worth saying) has become a key part of our process because we can quickly iterate on the idea by throwing ideas back and forth, there’s no need to wait for a formal meeting to get feedback. Constantly ask “How can we make this better? How can we make this more useful?” By working on everything in parallel — written content, illustrations, photos, design, code — the team is encouraged to communicate and make incremental improvements together. 

Desktop PrototypePresenting different ideas for integrating the map in the desktop view [link]

 Choose the design tools that best help convey your ideas. I recently picked up Sketch — not because it’s new and shiny — but because it’s trivial to create storyboards to demonstrate variations on interactions. When reviewing with the rest of the team, I could see a lightbulb go on in their heads that doesn’t happen with Photoshop comps. They asked more questions, pointed out holes in the interactions and started thinking about how their own pieces fit into the puzzle. Design work improves the more feedback we can elicit from our fellow team members. Constantly evaluate your toolset and choose the ones that are most appropriate for the task. Sometimes it’s a paper prototype and other times it can be a mockup in framer.js. Sure, it takes time to learn how to use new tools and methods, but the investment is worth it if it means your team more clearly understands what you’re trying to convey. And you need to meet your team halfway when asking for feedback; be specific about what you’re looking for and lean on their expertise. 

 2. Content is King! Or, Content Early, Content Often

That said, I’ve found that I can design theoretically in a tool like Sketch or Photoshop until the cows come home but I won’t know if it works until there’s real content paired with interactions. Designers need to push to get content into context as early on in the project as possible. Lorem ipsum is not your friend, your team is! New ideas and suggestions for improvements happen much more quickly when the whole team can see working interactions, so design in the browser as soon as the team’s agreed on a general direction. Set expectations with editors and writers to deliver at least a draft while you’re still exploring ideas.  

Mobile PrototypeContent looked alright in the Sketch prototype but was a pain to scroll with 60+ venues [link]

And don’t assume that this guideline only applies to written content. This is critical for visual assets too, especially when responsiveness is a requirement. We had the luxury of hiring an illustrator for this project, but we hadn’t nailed down exactly how the illustrations were going to be used. We had the illustrator start a month ahead of time and requested files that would give us the most flexibility: largest file size possible, layered files, transparent background. That way we weren’t boxed in when it came to figuring out how best to integrate the illustrations with text across all screens. 

3. Reduce, Reuse, Recycle  

Editorial design often falls to internal teams to execute, and I see that as a huge advantage. Rather than having to start over from scratch on every project like an outside consultant would have to do, the team works towards building institutional knowledge and skills. It gives designers an opportunity to solve problems that are very specific to the workflow and content needs of both editors and readers over a much longer period of time. Smaller, incremental iterations help reduce risk and — perhaps counterintuitively — allow for greater experimentation. 

 Over time we’ve built up a library of custom tools, styles and code through projects like the United States of Burgersbeer mapgift guide and collections. Although at first glance they seem like one-off projects, we’re always thinking about reuse; everything the Product team builds is a springboard for future features and the most successful components can be rolled back into the main site. With a consistent feedback loop, the whole team can decide what looks like success and think creatively about what can be recycled. 

4. Understand Your Limitations and Work It 

Limited resources and a deadline can actually work in the project’s favor. It enforces discipline and a laser focus on the whole team, and goes hand in hand with principle #3. If the team’s been working together for a while it’s much easier to estimate scope. Strip everything down to the most essential (without cutting corners) and prioritize the features you’re going to release (or not). Reuse and steal like crazy from previous projects. And ask “Is this truly useful or are we being overly ‘creative’”? 

 Within these limitations, the product designer still needs to evoke empathy for the user in everyone on the project. As the intermediary you’re helping to negotiate the balance between the two. Give the Editorial team choices and consequences — “we can do this and this will be the effect, or we can focus on this and it would provide XYZ.” Too often, with no deadline and lots of resources, you can end up spinning your wheels with lots of experiments but nothing gets decided and consequently released. Use the limitations to help launch. The project will be that much stronger by empowering everyone to make the decision together. 

5. Tear Down the Walls 

Paul Ford’s recent post about the dress and Buzzfeed reinforced my belief that the first four points are worth nothing without establishing a strong culture, because honest communication can’t happen without building a level of trust. 

 One of the easiest ways of doing this is actually spending “non-work” time together. Parents — don’t worry, I’m not talking about spending all the free time you don’t have with your colleagues. Coffee or tea or a meal together away from desks during working hours can spark discussion. (Yes, this is Work with a capital W.) This is critical, I’m not joking : the more time you spend building relationships across teams so you can be honest with one another, the better it is for communication and thus the projects you’re working on. The team develops a shorthand for communicating that can only be built up over time, it’s not something that happens over night. It’s also about getting everyone excited about the aspect of the project they’re working on, and when you can see how your piece fits into the puzzle, everything clicks and you can move together towards the same goal. This should be taken as a team wide responsibility and not just the designer’s. Break down the walls between editorial and product! Change the culture! 

Great editorial design is an artifact of Editorial and Product teams collaborating across disciplines and not based on resources alone. Designers are uniquely positioned to act as the glue across those teams. It’s a part of our responsibility to do this; in the end, isn’t our job ultimately about facilitating communication? We have to stop seeing our role as only addressing the needs of the “end user”, we also must invest our time into improving our working relationships to enable everyone on the team to produce our best work. 

Thanks to the kickass team who I worked with on the Best Chinese Food in NYC project and served as inspiration for this: MaxPaul, and Vicky!

  • Thanksgiving 2.0

    Last year the product team focused on just getting *something* together for Thanksgiving on a tight deadline, but this time we had the luxury of an existing code base to work with, a year's worth of experience making these pages, and a much longer lead…

    Shortbread: The Best Cookie

    I love that shortbread can be sweet and savory.

Featured essays

Editorial Design is a Team Sport

How designers can foster a collaborative environment Read more

Why I'm a Designer

Whenever I tell people who know me as a designer that I'm working on a restaurant, I get some puzzled looks. "Don't you make web sites or you're in tech or something? ", their expressions seem to say. Yes, and the web is simply a medium. What I'm… Read more

In Need of a Haircut

Last month we launched some updates to Serious Eats - the site hasn't had a major visual overhaul in a few years, and we wanted to address some immediate issues while working on a larger reorganization and redesign project in parallel. We weren't adding… Read more