3 Principles to Build an Engineered Design System that Improves Speed, Consistency, and Accessibility

Many companies are realizing that design systems bring a multitude of benefits. A good design system enables the enterprises that adopt them to present a unified and consistent brand experience across different platforms (everything from print ads to web sites to mobile applications). They also reduce time to both design and implement new features, while ensuring a consistent user experience.

While it’s true that designers lead the creation of these design systems — a design system isn’t just design.

Design systems are also the code to translate those designs into actual experiences on mobile devices or web. As iOS Chapter Lead my job is to oversee the development of the coded components that represent the design system in an application or website.

Having a single well-tested source of truth for design system components promotes reuse of both design and code. Being able to design and implement each component once means time can be spent on developing robust, well-tested components that can be reused across applications and are easier to maintain and yield fewer bugs.

At YML we build design systems for clients across a diverse range of industries, from healthcare to retail. Similar to Brad Frost’s “Atomic Design”, our design systems begin with foundations of color, typography, spacing, iconography, and animations. From these foundations we assemble the most basic UI elements: text, buttons, inputs, links, images, and avatars. These elements form more complex components such as cards, form fields, list items and loaders. Finally, components and elements are combined to create higher level modules such as bottom sheets, modals, carousels, lists, and pop-ups.

I recently spoke at AppDevCon, a prominent technology conference in the Netherlands, about how to build engineered design systems. Below I list three key takeaways gained through years of experience engineering code components for design systems. These will be equally valuable for a Chief Digital Officer and for a lead engineer.

1. Solid foundations define a design system’s success

Despite appearing to be the simplest and most mundane, it is the foundations that deserve the most attention when engineering a design system. Time spent building the foundations correctly pays huge dividends in the long run.

This extra attention means such things as ensuring colors load correctly and that pairs of foreground and background colors meet WCAG 2.0 contrast requirements across all color modes (light and dark, regular and increased contrast).

For typography it means testing that custom fonts load correctly, render at the correct size and line height, and that they scale proportionally based on user preferences.

Building the foundation correctly was what allowed YML to make the fastest possible impact for one of our FinTech clients, a top-15 bank in the US. Our engineered design system reduced the estimated time to develop a new feature for the client by 33%.

2. Semantics everywhere

A good design system should define its foundations semantically. What this means is that foundational items should be named based on their context and intended use. For example, instead of naming colors “plum” and “mint”, they should be named as “primaryButtonBorder” or “tertiaryBackground”. This is especially important when supporting different color themes or modes because exactly which colors fulfill these roles may vary. While our “primaryContent” color might be black in light mode, it may instead be a very light gray in dark mode (and white in dark mode, increased contrast).

This applies equally to spacing and typography. Spacing can be defined according to its intended use: adding small, medium, or large amounts of padding between adjacent elements. Again the exact values (how many pixels or points) may vary depending on the breakpoints.

Typography can be defined similarly using terms such as title, headline, body, and footnote, where the exact values (font size, line height, and perhaps even font weight) may again vary depending on the breakpoints. This would allow larger screens to have larger text and more generous spacing between elements relative to smaller screens. After all, a tablet is a very different experience than a smart watch, and yet a well-crafted design system can cover both and more.

Look no further for an example of the value of being semantics-driven than YML building a scalable design system for Albertsons. We transformed their one-of-a-kind deals program and integrated it within every e-commerce touchpoint, combining 22 different mobile apps — all maintained from the same four design themes — in just six months. Since inception, our design system has averaged 18K+ weekly component inserts (or uses) across the Albertsons team and the new system includes a new point of view on color, type, bespoke icons and 150 illustrations that modernized the interface.

Explore the Albertsons case study to see more.

3. Accessibility first

Every user is different and has a unique set of needs. We should cater to as many of them as possible by supporting as many accessibility features as we can. Accessibility support covers a wide range from making sure text and graphical elements have sufficient contrast against their backgrounds (and providing even greater contrast where possible when the user has requested increased contrast) to ensuring that text and other elements scale based on the user’s preference to something as simple as building components that resize and behave correctly in landscape mode.

This type of accessibility is often added afterwards once the core functional product has been built, but with design systems it is far more critical to build in as many accessibility features at the lowest levels possible, so that everything that builds upon them can benefit. This means defining our semantic color system correctly from the beginning (and testing it to verify) and making sure that all our elements (text, inputs, buttons, etc.) support type scaling. With these lower level foundations and elements in place, every component and module built upon them automatically supports those accessibility features out of the box.

At YML we enable our clients to develop and deploy new features quickly and with a consistent and accessible user experience through the use of well-engineered and well-tested design systems.

Let’s talk about your next design systems project. Say hello.

--

About the Author: Mark Pospesel

Mark started programming in 1983 using BASIC on an Atari 800. Fast forward to the present and he has been developing for mobile platforms for 23 years and counting. Currently he's focused on design systems engineering. Mark is from the United States, but moved to Switzerland in 2017 where he enjoys hiking, skiing, and standup paddling.