The Power of Structure: A Guide to Design System Models
Design systems help organizations maintain experiential consistency across manifold products, services, and businesses. Although commonly associated with visual guidelines and component libraries, design systems are altogether different. As more corporations realize the value of design continuity, newly formed design systems teams are establishing best practices to ensure the long-term relevancy of their organizations’ design endeavors.
When multiple people engage in the same design pursuit, common questions emerge. If the answers to those questions aren’t readily available or easily understood, design consistency goes by the wayside. Enter design systems.
Though popular in contemporary design discussion, the roots of design systems run decades deep in the world of newspaper and magazine publishing. Even now, the systematized hierarchy of editorial pages is apparent, with preconfigured patterns enabling consistent placement of text and visuals.
After 2007, the influx of digital forced businesses to be more intentional about design cohesion across products and platforms. An emphasis on visual guidelines and component libraries followed, but such documents quickly calcified in the pages of PDFs and shared files. Through trial and error, the makers of modern design systems have come to view their work as living products, not static documents.
Zalando is Europe’s leading online fashion marketplace. Atlassian is regarded globally for its software development tools. Each has large product teams and complex design needs. What can be learned from their design system models?
Zalando: Collaboration as a Design System Model
Zalando is Europe’s largest online retailer of footwear and high-end streetwear. With more than 1,900 brands, its massive digital storefront is managed by a team of hundreds of designers and developers. To ensure a consistent shopping experience over such a wide collection of merchandise, the company relies on a highly structured design system.
One might think that maintaining a design system for such a high-profile brand would require strict governance and a tight circle of design decision-makers. Instead, Zalando’s approach is decidedly collaborative. Rather than view its design system as a perfect entity under threat of entropy, Zalando encourages its feature teams to contribute new ideas as needed. How does it work?
The primary objective of Zalando’s design system team (ZDS) is helping feature teams develop the components they need to make products shine. Simultaneously, ZDS ensures that the integrity of the design system isn’t compromised. In this way, ZDS is both a liaison and a safety net.
When a Zalando feature team finds itself in need of a solution at odds with the company’s design system, it submits a contribution using a simple Google Form. When a contribution ticket is received, ZDS reviews and categorizes the request for change as Light, Medium, or Heavy. Each category has its own sequence of collaborative review, design, and iteration.
Once a contribution makes it through this process and becomes a reality, the ZDS team updates the centrally shared design system portal, showcases the changes in its weekly demo, and communicates the updates to stakeholders and customers.
The simplicity of Zalando’s contribution model enables diverse voices at the company to have a say in the system’s evolution. Philosophically, Zalando views its system as a product, not merely a documentation resource meant to keep products visually aligned. From this outlook flow practical takeaways that are applicable to varied design system models:
- Governance is important, but teams that oversee design systems should be focused on the success of other teams within their organizations.
- Make the feature contribution process simple, transparent, and collaborative, and document all communication.
- Have designers and developers work together on changes to the system, thus fostering a shared system language.
- Create a checklist that ensures every update to the system addresses accessibility issues.
Atlassian: Design System Thinking Reimagined
Atlassian creates tools for software development and collaboration, like Jira and Trello.
In 2017, Atlassian rebranded and launched a site for its design guidelines. Concurrently, the company hosted a separate site dedicated to its UI components and their corresponding code examples.
With time, the two sites dovetailed, causing frustration and confusion among internal design and development teams, second-party app integration vendors, and Atlassian’s customers.
Recognizing a growing rift between design and development, Atlassian chose to rethink its approach to design systems. No longer could it treat design and development documentation as little more than a means to generating code and graphic outputs for Atlassian products. The design system had to be respected as a product in its own right.
To fully understand its problem, Atlassian underwent an external audit and issued customer satisfaction surveys. Predictably, the two sites were deemed to be misaligned and outdated. With its reputation on the line and a large ecosystem of designers, developers, and stakeholders asking for change, Atlassian acknowledged its shortcomings and set out to reimagine its design system.
At the start of August 2020, Atlassian’s design system team (ADS) launched a new site consolidating guidelines for brand, visual, content, components, and patterns.
Additionally, the ADS team:
- Migrated half of its UI components to the new system (the rest are in progress)
- Rewrote and simplified documentation throughout
- Improved search within the system
- Added click-to-copy code links
The most telling evidence of Atlassian’s maturing mindset comes from ADS Lead Designer Jennie Yip: “A common misconception about design systems is that once they’re published, they become an unchangeable source of truth. A design system is never complete. At Atlassian, we’re beginning to shift how we view our design system…into a living and breathing entity.”
5 Design System Principles Worth Remembering
Today’s cutting edge is tomorrow’s dull blade—a problem that permeates all design disciplines. Tools and platforms for creating and hosting design systems are plentiful, but the rapid development of digital design makes it more profitable to think about design systems in terms of guiding principles.
1. Design systems are digital products.
Like all digital products, design systems require regular upkeep. Systems that sit dormant for long stretches will suffer disuse and decay.
2. Design systems are collaborative.
Design systems must serve the needs of stakeholders representing multiple business functions. Providing avenues for collaboration prevents systems from existing within design and engineering silos and ensures that product ideas aren’t ignored.
3. Design systems thrive on simplicity.
Design systems are a place to find answers, not garner accolades for flashy visuals, intricate animations, or witty copy. Information should be well organized, easy to navigate, and searchable, while text descriptions ought to balance context with concise instruction.
4. Design systems require communication and engagement strategies.
Teams that manage design systems need to consider how to regularly communicate updates and new features to stakeholders. Newsletters, Q&A sessions, and other outreach strategies should inform and engage: “These are the changes. This is why you should care.”
5. Design systems are centralized.
Design systems should be accessible in a single, cloud-based location. Navigating the system or obtaining assets shouldn’t require knowledge of a specific design program. And remember, publishing separate guidelines for design and development is a sure path to product dissonance.
The Power of Structural Flexibility in Design
Design systems aren’t meant to be monoliths, large and imposing, forever unchanged. Nor are they merely repositories for design components and styles. They are living, breathing products, organic endeavors that require planting and pruning. As such, they deserve dedicated teams comprised of designers who are committed to their ongoing maintenance and renewal. After all, design systems are never finished.
Ultimately, the best design systems are straightforward, collaborative, and flexible. They answer pressing design questions with clarity, welcome input from multiple stakeholders, and prioritize potent solutions over dogmatic formulas.
Let us know what you think! Please leave your thoughts, comments, and feedback below.
• • •
Further reading on the Toptal Design Blog:
Understanding the basics
How do you create a design system?
Design systems are appropriate for large organizations and teams that require experiential consistency. Therefore, creating a design system is a collaborative effort. There are various design system models. Each can be successful so long as systems are easily accessed and understood by relevant stakeholders.
What is a design system in UX?
Design systems are key to maintaining experiential cohesion in digital products. The UX of a product is diminished by inconsistent design (whether interaction, visual, or brand-related). Chief among design system best practices is hosting in a shared location that product and development teams may access.
What is in a design system?
Nearly all design system models house a combination of brand and style guidelines and interface components. Since design systems are the single source of truth for digital products, many house code examples for development teams. A split between design systems and engineering documentation is not recommended.
What is the purpose of a design system?
Often associated with visual guidelines, design systems are altogether different and meant to help organizations maintain experiential unity across products and services. One of the most important design system principles is ensuring stakeholders outside of product teams are included in decision-making.
Located in Madrid, Spain
Member since March 30, 2017
About the author
Alejandro is a seasoned digital designer who specializes in helping startups build brand identities through user interfaces.