Design systems are used as a resource to guide consistent, scalable design decisions. Shortly after starting at Zapproved, I set out to establish a design system to address design and development challenges of a rapidly growing platform. The goal was to promote predictable interaction patterns for our users by building well documented, reusable UI components for design and development. I collaborated with the rest of the UX team as well as a front end engineer to make the system as useful as possible not just for UX, but for Engineering as well.
The platform’s current UI used a color palette that was confusing for Engineering to use because it wasn’t clear what color combinations met accessibility guidelines for color contrast. I audited the current colors and contrast ratios to identify which areas needed the most attention. After auditing the current UI and assessing how many color variations were actually needed, I used ColorBox.io and WebAIM’s contrast checker to help me build a refined color palette with predictable rules for creating color combinations that meet contrast needs.
During this phase I partnered with another UX designer who had more accessibility experience to make sure our new palette would be flexible enough while still providing appropriate color contrast. Then we reviewed the new direction with the Marketing team to make sure the platform and the marketing and branding around it aligned.
Once the new color palette was defined, I took inventory of all the different font sizes used across the platform. In order to create a clearer hierarchy and ensure all text was legible, I outlined a refined typescale by establishing the baseline size for the majority of body/copy text, then scaling down to our smallest acceptable size, and up to our largest needed size.
To reinforce the hierarchy established by the typescale, I created a spacing system to help visually group related items and sections of content. This spacing logic used a Fibonacci scale with the smallest unit starting at 4px. The smaller half of the scale was used for spacing between elements of UI components, and the larger half was used to group those components and other content into related sections. When creating the typescale and spacing rules, I reviewed my plans with the rest of the UX team to make sure the guidelines put in place would hold up when put to use in the platform.
Once the atomic foundation was in place, the rest of the UX team and I designed (or redesigned) UI components to create consistent, reusable UI elements. This offered the benefits of both shorter development time for engineers and more predictable patterns for users. When designing our UI components, the first step was always to document considerations for the component. This included its purpose, content, and intended usage. We also needed to define the visual treatment for the different states of each interactive component. Creating all of these variations in a consistent way across a system of components was a fun challenge.
To demonstrate how we might iteratively implement the design system, I created mockups of current screens in the platform illustrating the different phases of implementation. First we needed to incorporate the foundational (atomic) elements. So I showed how the UI would be impacted by just updating the color palette. By implementing the new palette I was able to bring the number of unique color values used on one example page from 20 down to 10. After that I introduced the new typescale and spacing. The final step was to update the UI components to create consistent patterns across the platform.
To inform my approach, I studied several other design systems to understand what approaches have worked for other companies. This is why I primarily followed the atomic design method to make sure we had a solid foundation in place before jumping into more complex components.
Not surprisingly, I also learned that getting buy in from the business to develop a design system is almost universally difficult. One of the most challenging aspects of this project was creating a path forward for Engineering to implement the design system in the platform. As a UX team, we eventually decided to continue creating new mockups using the new design system components to establish an aligned vision for the future of the platform, even though Engineering would continue to use the platform’s current components for the foreseeable future.
I really did enjoy getting to build a design system from the ground up. Creating a foundation of patterns and guidelines and then seeing them hold up when put to the test is incredibly satisfying.
