Designing For Devices Just Changed — Again
Why Design Systems have changed how designers work, and why you may need one.
Every craft is in a constant state of evolution, and the product design field is no different.
Persistent changes in materials, tools, and consumer tastes are just a few external pressures. Complexity and specialization continually modify design team structures and processes. Surrounding all of that is the organization where time to market and operational demands shape the design ecosystem, like ocean currents on a sandbar.
Often a fundamental evolution is happening right in front of us, but is mistaken as a simple change in the tool. Arguably, our tools shape us. By way of example, the Gutenberg press was more than a technical achievement, it changed how people shared ideas, and thus how humans thought.
In digital product design, over the last decade a quiet shift has been at work which has now reached a threshold crescendo. It’s the rise and standardization of something called Design Systems and it’s generating a sea-change in the digital design world.
What is a design system (exactly)?
In our digital world, we are beset by repeated elements — headlines, body copy, check boxes, buttons, entry fields, progress indicators, etc. These elements form the visual language of interfaces found on most websites and applications.
It has always been frustrating, messy, and ineffective when designers and developers reinvent the same basic elements every time an update or new feature is introduced. This was (and might still be) most prevalent in companies with multiple divisions or product lines. Sprawl happens.
Years ago, the technology world adopted en masse the concept of “create once, publish everywhere” or COPE. The designer version of this is a process for building a set of patterns and guidelines that ensure a cohesive visual language that can be deployed across an organization’s communications and its products’ user experience.
The truth is out there as attested by several high-profile organizations who have wholeheartedly embraced Design Systems. To name drop a few heavyweights, there are Microsoft’s Fluent, Shopify’s Polaris, and IBM’s Carbon.
As IBM writes, “Every point along a user’s journey needs to feel part of a holistic, branded experience and that’s where Carbon comes in.”
Brand consistency is no joke, by the way. It has a direct impact on revenue and is an important factor in a public company’s stock price. The 2021 State of Brand Consistency report by Marq (formerly Lucidpress) found that consistent branding across all channels can increase revenue by 10% to 20%.
To bring this all around, marketers use Digital Asset Management systems to affirm brand consistency across media channels. To maintain a consistent product experience– which is a brand’s digital expression — companies use Design Systems.
So let’s dive in.
1) The Core Benefits
“Show me the money!” shouted Rod Tidman in Jerry Maguire. So here are the main selling points — a list that outlines what we see as the primary benefits an organization gains for implementing a design system:
- One source of truth — across large and small organizations, maintaining a single source of brand and product information holds numerous benefits
- Improved collaboration & teamwork — working together on a living design system allows all use cases to be explored and standardized, creating a more durable product
- Increased ROI — speed up the work, reduce repetitive tasks, improve the quality of the product experience
- True consistency — repeatable elements that look and behave the same, across all digital touchpoints build trust and confidence in your brand experience
- Better scalability — once a design system is in place, the product can efficiently scale available features and functionality. Likewise, onboarding time for new employees is dramatically decreased allowing your team to scale up or down as needed
2) Anatomy of a Design System
People typically think of a design system as simply a components library and a style guide, but it encompasses a lot more. Here are five key ingredients:
Brand Guidelines
Guidelines that are often owned by the brand or marketing team. Includes how to use and apply the company logo mark, language, typographic, and color palette guidelines, as well as the approved articulation of a company’s vision
Style Guide
Contains design guidelines for a company’s visual identity in the form of interface elements and collateral material. Includes icons, colors, shapes, grids, shadows, branding elements, illustrations, custom graphic elements, etc.
Components & Pattern Library
A collection of all reusable designed elements in your digital product or touchpoints that are both interactive or static. Includes: buttons, dropdowns, navigation, radio buttons, toggles, breadcrumb navigation, form fields, etc. This includes all the variations found in an interactive interface, such as all button states.
Design Tokens
Design tokens are a way to store visual design attributes and reuse that information across different parts of a product or organization. This is valuable when a design system is applied across more than one product or platform and assures design and development continuity.
Rules & Guidelines
Sets of rules and best practices that allows a team to design consistent and coherent experiences. Includes design principles, usage guidelines, do’s & don’ts. Could also set rules around motion design, photography, audio, and video.
3) Who really benefits?
Internally, a design system works for designers because it makes work go much faster. It works for developers as it saves them time implementing and maintaining designs. It benefits the organization as a whole by not only saving money, but increasing revenue through a consistent brand experience.
Externally, a design system establishes a familiar user experience (UX) within and across products. Customers see a familiar identity no matter where they are. Once they learn how something behaves, it will never change.
Maybe that’s a new acronym — Learn Once, Repeat Everywhere (LORE)! This condition develops stickiness in your applications. It creates confidence and trust in your brand. It’s those quality touches that make life easier because the designers considered the user’s needs ahead of time.
4) How is this changing digital product design?
Google generates 4.5 billion search results on the phrase, “design system.” The universe has quickly adopted this design process because of the value that I’ve already outlined. Designers now need to step up their training and learning to assure they can deliver that value.
Implementing a Design System takes time and dedication. It changes the workflow. It changes how multiple designers collaborate. And, it requires that project managers know when and how to introduce the conversation and monitor its advancement.
Design Systems are best built in stages, not at the end when it’s too late to reap the benefits. Organizations embarking on this journey will want to work or consult with a team that has already made the mistakes when attempting to execute a Triple Lindy so they can better nail the landing.
Here are a few learnings the team at Small Planet gathered by putting in the hours and constantly reflecting on how we could do better.
- Start with a product audit and get a “state of the union” on your current design.
- Identify inconsistencies and areas of improvement in your component inventory.
- Get briefed on the organization’s current workflow and understand where it’s flexible.
- Develop an Atomic Design approach.
- Establish a naming convention with the developers for your design tokens.
- Address the smallest components and then move your way up to the largest.
- The foundations come first: colors, typography, shadows, the grid system, etc.
- Next, build your components, like buttons, dropdowns, navigation, selectors, and more.
- Coordinate across the team — project management, content creators, designers, developers, and even quality control.
- And finally, never forget — once your design system is complete, promote it… everywhere. This assures adoption.
If Marvel’s Spiderman has taught us anything it is that with great power comes great responsibility. Design systems are indeed a great power that require a proper application employing thoughtfulness, planning, and intention.
5) One more thing…
When should you consider investing in a design system? Anytime a digital property grows to the point where you have a dedicated team managing it and it’s starting to represent different capabilities of the organization.
For instance, your visual identity lives across multiple business functions — marketing, product, R&D, customer service, fulfillment, new business — and each of these core activities has slightly different needs.
If that assessment is too much to get your arms around, here’s a simple signal you’re ready for a Design System. Imagine you overhear an exchange like this:
“Hey Samantha, where is that auto-suggest search component you designed last year?”
“I don’t know. Bert moved the entire backup drive before the holidays. But really, you should ask Ernie who did the development.”
“Ernie left last month.”
Finally, let’s finish with an observation made in the recent MIT Technology Review focused on Design: At the core of design is a search for a more beautiful shape.
It is no coincidence that companies seeking to make products that are both transformational and accessible — Tesla, Apple, even IBM in its day — proclaim an elegance of surface finish as the (presumed) manifestation of an overall technological sophistication, even as they exploit the commercial value of style and status as well.
The pursuit of a more beautiful shape is a worthy one. It can increase revenue, employee satisfaction, and output. However, the first step is to assure your team (or the one you hire) has walked the path and understands how to responsibly address this new evolution in the design field. Only then can you merge with the powers of a smart Design System.
“Danny, there’s a force in the universe that makes things happen and all you have to do is get in touch with it, stop thinking, let things happen, and be the ball.”
Author Charles Erdman is a creative executive building value at the intersection of human behavior and technology. He leads and mentors cross-functional teams to design and develop superior customer experiences in the form of products, services and communications.
Small Planet creates award-winning mobile and web products. We provide full UX design, development, QA, team support, and product management services. Follow us @smallplanetapps.
