top of page

CUE's Design System

November 2023

The challenge

CUE is one of the many products within the Stagwell Marketing portfolio. The initial challenge was to adapt and evolve the existing SMC design system to develop a tailored design system for CUE. At the time, design tokens were still in their early stages, and CUE’s brand palette was extremely limited—consisting solely of a single shade of purple alongside a grayscale range.

My dutties

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.

Information Gathering Process for Creating the CUE Design System

Gathering Information

To successfully design and implement a customized design system for CUE, I began by conducting a comprehensive discovery phase. Given that CUE was operating under the broader umbrella of Stagwell Marketing, and initially had a very limited visual identity (a single purple tone plus grayscale), the process required both strategic adaptation and creative innovation. Here's how I approached it:

​

1. Audit of Existing Design Assets and Systems

I started with a full audit of the current SMC design system to understand the existing structure, components, token architecture, and usage guidelines. This helped identify reusable patterns and components that could be directly adopted or adapted for CUE.

​

2. Stakeholder Interviews and Workshops

I conducted interviews and working sessions with key stakeholders—including product managers, engineers, brand leads, and marketing teams—to gather insights on:

  • The product’s purpose and vision

  • Target users and their needs

  • Technical constraints and platform requirements

  • Business goals and brand positioning

These sessions helped clarify where the existing SMC design system aligned with CUE’s needs and where deviations or customizations were necessary.

​

3. User Research & UX Analysis

Although the project was in early stages, I reviewed any available user data and usability reports to identify pain points, accessibility considerations, and opportunities to improve interaction flows. When data was limited, I collaborated with UX researchers to run lightweight testing or user interviews to fill the gaps.

​

4. Brand Identity Alignment

Given that CUE’s brand was still nascent, I worked closely with the brand team to define how its personality could be expressed visually—beyond just the purple color. We explored tone, typography, iconography, motion, and micro-interactions to inject more character into the product without deviating too far from SMC’s parent style.

​

5. Technical & Platform Requirements

Working closely with front-end developers, I reviewed the technical stack and design implementation pipeline (e.g., component libraries, tokens, Storybook, etc.) to ensure that whatever was designed could be effectively translated into code and maintained at scale.

​

6. Competitive & Comparative Analysis

I reviewed other tools in the same product space to evaluate design trends, common interaction models, and branding strategies. This helped ensure that the CUE design system remained competitive and user-friendly while staying true to its unique identity.

Colors

After research I proposed to add more colors to the existing palette based on the brand values

Colors
colors.png
palette1.png

Metric Marine would join our color palette, and I would expand the shades of Precision Purple.

To convince stakeholders of the proposed changes, I created a colored sketch and a presentation that compared the existing interface with the new visual direction. This quick concept effectively highlighted the potential of a more vibrant and customized design system, making it easier for stakeholders to envision the benefits of the proposed updates.

Pixel.png

Cue at that time

Projects page.png

Sketch showing new colors

Once the stakeholder approved of it I started with the re-design

Basic components

Buttons

Once the Primitives were added as tokens I started with the basic components, such as the buttons

All Buttons.png

Toast

Toast.png

Checkbox

Checkbox.png
CheckboxField.png

But suddenly, everything changed, again

Everything changed

As often happens in startups, everything changed. CUE was sold as a white-label solution, and we had to create an entirely new variant of the UI—and by “we,” I mean me. This second version will be showcased in a separate case study called Assembly.

I continued expanding the design system while simultaneously working on Assembly. I explored Figma’s new tokenization capabilities, hoping to streamline the process, but Assembly’s needs were highly specific and niche—so even those advanced features couldn’t fully ease the workload.

I was now the sole owner of two major projects.

Card

Responsive, basic for every type of card in the platform.

Basic Responsive Card.png
Admin_card.png
Basic_card.png

Screens

Screens

I redesigned the main components to improve navigation, optimize space usage, and create a more intuitive and logical interface.

8.png

By removing the side navigation panel, I freed up more space for data visualization. Since many screens were information-dense, I focused on optimizing layout and space efficiency.

Some screens still require a single side panel, whereas previously there were two. This change reduced clutter and improved focus.

Brand.png
projects1.png

I introduced hierarchy to some of the more complex card designs to improve their visual structure and internal logic.

More screens

Data vis.png
data.png

But suddenly, everything changed, again

Entering 2025 the main DS, SMC's DS was completely retokenized...

This actually gave me an opportunity.

This will continue on Part 2.

To be continued
bottom of page