CUE's Design System pt.2
March 2025
The challenges
CUE is one of many products within the Stagwell Marketing portfolio. Initially, the challenge was to retokenize it to make it easily adaptable for white-labeling across multiple instances. Although this task was originally assigned to the designer working on Stagwell Marketing’s Design System at the time, the implementation fell short. However, much needed updates were made to that DS's tokens and needed to be reflected in both Assembly’s and CUE’s design systems. This presented an opportunity for me to step in and create two flexible, white-label-ready design systems for Assembly and CUE.
Another ongoing challenge has been the continuous improvement of the platform, which now includes the introduction of a fully integrated dark mode.
My role and dutties
As the Principal UX/UI Designer, I was responsible for leading the creation of CUE’s Design System. This involved building upon and adapting the existing SMC design system to suit CUE’s unique product needs. My tasks included designing and documenting ad hoc components, refining interaction patterns, and modifying the color palette to infuse the interface with a distinct personality while maintaining brand alignment. In addition, I conducted usability evaluations, collaborated closely with developers to ensure pixel-perfect implementation, and maintained design consistency across multiple platforms. I also worked cross-functionally with product managers and stakeholders to align design decisions with business goals and user needs.
Retokenization
I created a Primitives Palette and a "Semantic" Palette for CUE
I followed the logic implemented in SMC's DS in this step, with small changes.
The Semantic Palette would be different.
I attempted to make CUE and Assembly interchangeable, but differences in their color logic made this approach unworkable. This is also what made SMC's DS fall short on that aspect.
Home/ Dashboard
More screens kept being requested
Systematized UI Patterns:
Built components within a flexible design system to allow easy toggling between total audience vs. segment-specific views. Each chart is built as a Figma component with variants for states like dropdown filters and dynamic legends.
​
Hierarchy & Accessibility:
Visual hierarchy was optimized using typography, spacing, and color to draw attention to key metrics. Color contrast and chart labeling followed accessibility best practices.
Filters & Interactivity Design:
Included filter controls that allow users to narrow results by category (e.g., time, product, or demographic segment), enabling custom data exploration.
Multi-Audience Data Visualization:
All chart components were upgraded to support up to four audiences simultaneously. Each data series is color-coded and consistently labeled for clarity, enabling quick comparative analysis at a glance.
Scalable Component System:
I extended the data visualization components into scalable variants using Figma. This allowed us to dynamically update charts like bar graphs, radar charts, and stacked comparisons without losing visual integrity or readability.
Layout & Hierarchy Refinement:
I restructured the dashboard grid to maintain balanced white space and alignment, ensuring each module remains legible while supporting high information throughput.
Home/ Recently Opened
Home/ Pixels
Audience screens refined
This screen is part of the audience creation workflow, where users construct complex, multi-layered audience segments using logic operators and demographic filters. New features have been added based on user needs.
Modular Audience Logic Builder
I designed an intuitive drag-and-drop interface where users can build audiences using nested logic (AND, OR, NOT), allowing for granular control over audience definition.
Visual Hierarchy of Logic
To help users parse nested statements at a glance, the interface includes visual indicators (lines, icons, indentation) that clarify the structure of audience logic chains.
Error-Resistant Design
Validation is built in to prevent illogical combinations (e.g., mutually exclusive groups), and selections are clearly displayed in the right panel for editing or review.
This screen illustrates the interface after the user creates logical groups within their audience segment. It represents a critical state change that enhances user control over complex filters.
Group Visualization
Once the user selects multiple filters and clicks “Group,” a new container is created with clear visual boundaries to indicate logical grouping. This helps users understand how AND/OR conditions apply in nested structures.
Group Visualization
Once the user selects multiple filters and clicks “Group,” a new container is created with clear visual boundaries to indicate logical grouping. This helps users understand how AND/OR conditions apply in nested structures.
But suddenly, everything changed, again
A Dark mode was requested
Another opportunity
Continue on Part 3 - Work in Process