Building an Atomic Design System for a Rapidly Growing Startup
ALTR
A modular approach to increase scalability and strengthen design identity
Problem
ALTR is a growing security software company with a product that’s quickly expanding. Their design system was disjointed and unorganized, leading to increased design and development time as well as inconsistencies in interfaces across their platform.
As the company scaled it became clear how much time was being lost to discussions around non-standardized UI, bug fixes, and long design cycles. Customers also provided feedback that these inconsistencies would often lead to a confusing user experience when interacting with the product.
Solution
Create and transition ALTR’s existing design files onto an atomic design system that is scalable. Establish design standards in order to build a more cohesive product and reduce time from design to production.
My role
Lead UX designer in charge of reorganizing, standardizing, and componentizing all existing UI elements within our design files. Worked closely with front end engineers to update existing designs in production.
Team
Kate McCarter (Senior Director UX), Bill DiFulvio (Lead UI Engineer)
Details
August 2023 - October 2023
Software Application
62% decrease in UI related bugs post implementation of the design system
Impact
A random month was selected to compare the frequency of reported UI bugs before and after the design system implementation. When comparing the number of tickets for design system related bugs from August 2023 (before the design system) to August 2024 (after the design system) we saw a significant 62% decrease.
A Simplified Atomic Approach
Even though we’re a small team, we needed a system that was scalable and could accommodate future growth without overcomplicating our workflow. I took inspiration from Brad Frost’s atomic design principles and built a design system with three levels of increasing complexity. By starting with the smallest unit of design (an atom) and building everything out of those atomic building blocks we create a system that’s flexible, cohesive, and scalable.
Research & Preparation
Creating a solution that works for both design and development teams was of upmost importance. Before making any decisions I spent weeks auditing our current design files and meeting with engineers to understanding their current workflow and pain points.
The engineering team had been using Material UI’s design system frequently to inform and guide development. I made sure to familiarize myself with the MUI library and build the new design system in a way that would fold in seamlessly with what had already been built.
With our hodgepodge of UI elements I took measures to follow similar naming conventions and standardize component behavior harmoniously with the MUI system where possible.
Designing for Accessibility
After all existing assets were audited, I began the process of identifying and componentizing the atoms. The accessibility of each atom was carefully considered before being implemented into the design system. Principles such as color contrast, font size and legibility, proper hover/inactive states for adequate interaction feedback, and many other considerations were of upmost importance when establishing the foundation of the design system.
Building Molecules & Organisms
Once atoms were established we started standardizing the more complicated molecule and organism components. This step in particular is where I started to notice a lot of inconsistencies across the product. Without a uniform way of designing, minor differences in each iteration of a component began to add up and led to a disorganized and inconsistent UI.
Implementing Design Changes
Upon completion on the design side, we started the tedious but important process of working with our engineers to update the product with our newly reorganized assets. This involved isolating components in the live product and updating them with a componentized version built atomically as documented in the design system.
This was an extremely meticulous process that required a strong framework of communication and compromise between dev and design. Occasionally, technical complications would require a reworking of things on the design side. I found this collaborative effort between teams to be one of the most rewarding experiences of the project. I was proud of the fact that both teams walked away from the initiative with a better understanding of each other and greater respect for the work the other team performed.
Outcomes
The design system will continue to grow and evolve alongside the company’s ever-changing needs. Its enormous impact, however, can already be observed in the way designers and engineers are able to quickly and cohesively iterate on features and improvements. Since its creation we’ve noticed:
62% decrease in UI design related bugs
significantly faster design & dev cycles
a more cohesive visual brand
a scalable framework allowing for easy adaptations for new features, markets, and improvements.
Reflection & Learnings
Key Learnings
The most important thing about a successful design system is the mutual collaboration and shared vision between designers and engineers.
In practice, a scalable design system is less about the naming convention of atoms, molecules, etc and more about the understanding of how to use it and build upon it.
Design system governance (how to review, standardardize, archive, and add components within the design system as the product changes) should be treated with just as much care and importance as the initial creation of a design system.
The new design system has been in place for over a year now and I’ve gotten to witness the many ways it’s improved our workflow. I’ve also observed pain points and documented areas that could use improvement in the future. A constant curiosity to learn, grow, and iterate are qualities that I believe every strong designer should possess. I’m thankful for the opportunities I got to learn from this project and look forward to carrying these lessons with me in my future work.