Design systems

Learning to love the constraints of a design system

4 min read
Jess Thoms
  •  Jul 16, 2019
Link copied to clipboard

Giants like IBM, Uber, and Salesforce have internalized design systems in order to build their products and brand identity at scale. They are design and development’s single point of truth, compiled of processes, guidelines, principles, repeatable UI/UX components, and internal standards. Basically, they’re rulebooks.

And while it’s widely agreed upon that constraints boost creativity, it’s rare to find someone who loves rules. Or the word governance. Or documenting all of their designs and maintaining components.

But it pays off.

Not immediately, however. The benefits show themselves once the system is established—and only if it’s been created thoughtfully, with a few key principles in mind:

  • Incorporating emotion
  • Establishing a creative North Star

Instituting thoughtful restraints

Emotions and creativity are inseparable from design systems

In his article Design Doesn’t Scale, Stanley Wood, previously the Senior Director of Design for Spotify, notes that Spotify’s challenge was literal fragmentation—a design team spread across time zones and competing projects. 

Version 1 of Spotify’s Design Guidelines

Spotify’s design system was built, in part, to address this issue. One of the system’s elements is “TUNE,” an acronym standing for: 

  • Tone
  • Usable
  • Necessary
  • Emotive

In his post, Wood explains that this four-letter acronym helped the team stay, well, in tune for the entirety of their design process.

“Looking for more ways to define quality, we recently began asking if a design is “in TUNE”, an acronym to measure all parts of the experience, including how it feels to use Spotify. This is helping to shape a strong narrative around the emotive aspects of our experience, and be mindful that the interface is the brand.” 

This design system prioritizes the emotive and creative aspect of the product, making sure it complies with brand narrative and the feeling of using Spotify. 

A design system that elevates creativity requires the use of emotion, experience, and brand narrative. All three allow for a design system that goes beyond the t UI elements and pattern libraries. 

And maybe there’s even more than emotion here. Google’s Reed Enger discussed “finding the souls” in your system onstage at Awwwards New York

He notes that the unique purpose and intention is the soul of a product element, and every element in a design system has a soul. Ensuring that elements express the soul of a system means redirecting design decisions to reflect design system principles. 

For example, when working on Trivium Art History, one of Enger’s design principles was “foster contemplation.” This led him to change typefaces—because, according to the system and principles he’d defined, the existing punchy bold typeface didn’t fit in. It was replaced with a quiet, spaced out typeface—one that was more “contemplative,” and left room for the art.

Original use of typeface MFred, which was fighting with the artwork

Redesign using Calibri Light and Optima to make the design more contemplative

The typeface’s soul needed to emit the same intention from the stated design principles.

Every design element has an intent, a purpose, and therefore a soul. Enger points out that even assigning a soul to a drop-down menu isn’t overkill, because the drop down menu has a clear intention and place within the broader product story. 

(Want to create your own design system? Check out our Design System Manager.)

Establish a creative North Star

Design systems should be more than how-to guidelines for typography and icon usage. 

Salesforce and Atlassian are leaders in pushing the boundaries of guided creativity. Similar to Enger’s “note to self” regarding contemplative design, both systems include decidedly not rigid characteristics, such as “beautiful” and “harmonious,” in their system guidelines. 

These principles are the designers’ guiding light, combining structure with familiar creative freedoms. Incorporating design principles and philosophies into system documentation helps designers incorporate and englishten the brand’s higher purpose and reasoning into the smaller design system details.

Atlassian notes five design philosophies in their design system, with the aim to “inspire creativity, and to continually push ourselves to make our products, websites and integrations better at helping people and teams be more effective.”

  1. Build trust in every interaction
  2. Connect people to collaborate better
  3. Match purpose and feel familiar
  4. Drive momentum from end to end
  5. Guide mastery for greater value

These concepts like trust, momentum, harmony, connection, and satisfaction are design principles that can be referred to by Atlassians designers to ensure their product experience makes each of these principles a reality for their users. 

The Atlassian Design System is vast, encompassing color, iconography, avatars, user experiences and hundreds of other elements. 

Additionally, the Salesforce Lightning Design System describes subjective measures to help guide experience design at Salesforce, including:

  • Clarity
  • Efficiency
  • Consistency
  • Beauty

Salesforce UX Design Architect JD Vogt explains in his article Defining Principles to Drive Design Decisions that these subjective measures help their team move forward with purpose. 

“When creating designs, we’d consciously remind ourselves that the experiences we were creating should be clear, efficient, consistent, and beautiful. When reviewing design options, we’d run it through the same gauntlet. With practice, it became easier to rationalize a decision and pick a path forward.”

Salesforce Lightning Design System Principles

Although these principles are subjective, they are crucial in making sure products and experiences are as beautiful as they are efficient.

Embrace thoughtful restraints

For those chafing at the inherent rigidity of design systems, this is a challenge to create under restraints. 

Look at the Apollo 13’s 1970 mission. An explosion during the mission caused every engineer and scientist to quickly work towards a solution in dire circumstances. NASA poured over data and potential solutions, trying and failing for two days to find an answer before finally solving the problem and saving the astronauts lives.

The Harvard Business Review pointed out that this event was a perfect example of how a shared purpose drives collaboration and creativity under extreme constraints. When a true purpose is present, anything is possible. Design systems can feel claustrophobic, but they’re not filling your lungs with carbon monoxide. Still, though, that story proves a point: frameworks, systems, and constraints can increase creative thinking. 

We’ve also seen studies showing that an abundance of resources actually hinder creativity, because being flush with tools leaves you with little incentive to use available tools in efficient ways. On the contrary, limited resources and more restraints actually forced study participants to produce more novel ideas and creative outcomes. 

Systems help channel energy towards a common goal, allowing designers to check against design principles and rules as they continue to ideate and innovate towards the end result. The rigidity of design systems can free your mind up from the humdrum tasks of organization, letting you finally focus just on the creative work

We all know that corporate creativity is always driven by a clear set of goals and a purpose. By leaning into your system and letting it guide your work towards those goals and purposes, all you’re left with is creating.

Want to read more about design systems?

0

Collaborate in real time on a digital whiteboard