I began by studying best in class case studies, like those from Shopify, Atlassian, and Mailchimp. I also found some more great examples on the Design Systems Repo and skimmed through the Design Systems Handbook from InVision. Now that I saw what some of the greats looked like, I could take bits and pieces from them and build something that would serve us well.

Once  the basic building blocks were finished, I reached the Organisms and Templates stage, where I put together commonly used templates for bar graphs, tables, and our standard wrapper. My goal was to be able to drag and drop these elements so that only some minimal tweaking needed to be done for each project.

Design Systems come in all shapes and sizes: When I conducted extensive research before starting the Design System, I realized that  some elements were not needed, and some extra elements were needed.  It really depends on what your specific needs are.  For instance, since we build custom, white label applications, our color section was not as extensive as in other Design Systems.  I included a standard for success, failure, hover, inactive, and text styles, however these all depend on the project and if the client wants us to utilize their brand standards.

‍Start with the elements that are utilized the most frequently: The original reason I wanted to make a Design System was so that I could not have to custom build elements like charts and tables.  These were the most time-consuming elements, and time was better spent on research and iteration.  Having a library of components helped to streamline my design process, and once I had a sizable library, I expanded to colors, buttons, typography, and more.

Aside from the typical evolution of the Design System, the next step is to add a code section that our front-end developers can utilize.  Currently, they use their own repositories that are separate from anything that I see.  Having one unified Design System will ensure that projects are completed as efficiently as possible, and are pixel perfect to the mockup.

*Update: About 6 months after I created the design system using Adobe XD, our agency switched to Figma.  Moving the design system to the new software allowed me to re-examine all aspects and give it a touch-up.  It also gave me an opportunity to learn Figma and take advantage of new features such as Variants, which helped a lot with button and field organization.  This case study has been updated to reflect the most recent version of the design system as it looks in Figma.