How We Collaboratively Built a New Design System
Words: Fernando Turch & Thomas Williams, Illustrations: Tammy Lian
Several months ago, we started reviewing our design guidelines with the goal of documenting and consolidating our design language, principles, foundations and components into a design system.
Unlike typical design guidelines, our design system is a living, ever-evolving repository that also comprises live components of our user interface. These components can be used by any of our teams that build or design our digital products. The benefit of this approach is that it improves collaboration and alignment between each of our teams, and provides us with a forum to strategically think about our products’ user interface. This means we are spending less time on problems we have already solved, and more time exploring, innovating and creating better experiences.
We also felt this work was especially necessary to help us adapt to new technologies, user behaviors and content-strategy developments.
Why we needed a design system
In The Wall Street Journal’s Digital Experience & Strategy department, designers and engineers work in multidisciplinary teams. This enables us to operate with great efficiency, but working in different “rooms” presents a challenge for us to stay in alignment and retain a consistent user experience. Design guidelines help minimize inconsistencies, but they are a static resource that is not in sync with the engineering side like a design system would be. They are essential but they function as just a reference.
As a news organization, we must respond quickly to the news cycles and adapt our products to continuous and unexpected events. In addition, we present our content in many different platforms through a complex publishing system. Other companies have design systems too, but ours is a key tool to face these particular challenges.
An opportunity, not an obstacle
We approached creating our new design system in a unique and collaborative way. Instead of only having a few dedicated designers and engineers working on it from the start, we facilitated a sandbox environment where they volunteered to explore how to build our design system. This way, we were able to bring a wider group of people with diverse skills into an inclusive environment, so that each person could contribute to the initiative in an organic way. This group of people included designers and engineers from the following teams: Design, Innovation, Storytelling, New Audiences, Newsroom Tools, Web and Mobile Platforms, and Visuals.
This approach also allowed us to be more strategic during the process and think holistically, instead of focusing only on delivering individual components. The outcome of that experimentation process defined the foundation, roles and processes to build our design system.
What is in our design system
Our design system comprises two main elements:
Foundations
Design foundations are applicable to all of our digital products — think of them as the overarching brand and digital guidelines. These can be brand, visual language, tone-of-voice, formatting and guiding principles.
Product foundations are specific to a particular product(s) and provide guidelines for typography, text styles, color, icons, spacing and responsive grids.
Components
Components refer to distinctive user interface elements that are reused throughout a product — typically actionable and often convey meaning. Examples include buttons, forms, toggles, and tooltips.
Next steps
The collaborative experiment approach succeeded in proving the value of having a design system, to the extent that we now have a dedicated team specifically working on it. We have kept the original spirit of collaboration, and the project continues to benefit from contributions from people across the design and engineering teams. We believe that we’ve set a solid foundation that will enable us to design, develop and experiment with more consistency and efficiency.
Fernando Turch is the VP of Design and co-leads the Product Design Team at WSJ.
