In the UX community, design systems are the talk of the town. You don’t have to search long before uncovering webinars, podcasts and articles (I know, I know). Some organizations have assigned full fledged teams to create, build and govern their company’s design system. Others have consultants, both inside and outside of the organization, to advocate for a design system’s adoption. Sounds pretty important, huh… so what are we talking about exactly?
Let me explain by highlighting the underlying problem… say your company (or client) is banging out digital products. You have a few teams of developers, perhaps a UX designer or two, maybe a creative director. Just keeping up with the core products and features has the collective team at max capacity. But the desire for new features, initiatives or innovation demands extra resources – you bring on a few contractors or maybe a digital agency to augment your staff. Before you know it, there’s noticeable differences between each product or feature. The seams between experiences are noticeable.
While the work adheres to the brand standards (kinda sorta), dissonance is creeping up across the board… visually (the execution of the standards), copy tone (the voice of the brand), the patterns a user expects (how a user completes tasks) and the behavior of the product (how it responds when interacting with). Let’s focus on a basic example, a pair of submit buttons, to illustrate the point.
At first glance, you know there’s a few obvious discrepancies in design elements, right? The cancel button is different for sure. The label is bold in Example B. But here’s the thing: there are ten differences between the two examples. Ten.
If that’s one isolated instance of an ordinary design decision, imagine how combining those decisions to solve complex problems compounds over time. And we’re talking about a static screenshot of a dynamic element. Your brand devolves with each sprint. (For all of you dying to know the variances... cancel button style, corner radius, background color, button height, font size, font weight, label casing, copy tone, padding, margin.)
Now what if a series of design decisions were intentionally made ahead of time? And what if some of the repeating, more complex elements (like forms or tabbed navigation) are reusable components? Enter the design system.
But wait, there’s more! Yes, consistency in branding has plenty of merit alone. It presents a reliable experience that builds user loyalty and maintains expectations. Yet there are a host of benefits that can significantly impact the bottom line.
While there is an upfront investment in creating a design system, future time saved can be staggering in both design and development. Imagine working on a new application — but instead of starting with a blank canvas, you have a toolkit of web components that are already on brand, customized for the needs of your users and your team. How much quicker can a designer get a feature mocked up or prototyped for user testing? And what if that same component pairs to a library of production ready code? Once a dev understands the implementation, that element is on a page within a few keystrokes.
All components are rigorously tested before seeing primetime. This means that whenever you pull that element into your code, you know it’s rock solid. Less testing on shared components means less chance of bugs for users.
The best design system is not one owned by the designers or the developers – it’s one that’s shared. By sharing responsibility and accountability for the system, designers and devs come together to maintain and evolve the system. Collaboration leads to more creativity and better output.
Through the use of design tokens, the basics of a system are captured. Take brand colors, for example. In all your applications, it can reference the same snippet of code. So two years from now when you update your brand’s typography and colors, it’s as easy as tweaking a few lines of code. Cha-ching.
I’ve attempted to highlight the problem then walk through some of the benefits, but I’ve yet to really define a design system. Not all design systems are the same because the needs of each organization are never the same. That said, let me outline a few options. Keep in mind, any and all of these can intertwine.
A style guide can be anything from a static PDF document to one that’s continually maintained and everything between. The purpose is to define the foundation of the system. Like any of these examples, the depth and specificity of the parts ties to the core objective of the system itself.
I’ve seen it all: specs layed out in chunky PDFs, and specs with dynamic demos and elaborate explanations. Google’s Material Design is incredibly in depth, including do’s and don'ts, breakdowns of a component’s anatomy, usage, behavior, gestures, actions, etc. Some systems help to reveal the overall strategy behind it by outlining things like the brand’s voice, photography style or how the brand’s vision ties to the system.
Sometimes design systems are a shared repository of code. You may use software like Storybook to visualize, maintain and customize your component library. Everytime a new component is ready, it’s added to the library.
These are toolkits built for designers. They might exist in authoring software like Sketch or Figma. They can be downloadable files, version controlled via cloud sharing or plugged into design management software like InVision’s DSM. The purpose is similar – to give designers a kit of parts to kickstart any project.
As an organization grows, the quantity of digital products grows with it. A design system is an intentional decision to keep the brand from failing its users by giving a set of useful, strategic tools to build amazing experiences. It’s a loud message that your brand cares about consistency, reliability and quality.
At Ample, we’ve had a hand in design systems for years, most notably for the digital product team at Crossroads. We’ve created a design system that’s been a huge time saver for developers as well as a highly flexible one for designers. The system was so successful that we’re currently working to enhance it due to a huge rebranding effort.
Want to talk about rolling out a design system for your organization? We’re game. Contact us today.
Sign up for our email newsletter. Nothing spammy about it. Just a monthly rundown of what we’re sharing.
