Reality Bites

Design Systems For The Real World

  • design
  • design systems

I originally gave this as a talk for a local UX design meetup a few years back. I was looking for a different presentation in my google slides the other day, and I stumbled across this one. While flipping through it a couple things came to mind. First, the talk had some moments of calamity, both my fault (my notifications to take my garbage and recycling out popping up constantly), and not my fault (the beer cycle folks pedaling by the open cargo door to the space we were in, their woooooooos! punctuating my talk). That aside, looking through the slides I thought to myself, there is still some pretty relevant content here, issues I am still dealing with, years later. If I am still struggling, chances are other people working on real world designs systems are too, so I thought I'd distill the good bits and relevant parts down to a blog post.

For last few years most of my design work has focused on Design Systems. In 2014 I found myself working for a boutique agency that focused on front-end component based design. Our usual deliverable was a pattern library full of hand-crafted components. Each one, designed responsively, with thorough internal review, neatly handed over to clients to implement into their site or product.

Making beautiful, hand-crafted design systems since 2014.

The process wasn’t always the same… some were complete new style guides, or pattern libraries from the ground up and some took existing experiences and componentized into libraries, however, each resulted in a perfect pattern library.

Perfect Pattern Libraries

I joined Airship in 2016, and I was super excited to bring my expertise in systems thinking and design to the Ship. When I started I discovered that the Product Team had an existing pattern library.

It was a pretty standard catalog of their front-end components built with Pattern Lab in code. To be honest, it was pretty similar to the shiny, libraries I had built for all sorts of clients.

However, there was some big problems.

From what I could tell, no one was using this library. It was out-of-date, with no clear plan for it’s maintenance and up keep. What’s worse… me in all my newness, every time I met a new co-worker and they asked me politely what I was working on, I would exclaim, "our pattern library!". To which most people responded, "uhhhh, what’s that?". Tumbleweeds blowing through pattern library town. No one even knew there was one. I couldn’t stop thinking… if this is how it is for Airship's pattern library, what happened to all my perfect pattern library babies when they went out in the world?

This tweet from Jina Anne came instantly to mind. Could it be true, could my perfect pattern libraries all be zombies?

So I got to thinking… a lot. About good systems, and how I could make a design system for Airship that would be usable, flexible, and adoptable. Something people could see the value in, and also get excited about.

I found inspiration and parallel in the most unlikely of places. The arguably annoying 90’s homage, Reality Bites. When I was 13 it was the coolest, it sparked in me and all my friends a love of bad boys in bands.

So for those who haven’t seen this movie or for those who have and have forgotten this movie is about a group of Gen X friends that are transitioning from college life to the struggles and problems of adulting in the real world. Struggles that range from coming out, to the loss of a loved one. Mostly it's a 90’s rom-com, which centers around the main character, Lelaina’s love triangle with Troy, (an aimless, loser, bad boy, musician), and Ben Stiller (not the actual Ben, but a character Ben plays but still basically Ben Stiller).

Tangent: I've heard people describe these characters as shit heads, and they are… but I hear people describe millennial the same, just slightly different. Sure they self-consumed, pretentious, and overly cynical for their age, but that’s not particular to Gen X or millennial, that’s just true of youth.

Just like the shit heads in Reality bites, our design systems struggle out in the real world. They suffer from some Real World Problems. In order to create a great design system you first need to identify your problems:

Real World Problems

PAIN

What does your system need to solve for?

PEOPLE

Who are the people involved, and what are their needs?

PROCESS

How is the work done?

Let's dive in a little deeper...

PAIN

Identifying the pain points

Pattern/Component Inventory:

  • Are there consistency issues?

Code Inventory:

  • How is your front-end code organized?
  • What technologies are you using?

Human Friendly:

  • How responsive are your interfaces?
  • Is it accessible?
  • What voice are you using to talk to your users?
  • Are you using animation?
PEOPLE

Identifying the people problems

Team:

  • Do you have an existing design system, pattern library or style guide?
  • Do you have design system allies?
  • Are there resource bottlenecks?

Buy In:

  • Do you need management buy in?
  • Do you need larger organizational buy in?
PROCESS

Identifying the process problems

Tools & Resources:

  • Do your designers code? Do they push pixels? Do they do both?
  • What tools are people using?
  • What resources do they need to get their work done?

Implementation:

  • What is the approval and quality assurance process you need?
  • Does your system need to work with existing processes?
  • What does automation look like for your design system?

At Airship we had (and continue to have) most if not all of these real world problems.