Building a Design System

Chloé Ferre
Chloe’s Portfolio
3 min readJan 23, 2020

Building the Design System one Component at a time

Building a design system takes a “big picture” perspective. As we build a design system piece by piece, it is important to take into account all of the different uses and possibilities of each piece. It is important to take it one component at a time. You are reading a documentation of what my design system building experience looked like.

Schedule it in Jira

First, a need is discovered by someone working on the software, usually one of the designers or developers. Sometimes it is the need for some clarification within the documentation, other times it is a matter of organization within the system, but often, it is the need for an entire new component design.

When a component needs to be updated or created in the Design System it is scheduled on the Jira board. This is how we make sure all needs are being accounted for. We pass along tasks and made sure that everything was being updated.

example of a Jira board/ to do list

Research

Designing and documenting a component takes a lot of research. Searching the web for best practices, getting a feel for how other systems do it, is one of the best ways to start our research. There are a couple websites such as the Neilsen Norman Group that have a lot of good information on general UX design practices. Another great source was the team we work with. We would do the best we could as individuals and then call for a peer review. Our team would meet together, lots of questions would be asked, always challenging assumptions, thinking of all possible options or problems that could happen. Something I learned from this process was that the best option is not always the most aesthetically pleasing route… The most important goal to accomplish is to create the best possible experience for the user. We are looking for the most simple, usable answer.

screenshot of Figma drawing board

Align it with brand

Next we take what we compiled with our research and aligned it with the brand. This is when things get more complicated. Taking all the important information we have learned and implementing it within the boundaries of the brand. The brand consists of fonts, colors, images, as well as other components within the design system.

Screenshot of a piece of the design system.

Document

Explain every bit of it, our entire process that lead us to the finished design. The goal with documentation is that we can help our readers, our fellow designers who will be wondering how and why this design was created, understand the reasons behind the design. This eliminates future questioning and saves time spent analyzing and researching each specific component over and over again.

Renditions

After we have come up with our idea of the perfect design, it is time to review more. There are always things that we may miss that will be noticed by other perspectives within the team.

--

--

Chloé Ferre
Chloé Ferre

Written by Chloé Ferre

Hi, I’m Chloé! Along with all this tech stuff, I love to be outdoors mountain biking, hiking, running or just a nice walk usually with my sisters.