6 design system takeaways from The Washington Post
User Stories
Zeplin Crew
May 2022@zeplin
The Washington Post is one of the most recognizable names in media, with nearly a 100-year track record of groundbreaking journalism. Over 86.8 million readers visited The Washington Post’s website in February 2022 alone. 🤯 A design system ensures any content (every article, newsletter, infographic, or video) that is viewed by those millions of readers can be created easily between the design and development teams. With journalists creating new content daily, the ability to quickly and effectively push that content onto the live site is of the utmost importance.
In 2021, The Washington Post’s product team decided to rebuild their design system in order to create a more streamlined, effective handoff process. For Harmony, Zeplin’s user summit, we invited Brian Alfaro, Design Lead, and Arturo Silva, Engineering Lead, to share their insights on building a harmonious design system that strengthens the designer-developer relationship.
Creating an extensive, well-planned and collaborative design system may seem intimidating at first. See how Brian and Arturo did it with the help of Zeplin.
Accomplishing design system goals through collaboration
When Brian and Arturo set out to create a new design system for The Washington Post, they were focused on creating a system that would make everyone’s job easier and more efficient. With both the design and development teams getting bogged down from handoff and communication challenges, a design system that addressed these issues was absolutely necessary.
Designers at The Post work in Figma, which works wonderfully for them — but engineers were finding it difficult to add code and understand design intention in Figma when contributing to the project. The same was happening for designers when viewing code in GitHub.
Figma allows us to work really fast, but doesn’t allow a space for engineers to contribute. Likewise, engineers work in code and GitHub, but designers are not in that space. Zeplin provides an equal, shared space to talk about designs and development.
Brian Alfaro,Design Lead (Design systems & operations) at The Washington Post
“Art and I, we work really closely,” continues Brian, “I listen to his design considerations even though he’s a developer, and he listens to my approach on development even if it’s not the way that we’re gonna go. Even if we don’t agree all the time, it allows us to have a conversation around what we’re building and how we’re building it.”
Throughout the creation of the design system, the pair focused on creating processes influenced by input from both teams. Building the entire system up around the designer-developer relationship ensured the system was fostering collaboration and ease of use.
Adapting to challenges to stay organized and aligned
Once they gained traction with design system adoption, Brian and Arturo realized that being a one-stop shop for every component was becoming too large of a challenge. Different teams’ needs required a vast amount of components that were becoming too convoluted within the system.
“Teams were introducing their own variants of a component that wouldn’t necessarily be used by another team, like articles,” notes Arturo, “So we decided to encourage other teams to create their own sub-design systems.”
Team members began creating their own sub-systems with unique details to their own roles on top of the existing foundation. This helped streamline best practices for the entire company and gave the design system the flexibility it needs to accommodate creativity and innovation.
Key takeaways from The Washington Post’s design system
As Brian and Arturo focused on addressing the challenges the design system aimed to solve, they slowly learned what worked best to help them create an effective design system. From inception to completion, they delineated the following six key takeaways:
1.Focus on the relationship between design and development
2.Identify the values the design system will be built upon
3.Ensure seamless collaboration in integration
4.Emphasize intentional handoff processes
5.Allow other teams to create sub-design systems that contribute to the whole
6.Accept the bumps in the road
The Washington Post’s design system now effectively streamlines handoff between design and development, allowing both teams to work together and collaborate much more efficiently. Brian and Arturo were able to leverage Zeplin to build out a shared language and shared space that fosters the designer-developer relationship they were seeking to create.
"Developers and designers confidently know that when designs are published from Figma to Zeplin, there is corresponding code for developers. This is super helpful as it makes the handoff process smoother, removes uncertainty, and helps with discoverability for engineers."
Brian Alfaro,Design Lead, The Washington Post
Zeplin allows developers and designers at The Washington Post to seamlessly integrate their work with a shared space. Communication and collaboration are much easier, with the design system allowing both teams to understand where the other is at, what’s possible, and what is needed for the project next.
Looking to build out a design system at your organization? Get in touch and see how Zeplin can strengthen your team.
Fin