Year: 2017
Company: NeoGov
Role: Design Lead
Methods: Interface designs, UI Annotations, UI audits, Style Guide Creation, Design QA, Design System Creation
“No passion in the world is equal to the passion to alter someone else's draft.” - H.G Wells
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.
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.
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
* (Mitchell Stephens, The Rise of the Image, the Fall of the Word. Oxford University Press, 1998)
** (Caleb Crain, "Twilight of the Books." The New Yorker, Dec. 24 & 31, 2007)
More projects
Designing for DataProduct Design
The UX of Online Food OrderingProduct Design
Here Comes the SunProduct Design
Walls of InteractivityProduct Design
Funnel DynamicsProduct Design
Simplifying the ComplexProduct Design
A House for EonsProduct Design
Doober!Product Design
Jobsite InspectorProduct Design
Designing for the HungryProduct Design
Find Your FitProduct Design
Everything ElseProduct Design
© 2022 Jonathan Brazeau
© 2022 Jonathan Brazeau
© 2022 Jonathan Brazeau
© 2022 Jonathan Brazeau