Designing at scale: How industry leaders leverage design systems

4 min read
Jess Thoms
  •  Nov 21, 2017
Link copied to clipboard

Design leaders from Google, Spotify, Stealth Startup, and Gigster share their thoughts on design systems—and their predictions for the future.

In order to quickly iterate with confidence, design teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. With brand touchpoints reaching over multiple channels and platforms, consistent user experience can be assisted by leveraging a central design language.

Building a library of design patterns, rules, and UX guidelines prevent inconsistencies when shipping products at scale.

So, how are these systems implemented at scale? In conjunction—with the ever changing nature of technology—how do design systems address evolving interfaces like voice and messaging platforms?

The need for design systems

“The problem facing design today isn’t a shortage of skills or talent but that design doesn’t scale when you move from a few screens of designed components to a platform of developed patterns where adding people only complicates the problem… hence design systems.”

–Vikram Babu, Product Designer at Gigster

Design systems are a starting pointTwitter Logo.

A comprehensive design language also needs to inform the entire customer journey. Understanding the entire service design of products allows for design to be easily mapped out through all user touchpoints. Design systems allows for predictable and consistent user experience, while also evolving with a product as new technologies and platforms are interwoven.

Described perfectly by Chris Messina:

“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.”

Thinking strategically with design systems allows for a scalable framework that design teams can use as a guide to build effective products, rapidly iterating and shipping new experiences.

“Design systems provide a shared platform to create, collaborate, and build a deliberate outcome.”

Twitter Logo

Design can be scaled

“Put simply: Design systems help teams stay aligned so their output stays intentional.Twitter Logo
–Stanley Wood, Design Director at Spotify

When Stanley Wood, Design Director at Spotify, joined their design team in 2012 he was shocked at the lack of consistency in elements across Spotify’s product. When a redesign didn’t solve anything in terms of maintaining a design direction—he took it upon himself to find a solution. He posed the question: “How does a team of distributed designers, spread across different time zones, projects, and competing objectives ever find a way to work together so they can create one coherent experience?”

In 2013 a set of principles were created to align design and create a shared perspective across teams. Aware that maintaining these principles was the challenge, they evolved into Spotify’s Design Language System, GLUE (a Global Language for a Unified Experience) which is available to everyone in the company. UI toolkits for design tools that reflect the same styles and components were essential for kickstarting projects, Stanley points out.

Design systems change our perspective.Twitter Logo Instead of 2 designers looking at the same thing and unintentionally creating totally different solutions, design systems provide a shared platform to create, collaborate, and build a deliberate outcome.”

“Not only is this wonderfully more efficient but, more importantly, it helps us see things from the customer’s perspective,” says Stanley.

Tangible design at scale

Vikram Babu, Gigster’s Product Designer, is building design systems that improve communication from design to development, and standardize the usability heuristics Gigster values.

To avoid drift between designers who bring varying levels of experience and expertise to a project, Vikram’s team surveyed existing frontend frameworks and developed a Sketch Library of components that were concurrent with a React Library.

“Now we’ll regularly prototype screens where over 75% are well named and structured Sketch symbols that a developer then quickly assembles from a React Storybook.”

“In this way, we’ve automated really rote work in design and frontend development so a small team can focus on things like storyboarding and narrative experience,” adds Vikram.

A well-documented design system allows Vikram’s team to set the standard for UX processes at a high level, and easily educate other designers on their values.

Photo by @criene

How established mental models and design language informs entirely new experiences

When building the Hire app, Sara Ortloff Khoury, Director of UX Design at Google, explains how designing at scale is sometimes about ​​about increasing value for end users by leveraging existing capabilities in more focused, relevant ways to build apps on top of apps. The design team was inspired by user behavior to meet users where they already were, rather than build a completely new UI language.

By using the simple, easy to use productivity tools that Google unifies with it’s Material Design system, that increase ease of use and familiarity across their apps — Sara’s team could build an entirely new experience with the same design system.

“Our team spent hundreds of hours directly observing how teams at hundreds of companies work together to screen, interview, and recruit talent—to see first-hand where the friction is. And we also studied how jobseekers search for jobs.

We found that Google tools are commonly used throughout the recruiting process for many businesses and candidates. For example, Gmail is used to communicate with candidates and the hiring team, Google Calendar to schedule interviews, Hangouts Meet to conduct virtual interviews, Google Docs and Sheets to track candidates and process.

“Global design languages can be so effective they inspire completely new products.”

Twitter Logo

So with that research, we embraced the fact that recruiting teams love GSuite—and we built an app that met them where they are, allowing them to use the tools they already love, with the added value of the business process overlaid to close the gaps on how GSuite works as a recruiting tool.”

By building upon the existing mental models of Google’s productivity apps, and leveraging the Material Design language that had been proven and scaled globally, Sara’s team was able to launch the Hire app that brought together several apps using the same design system, for one core solution.

Sara’s team has proven that design systems which work for users can not only scale, but inspire new solutions, guaranteed to be adopted with ease.

Design languages for the future

A critical shift in design, and hence the responsibility of designers, has been the advent of voice and messaging interfaces that require robust content strategies. Chris Messina points out that this expertise has shifted from marketing, to now quickly becoming the job of design teams. While an experience designer at Uber, Chris used their internal design language and witnessed the evolution of UI design as a practice and discipline.

“The thought and effort put into design systems to help designers move quickly and coordinate is paying obvious dividends when it comes to designing product across so many varied contexts today.”

These varied contexts include designing with hidden layers and contextuality that are largely hidden to the user, especially with voice interfaces. Yet these experiences are still branded, and require thought to the future of design languages that account for such rapid change in how design is applied.

“Design never was just how it looks, but now it’s also how it sounds, how it speaks, and where it can go.” –Chris Messina, Head of Product at Stealth Startup

“Systems that start with clear motivations and principles—and quickly get into how to apply the system to the wide range of problems designers will inevitably face—provide the most value,” says Chris.

This shift also poses new questions around best practices and UX patterns for voice and messaging experiences, with an ethical and moral line beginning to form around artificial intelligence. Design languages of the future may take note from human-centred design to ensure that designers are bridging the gap between usefulness and intrusiveness.

Fascinated by the future of how design best practices will evolve with voice and AI interfaces, Sara Ortloff Khoury points out that UX professionals have a duty to deepen their knowledge of how intelligent systems actually function to ensure they solve real problems for human needs.

“To successfully provide solutions at large scale UX practitioners will have to rapidly understand and adjust to the growing impact of artificial intelligence and machine learning on product design.”

“As technology evolves and gets ‘smarter,’ it’s never been more important to be the user’s advocate,” adds Sara.

Branded experiences, no matter the interface or experience, require a knowledge of how a product or brand is intended to feel. Regardless of the technology, how an experience makes a user feel while achieving their goal should be a primary goal for design languages of the future.

This focus on intent and feeling, paired with invisible design, points to design systems that will soon need to provide a vast knowledge of contexts and explanations around how to implement a certain design principle to new technology.

“Explain the reasoning behind a system before jumping straight into implementation.” –Vikram Babu, Product Designer, Gigster

Collaborate in real time on a digital whiteboard