TELUS Digital

Enterprise AI & foundational design system

TELUS Digital (Previously WillowTree) is a digital product consultancy working with large, complex organizations across industries. During my time there, I worked within Fuel iX, a multi-product ecosystem where teams shipped in parallel and design maturity varied across products. I worked on new workflows for Copilot, an enterprise AI chat, and tackled long-standing visual and interaction inconsistencies cross-product

Projects

🤖 MCP management dashboard

🧩 Foundational design system

Role

Product design intern

Timeline

May - Aug '25

Copilot

MCP management dashboard

I led the design of a new feature supporting the launch of MCP capabilities in Copilot AI. This required designing while the system itself was still evolving, with frequent iteration and ongoing updates as both matured together.

Problem

Cross-product AI was being launched for the first time, but without any existing way to manage access or understand how interactions would occur across products.

Solution

I designed a net-new MCP management dashboard to support the launch of cross-product AI. The experience centralizes access visibility and AI interaction details.

Final designs

Final designs and prototypes showcasing the refined visual and interaction system in action, highlighting workflows and features.

Final designs

Final designs and prototypes showcasing the refined visual and interaction system in action, highlighting workflows and features.

Motion as system feedback

Movement was core to this design. High-fidelity prototypes explored how admins move between integrations, the marketplace, and app usage. Smooth, continuous transitions kept context while making the system feel fast and responsive.

AI activity log

Admins can monitor individual/team usage of connected apps via MCP through a centralized, resizable panel that logs AI-initiated interactions, including the user, connected product, triggering message, and timestamp.

App marketplace & access requests

This marketplace lets admins/privileged users browse apps that can be introduced into the organization via MCP. A requests tab allows teams/members to propose new connections with context on intended use.

Cross-product

Foundational design system

In parallel with the MCP feature, I led foundational design system work for Fuel iX, spanning multiple products within a large-scale ecosystem. The focus was on defining shared foundations that enable alignment and scalability, creating a strong base for teams to build and extend components in the future. Most of my time was spent on colours.

Problem

Teams were designing in silos without shared foundations, creating subtle inconsistencies that fragmented the user experience and slowed internal alignment across products.

Solution

A shared foundational design system defining colour, typography, and other core visual primitives, supported by semantic colour and typography tokens.

Colours and gradients

I built the foundation for a unified colour system by defining 250+ primitive colours, blending Tailwind CSS with custom tones tailored to TELUS Digital’s brand. I then translated these into semantic colour tokens for consistent application across the entire Fuel iX product suite in both light and dark mode, following WCAG standards.

Colours and gradients

Defining the need for change

Revamping the design system required significant time and investment, so I audited screens across the suite, highlighting inconsistent colour and gradient usage, subtle shade differences, erroneous application and more.

Defining the need for change

I reviewed four products to audit colour usage across the suite. By tracking shared colours and their roles in each product, I compared patterns and uncovered inconsistent, seemingly random applications that revealed gaps in system-level guidance.

Key takeaways

Following the audit, I presented my findings and the need for a system-level change, along with clear first action items to move forward.

Standardize light/dark mode

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Update gradient usage errors

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Establish gradient setting rules

1. Gradient direction 2. Angle 3. Colours stops 4. Opacity

Consolidate gradients

Some colours are unused or unnecessary. Merge them into ones we want to keep.

Key takeaways

Following the audit, I presented my findings and the need for a system-level change, along with clear first action items to move forward.

Standardize light/dark mode

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Update gradient usage errors

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Establish gradient setting rules

1. Gradient direction 2. Angle 3. Colours stops 4. Opacity

Consolidate gradients

Some colours are unused or unnecessary. Merge them into ones we want to keep.

Additional initiatives

I developed a typographic system using a custom TELUS typeface, defining a clear hierarchy of headers, body, and supporting text. The scale followed a modular progression of approximately a perfect fourth.

Type and style

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Size tokens

I created primitive size tokens to unify sizing across foundational elements, mapping them to semantic values for border thickness, corner radii, shadows, and other system-level dimensions.

Documentation and guidelines

I documented the design system and its guidelines for each element, and defined a clear process for introducing future changes while maintaining consistency.

Additional initiatives

Type and style

The colours used across light and dark modes are slightly different, but lack a consistent pattern in how they vary, shifting hue, saturation, or brightness in arbitrary ways.

Size tokens

I created primitive size tokens to unify sizing across foundational elements, mapping them to semantic values for border thickness, corner radii, shadows, and other system-level dimensions.

Documentation and guidelines

I documented the design system and its guidelines for each element, and defined a clear process for introducing future changes while maintaining consistency.