Design Systems 101

One of frog’s most significant early successes was the Snow White Design System. When the iconic Apple IIc launched in 1984, it defined the aesthetic of the emerging personal computer industry, helped turn Apple into a household name, and catalyzed Steve Jobs’s visionary reputation. But Jobs was one in a billion. It was Snow White that translated his unique vision into a system that could be consistently executed by the rest of his company. In those early days, only the most pioneering and design-centric enterprises understood the value of Design Systems. Today, no organization trying to deliver innovative products at any kind of scale can function for long without one.

Today’s business landscape has convinced even the most skeptical and practically minded leaders that design is critical for winning customers’ attention and loyalty through digital products and services. But even within organizations rushing to scale their design teams and implement DesignOps, there remain fundamental misunderstandings about Design Systems. Design Systems help to translate design’s unique capabilities across the vast and complex digital landscape, functioning as the practical embodiment of an organization’s design philosophy and creating the foundation for any successful DesignOps practice.

What is a Design System?

A mature Design System is a living ecosystem of assets, tools, people and processes that work together to create harmony across products and platforms, raise confidence and familiarity with users, and save time and money for your organization. In the world of software, front-end is where users and potential buyers first experience and understand a product’s value. The primary purpose and value of a Design System is to enable great front-ends by helping organizations manage the tremendous challenges involved in creating cohesive, coherent digital experiences.

A blueprint for consistent customer experiences

Enterprises win when they provide effortless and personalized customer experiences across every touchpoint. In order to do that at little to no marginal cost, they need an entire system of digital products tailored to specific user types and customer journeys, accessible on all major platforms (web, iOS, Android). With every additional product or platform, however, operation and coordination costs increase exponentially, grinding innovation to a halt. By investing in a Design System, enterprise teams can avoid stifling development costs as they innovate around customer needs, enabling them to “own all the glass” by providing the experiences customers demand on every channel.

A product for building better products

Regardless of your industry or product, building great UX is a team sport. For organizations operating at scale, hundreds of designers and tens of thousands of developers could be collaborating on products and services at any given time. Design Systems aid this collaboration by centralizing many of the most significant coordination costs of large, cross-functional teams. By establishing systems and parameters that ensure consistency and cohesion across experiences, Design Systems allow teams to focus on shipping features that create the greatest value for users. Improved coordination increases both quality and speed to market, enabling test-and-learn cycles that realize value more rapidly and help organizations make better data-driven decisions.

How do you create a Design System?

No two enterprises have the same needs or objectives, and that means there’s no one-size-fits-all approach to creating a Design System. While there are definite phases of Design System maturity, and while all successful Design Systems take some of the same overarching factors into account, each organization’s journey toward a fully-realized Design System will be organic and unique to its own culture and mission.

Phases of Design System development

In our work with clients, we’ve observed three distinct phases of Design System maturity. Identifying which phase you’re in is a critical first step for any organization seeking to deploy their own Design System.

Phase I: Imagine
For most enterprises, the first step toward a great Design System is creating a great product. In this phase, it’s all about finding ways to solve user problems more effectively and efficiently than the competition. Once you’ve nailed this product-market fit, you will either experience or anticipate massive growth in consumer demand for your product. Demand validates both the need for and the viability of a Design System.

Phase II: Make
Once you have a winning product, its user experience can be “modularized” into its component parts. These experiential building blocks are the foundation of a user interface (UI) framework, which can be rearranged and redeployed like Lego bricks in order to help build new products and experiences. Once the UX has been modularized, the components can be “industrialized” by integrating them into existing design and development workflows, reducing friction to their adoption and use. When modularization and industrialization are accomplished, you have a nascent Design System.

Phase III: Scale
In the final phase, a cross-functional design, product, and development team implements and scales the Design System in order to support other teams in building new products and features.

The most successful organizations scale their Design System holistically, considering critical dimensions such as the overall purpose of the system, the talent and tools it requires, the processes and structures that link talent and tools together, the organizational culture the system fosters, and how its results can be measured.

A system for scalable success

When enterprises effectively leverage this approach, they’re able to unify business concerns and design processes. The Design System acts as a single source of truth for large-scale product design, providing an “automated” workflow that’s backed by modular tooling that integrates design seamlessly into the product development lifecycle.

As your products evolve, however, so must your Design System. By enhancing the entire system through ongoing governance processes along with quality, value, and version control, organizations can ensure that their Design System serves as a foundation for long-term innovation and success.