< Back to All
Iris
Iris is a modular design system built to unify Clear Channel Outdoor’s digital products through consistent patterns, accessible design, and scalable UI components. Developed in one quarter, Iris V1 introduced a shared visual language and design foundation for future product development.
Process
Atomic Design
Iris was the first design system any of us on the team had worked on, so the process involved a lot of discovery. I chose atomic design as our framework because it helped explain the system in a way that was easy for stakeholders and the product team to understand. Atomic design follows a modular structure based on five stages: atoms, molecules, organisms, templates, and pages.
Design tokens
One of my favorite things to do is set my future self up for success. That’s why I spent at least a full week understanding and creating design tokens for Iris. I created design tokens for all of the colors, typography styles and sizing scales, and spacing / padding.
There are so many benefits that we noticed from implementing these design tokens, including
Consistency in designs
Quicker development
Minimize ambiguity
Visual Design & Accessibility
I initially proposed minimal changes to our existing visual design, but it became clear that some updates were necessary to improve accessibility and usability:
Color: The original aqua blue, used across our products, was hard to read and didn’t feel like it represented the brand well. I updated the color to “Metallic Seaweed,” a cyan-teal that balances blue’s stability and green’s optimism, evoking a calm, reliable, and unique feeling.
Typography: The previous typography used bold, uppercase headings in Proxima Nova Alt, which felt too playful for our enterprise-level software. I replaced it with Poppins for headings (a clear, versatile sans-serif) and Lato for body text (simple, legible, with a two-story “a” ideal for paragraphs).
Grid System: The original layouts lacked consistency, so I introduced a grid system to ensure better spacing, alignment, and responsive layouts for both design and development purposes.
Outcomes
An inclusive, intuitive, clean, and consistent design system
Nearing the end of Iris V1, I put together a document outlining Iris’s principles. They were things that I noticed as we worked: clean, consistent, intuitive, and inclusive. These principles seemed to come naturally to the project, and also transferred naturally back to the team. They influenced our team principles, and now are a core part of our product development organization.
Design tokens: a new way of UI development
One of the standout outcomes of Iris V1 was the introduction of design tokens. One of our teams applied them to a new marketing website, ensuring both consistency and scalability. This shift has significantly influenced how our teams now approach UI development.
Next: Integrate Iris with React App Starter
Our product development team created an app starter after Iris was initially developed. The goal of the Rapid UI App Starter was to give all of our development teams the tools to quickly stand up and manage their own UI solutions. The next step for Iris is to integrate into this solution, so that our new UIs will have Iris’s styles and components.
< Back to All