Overview

In about 1500 B.C., the world's first alphabet appeared among the Semites in Canaan.* Around 750 B.C. the Greek alphabet came into existence whose letters recorded every significant sound element in a spoken language.** Yet by 2000 A.D. our design language consisted of pattern libraries with simple yet crude guidelines. Had we progressed so little in so long? I was about to change all that (not really but come with me on this journey).

Overview

In about 1500 B.C., the world's first alphabet appeared among the Semites in Canaan.* Around 750 B.C. the Greek alphabet came into existence whose letters recorded every significant sound element in a spoken language.** Yet by 2000 A.D. our design language consisted of pattern libraries with simple yet crude guidelines. Had we progressed so little in so long? I was about to change all that (not really but come with me on this journey).

Legacy Design

Legacy Design

Inheritance is the practice of passing on property, titles, debts, rights, and obligations upon someone leaving this mortal plane. At NeoGov there were multiple designers that left over the course of a few short years. A workplace egress  if you will. And because there is something visceral and personal about designing...each designer who touched a screen at NeoGov put their own stamp on it. That resulted in me inheriting quite a hodge-podge, undefined "system" of design stuff. This not a slight to any of those designers. It's just the reality of decades worth of design materials. 

Combine that legacy inheritance with the rollout of an ADA compliance initiative and well...you got quite the task. NeoGov's new designs all had to be 508c Compliant which was a hard enough job in itself. But I was tasked with building out a true design system while were building new products. This is how I did it.

Inheritance is the practice of passing on property, titles, debts, rights, and obligations upon someone leaving this mortal plane. At NeoGov there were multiple designers that left over the course of a few short years. A workplace egress  if you will. And because there is something visceral and personal about designing...each designer who touched a screen at NeoGov put their own stamp on it. That resulted in me inheriting quite a hodge-podge, undefined "system" of design stuff. This not a slight to any of those designers. It's just the reality of decades worth of design materials. 

Combine that legacy inheritance with the rollout of an ADA compliance initiative and well...you got quite the task. NeoGov's new designs all had to be 508c Compliant which was a hard enough job in itself. But I was tasked with building out a true design system while were building new products. This is how I did it.

A design system is foremost a communication tool. You're creating the basics of a design language much like an alphabet.

A design system is foremost a communication tool. You're creating the basics of a design language much like an alphabet.

The benefits of a system are to save time, automate tasks and reduce debates. Some things that create a lot of debate with designers: spacing, color, and type. Not coincidentally those are the three things that I usually build systems on.

Spacing is something that designers waste a lot of time on. The ever long debates on 20px vs. 24px are evidence enough. (Answer: its 24px) Spacing should include big and small increments needed to create spatial relationships for detailed designs. Typically I use the system of eights, where X=8 and X.5=4. We might never get into the X.5's but flexibility is important in systems.

Color brings emphasis and consistency to the forefront of most designs. But perhaps the most important part of color is...contrast. Contrast is incredibly important to people with color blindness. Two colors with the same contrast jutted up next to each other is enough to cause problems with some of our color-blind users. When making systemic color palettes you need to ensure that each jump in tint or shade meets the WCAG contrast requirements.

Typography is at the heart of most product design. Typography helps create coherent text hierarchies, and lead users through the experience. With WCAG we must be careful to use type in sizes large enough for our readers with low vision. Type and contrast play a big part in accessibility so setting those up right helps cut down on any guesswork.

The benefits of a system are to save time, automate tasks and reduce debates. Some things that create a lot of debate with designers: spacing, color, and type. Not coincidentally those are the three things that I usually build systems on.

Spacing is something that designers waste a lot of time on. The ever long debates on 20px vs. 24px are evidence enough. (Answer: its 24px) Spacing should include big and small increments needed to create spatial relationships for detailed designs. Typically I use the system of eights, where X=8 and X.5=4. We might never get into the X.5's but flexibility is important in systems.

Color brings emphasis and consistency to the forefront of most designs. But perhaps the most important part of color is...contrast. Contrast is incredibly important to people with color blindness. Two colors with the same contrast jutted up next to each other is enough to cause problems with some of our color-blind users. When making systemic color palettes you need to ensure that each jump in tint or shade meets the WCAG contrast requirements.

Typography is at the heart of most product design. Typography helps create coherent text hierarchies, and lead users through the experience. With WCAG we must be careful to use type in sizes large enough for our readers with low vision. Type and contrast play a big part in accessibility so setting those up right helps cut down on any guesswork.

Components are literally the building blocks of the products we make. They help designers automate simple screens and keep us from the wrath of our engineers . Each component is designed to solve a (usually) common UI problem, and include things such as buttons, accordions, dropdowns, etc. All of your components should be designed to work together, and doing this will bring the product together as a whole.

Using common UI components also helps with accessibility. Screen readers can recognize simple UI components and that way you don't have to use any special instructions. Now, if you do happen to neeeeed a drag and drop, sidebar, re-ordering thingamabob it's still possible. Just know that it will take a bit more extra work on the engineering side.

Components are literally the building blocks of the products we make. They help designers automate simple screens and keep us from the wrath of our engineers . Each component is designed to solve a (usually) common UI problem, and include things such as buttons, accordions, dropdowns, etc. All of your components should be designed to work together, and doing this will bring the product together as a whole.

Using common UI components also helps with accessibility. Screen readers can recognize simple UI components and that way you don't have to use any special instructions. Now, if you do happen to neeeeed a drag and drop, sidebar, re-ordering thingamabob it's still possible. Just know that it will take a bit more extra work on the engineering side.

A design system should work for you, not against you.

A design system should work for you, not against you.

Perhaps the hardest challenge of any system is putting it through its paces. A stress test if you will. For me, at NeoGov, that stress test was...tables. Yes, tables that amazing, fun, cool, hip UI element we're all dying to tackle and post to Dribbble. 

If I can be honest for a moment these tables were the bane of my existence for a month or so. I had engineers asking me about the tables. I had C-level executives asking me about the tables. I was up to my neck in tables. Our tables were complex and involved many components and elements. I don't know if I solved every one of them but close enough and launched is better than perfect and sitting in a Sketch file somewhere. Eventually, a lot of this work was put to use here: https://www.neogov.com/products/learn

Perhaps the hardest challenge of any system is putting it through its paces. A stress test if you will. For me, at NeoGov, that stress test was...tables. Yes, tables that amazing, fun, cool, hip UI element we're all dying to tackle and post to Dribbble. 

If I can be honest for a moment these tables were the bane of my existence for a month or so. I had engineers asking me about the tables. I had C-level executives asking me about the tables. I was up to my neck in tables. Our tables were complex and involved many components and elements. I don't know if I solved every one of them but close enough and launched is better than perfect and sitting in a Sketch file somewhere. Eventually, a lot of this work was put to use here: https://www.neogov.com/products/learn