Design systems are a great way to create consistent experiences based on proven patterns that have tested well with users. Working at an ad agency with multiple clients creates a unique problem: How to implement a uniform design system for clients with radically different brands, content and goals?
Our team found we were coding similar components over and over for different clients. This was creating extra strain on our design and technical team to keep up with so many disparate components. I reached out to our technical director about implementing a design system in the wireframing process to help solve this issue. It was very important to me to get buy in from all departments, so I made sure to include leadership and key team members from our UX, Creative & Technical teams to help us all align around the new system.
Our team embraces the concept of Atomic Design where smaller atoms (components) are combined to create molecules and larger, more complex organisms (design patterns). We started by defining our typography stack in Figma to ensure a great reading experience across all devices. From there we established our core colors as grayscale design tokens that can easily be updated to the client’s brand color palette.
Once the smaller atoms (buttons, colors, type) were established our team began to map out the larger modular design patterns those atoms would be combined into. We started with common elements found across all of our digital products as an alpha style guide. This included tables, forms, navigation and alerts. Each component started out as a white board sketch where our cross-functional team could all collaborate to map out requirements. This allowed all stakeholders to have buy in and ensured our technical team had the right framework in place to power the design system.
Our team is already seeing benefits from implementing this design system. It is saving our UX designers significant amounts of time in the prototyping stage and was hugely helpful to unify all of the disparate Covenant Health websites under one roof. Read Case Study
Our creative team no longer has to spend as much time on rethinking common components and can focus more on applying brand imagery and messaging to proven patterns that work. Our technical team is also enjoying not having dozens of slightly different versions of forms and tables to deal with.
As we continue to scale the design system, it is important that we build upon our time tested process to building strong digital products. We begin with a foundation of research with users to understand what works. From there, we maintain open communication and collaboration between cross-functional teams to ensure the rising tide lifts all ships.