A true design system is a living language. It provides the vocabulary of the brand so designers can focus on telling the story, rather than reinventing the alphabet..
A deeper look into two different design system case studies
Content Design System
ROLE: System architect, system manager, and fellow designer
The Brand
Angi (formerly known as Angie’s List) is a prominent American home services platform that connects homeowners with local service professionals. Their content educates and informs homeowners on common home projects and problems, giving them the tools and knowledge to connect to the right service professionals.
The Project
While we often think of design systems as frameworks for websites, they’re actually incredibly versatile tools for driving consistency and efficiency across the board. The content design team needed to optimize their infographic production to match the high-velocity requirements of online web articles. They also required a scalable system that would allow designers to use the same toolset to deliver visual assets for social media and PR initiatives.
From the early stages of our discovery process, I realized that we needed a design system that operated alongside the UX/UI product design system. This ensured greater flexibility and meant that visual updates would not impact the main product. I proposed a unified set of rules to keep graphics consistent, providing a logical answer to the need for a stronger, more coherent brand voice.
Decisions to be made
Styles, components, and templates to be defined based on current brand UI.
Needed from the system
Infographics: for the Content team
Pinterest Pins: for the Brand
Linkbuilding Graphics: for PR and Marketing
The Challenge
Before:
Manual process needed with copy and pasting relied on for consistency.
One-off projects creating different rules and styles resulting in the constant hunting for the most updated style or template to use.
Very limited brand color palette that worked for product but didn't allow for consistency when adding additional colors needed for custom illustrations.
Design changes, redesigns, and manual setups needed due to inconsistencies that bottlenecked process from design through QA.
The System in Action
Variable Expansion
Scalability is a core priority for me. It’s easy to build a 'right now' solution, but I believe true value comes from planning for how a project will need to evolve and adapt in the long term. Once we established a need for our additional company (HomeAdvisor) to have infographics I defined the variables so that existing Angi graphics, or newly created graphics, could be switched to the HomeAdvisor style with ease.
This took an open feedback loop between the designers using the system and myself to make sure that components were adapting properly and we minimized as much manual touches as possible. With that in place we were able to adapt graphics at speed and evolve the infographic system in a very short period of time.
Key Results
80% Time Reduction
for templated designs and design exploration as well as refined QA process
New Palettes Defined
enhancing custom illustrations and mitigating decision fatigue
Established Dialoge
with the Brand and UX teams for transparency and brand consistency
Email Design System
ROLE: Co-system architect and system manager
The Brand
Angi (formerly known as Angie’s List) is a prominent American home services platform that connects homeowners with local service professionals. The communications are sent out to home owners, service professionals, and for general marketing.
The Project
The UX team brought me in to help build a unifying design system for our communications. We needed to move away from a fragmented setup and toward something cleaner and more scalable for every team to use.
We started by auditing our existing headers and footers, then worked with stakeholders and legal to land on a unified look we could all agree on. To make it truly flexible, I built in variables for different brand styles and light/dark modes. By building this system alongside the core UX but maintaining technical independence, we ensured that visual updates to our emails without any risk of breaking the core UI.
The Challenge
Before:
Multiple teams designing emails independently with no unified brand voice to their designs.
Communication between comms teams, UX, Content, and the Brand team was minimal, creating unnecessary friction.
Outsourcing email development to a third party created a bottleneck, preventing us from iterating quickly or responding with the necessary agility.
Governing rules across emails regarding margins, spacing, and typography were not defined.
After:
A unified design system allowing for faster design time and a cleaner, stronger brand voice.
Communication was established at regular intervals to aid with changes so that all stakeholders were involved.
By creating a system in house that everyone can use, even those not as familiar with Figma could setup emails and updated could be made quickly.
Defined guidelines give the brand a more clear and direct style, saving designers time and mental fatigue.
The System in Action
Here is an example of the base template in action. Any team can plug in their copy and designs, while the system manages the heavy lifting. Notice how the theming automatically updates the headers, footers, logo, and buttons to match the brand. Since it adapts for mobile and dark mode instantly, designers no longer have to rebuild the same email three different times.
Foundational Architecture
I am incredibly proud of the foundation we established for this email system. It marked my first time architecting a framework that integrated complex multi-brand variables with adaptive light and dark modes. Although I moved on before the final rollout, I delivered a robust, scalable system designed for others to build upon successfully.
Key Results
Established
Dialoge
with the Email, UX, Content and Brand teams for transparency and brand consistency
Unified
Style
setting up basic guidelines for unified headers and footers for all emails to strengthen brand voice
Extremely Adapatable
designing a system in house with the ability to iterate email designs before they go to code