Design Systems: Better UX through Defined Standards

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:

Get more writing like this

Sign up and get new writing, just like this, every other two weeks. Unsubscribe any time (I'm not a dickhead).

Latest writing

The Cost of Lies

Big Mood Machine

Simplicity is a war

The next iPhone

Working as a UX-lead

Leadership or management

Everyone should own a dog

Silence is gold

Cameras that understand

Humans, not users

Keeping AI Honest

Right to privacy

2018 in review

What’s my location?

The State of UX in 2019

Why scrap scrappy?

I’m taking a break

Organized for browsing

Stay humble, stay eager

The iPhone Franchise

Why Small Teams Win

Back to Work!

The Bullshit Web

Just keep at it

Let them eat cake

Netflix Culture

Skype

Unfoundered

Vanity Metrics

Tech is not Neutral

Productivity

Whose risk?

Why Small Teams Win

Phone Bored

Karim Rashid

Dieter Rams

Bleeding Out

Fake News is spam

Conversational Design

Dropbox

Bye bye Facebook

Cuba

The seat at the table

Givenchy

Love letters to trees

Pricing Philisophy

Specialize

Personas

Make me think

The Future of Retail

Hawaii Missile Alert

2017 review

Why Design Systems fail

What You Build

Checkout for Winners

Living a Testing Culture

What do you do?

Creative Class

How To Predict Your Future

Carpe Diem UX-designers

What´s Good Design?

Chasing Growth

Github

Medium

A Redesign

Design quotes

Enough

Why?

ARKit

Designing for Mobile

Is Less More?

Why Simple is Hard

Pricing It Perfectly

Failure, Reflect, Renew

Trusting Your Gut

Built to last

An Eye on the Future

Growth

Working with me

UX Design explained

Great user experience

Naming your icons

Conversations

Want a UX-course in your inbox? Get it for free!

close