Design Systems: Better UX through Defined Standards

April 16, 2018

I was recently asked to help a client develop a new cohesive visual identity. Their business is growing and, in our conversations, their CEO expressed concerns regarding their coming expansions into new markets. One reason he wanted to focus on a new visual identity was was due to fears that local markets would “play around” with the visual identity and, in a year’s time, their product portfolio would be a scattered mess. He wanted to make sure that they had a brand that everyone would stick to without “exploring” their own creative agendas. *There may be a place and time for that too, but let’s agree on what colors and fonts we’ll use.

After thinking it through, it became clear that while I could help them develop a new visual identity, that alone wouldn’t ensure that all markets would follow the rules. Even with a strong style guide, there are always ways to interpret those guidelines to create branding within the brand. We want to avoid this at all costs.

I told him that while I’d love to work with them on a new visual identity, what they really need is a design system. Now, if you’re a frequent reader of design related articles on Medium, “design systems” is a phrase you’ve heard before. If not, let me briefly explain what a design system is and why it can help your organization.

Design systems broken down

A solid visual identity is a key piece in any company's marketing strategy. For this specific company, I identified a couple of vital points for their visual identity. The company's product is very text-heavy and their target audience are primarily schools. So the typography needs to work in small sizes in order to stay crystal clear on tablets, phones, and Chrome books. The colors should offer a clear set of rules for hierarchy and interaction feedback. All colors need to be WCAG AA+ compliant to be accessible for the estimated 15% of people worldwide with a wide spectrum of permanent or temporary visual, auditory, motor, and cognitive impairments.

When dealing with any digital product, the visual identity is more than just fonts and colors. It isn’t just colors and typography, but shapes and structures that form digital patterns. It is vital to make sure the brand is aligned in everything they do and create patterns that can re-used across their products. Patterns can be things like buttons, navigations, interactions, and forms. Together, these form a design system. This is not the same as a style guide, which at it’s best is a website with assets; colors, typography, buttons but - more often than not - a sad PDF that was created last minute five weeks after the agency considered the project to be delivered. A design system is a more of a living organism.

While a design system may feature the same objects as a style guide, it offers coded elements and a Sketch file (or whatever tool) with objects that are editable in content, but not in context.
This is particularly useful when you have many people, designers and developers, working on products. It’s a way of minimizing the guessing and allowing designers and developers to focus on their actual work - making great things.

With no common design language to unite the product, the user experience starts to break down, as does the design process. Design critiques become unproductive when there’s a dearth of design conventions. To create alignment within teams, there must be a shared source of truth—a place to reference official patterns and styles.

Design systems enable teams to build better products faster by making design reusable—reusability makes scale possible. This is the heart and primary value of design systems. A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.DesignBetter.co

Design systems are great for building products that stay coherent. Combined with Atomic Design, it can become a powerful and efficient way for your organization to make design work for you.

Sharing design systems

Lots of companies have started sharing their design systems online and publicly - a great way of showing for potential employees that they truly care about design! Here’s a couple I really like and that have served as great resources for me in my work:

Articles