Design Systems Overview

My Life Long Obsession

The first design system I created was for my senior thesis, in 2018, during my Master’s program. I coded it in pure vanilla html, css, and javascript. I was obsessed with creating a system that could be branded. This meant that I created my own bootstrap system. You could plug in the colors, type, and spacing which would then brand every single component. 
‍

Here is a screen shot of the pattern library I developed. It helps me understand how things work for engineers to have a thorough understanding of how code works.

I have been creating design systems for companies for the last 6 years. I have developed 6 design systems in collaboration with engineering teams. These systems were created in Storybook, adapted from Bootstrap, Contentful, and custom coded from scratch.
‍

Why Design Systems Exist

My first project at big tech was on a government application. I sat in an engineering retro reviewing the user interface with one of three 15 person teams. I kindly asked the engineer to change the color of a button from red, which meant warning, to blue, which meant confirm or success. He let me know that each color was encoded directly into the html. After reviewing 10,000 lines of CSS, I realized the project had wasted a lot of time and money on a system they could never change. I helped the engineers understand how to write css and establish a style guide so that they didn’t have to keep rewriting the code base.
‍

Starting Right

The next design system I worked on was for a large bank. We were rewriting their legacy system. It was an opportunity to do things right the first time. I helped them choose a front-end library that was out of the box. They didn’t need a fully custom solution. I showed them how to brand bootstrap, set up their files, and gave them the first iteration of code in Github. 
‍

This design system had a dark mode by request of the analysts using the system. The team tested everything for WCAG compatibility which took some color and typography adjustments between modes.
‍
‍

Top 10 Do's & Absolutely Nots

After this, I started working with designers on my team on how to format their system in Figma so that they could hand off their designs to engineers. Here are my pro tips for creating a design system that will successfully be delivered.
‍

1. Use the Same Language

Designers like to use design languages that are convoluting to engineers. Use the same terms in css and html in your design system to reduce confusion. Then, make sure that everyone using the system understands the language. If you are creating design management systems for marketing, they won’t know what H2 means.
‍

2. Release Components Tied to Epics

Only roll out what is necessary for the next project. This applies to design systems that are changing over from a previous system. Don’t expect engineers to care about your components when they have a laundry list of epics to deliver. Tie the system into the epics that are being prioritized.
‍

3. Edge Cases!!!

Don’t forget your edge cases. Screen states, button states, loading times, warnings, etc. are all forgotten about in the perfect state. Designers often forget about the imperfect journey. Flush out your edge cases so that engineers don’t have to guess your intentions. 
‍

4. Accessibility

WCAG, web content accessibility guidelines, matter. As a user experience designer, you should be advocating for all of your users. Keep in mind that usability has become law in most states. Avoid being sued is a great business case.
‍

The image above displays the type color against the background. You can see that the greater the contrast the higher the pass rate. It's important to also not put pure white on black. Too high a contrast causes fatigue in the eyes.
‍

5. Show Things as a Whole

Show designs on their backgrounds and in context. Designers like to break out components like Atomic Design. They want to show off that they know how they function outside of one another. Engineers need to know how you want everything to function together. 
‍

The example above shows the modal on its own to the left. The engineers centered this on the page instead of having it ease in and remain sticky to the right of the page like in the figures on the right.
‍

6. Show the Future Future State

Reduce future cost and talk through your ideal state with engineering. We know that only a small piece of what we envisioned is getting delivered. You still need to deliver the ideal future state so that engineers know how to prepare the code for the future. Don’t waste everyone's time by only delivering a small piece of it.
‍

7. Use the Design System!

Don’t reinvent the system every time you design a new page layout. Use your components. Force yourself to be fluid. You are not a graphic designer. Ask yourself if there is a pre-existing component that could be used. You may need to tweak it to work. Make sure it doesn’t break what is already developed.  
‍

8. Don't Send Engineering Unusable Components

Don’t design unnecessary components. I know you’re probably copying and pasting from other systems. That’s ok. Do not send components to be developed that your application doesn’t need. Do not even include these into the visible system until they are necessary. Keep them to yourself.
‍

9. Responsive Design not Pixels

Responsive design is a must with all the different screen sizes out there. Test your designs in a prototype. Upload them to your different devices. If they aren’t working static, they won’t work in code. 
‍

For this banking application, we designed everything on a grid. Grids can be defined with pixel spacing without hurting the responsive design the site. Using a 12 column grid for desktop is common. 2-4 columns is recommended for mobile.
‍

10. Collaborate with Engineering on Outcomes

Whether you are familiar with code or not, you need to run new components by an engineer. Ask them if the new component is the best solution for solving your outcome. Don’t just ask them if they can do it. Engineers will approach your problem from a different angle. You will be surprised that the solution will be stronger when you work together. 
‍