WillowTree
Enterprise AI & foundational design system
WillowTree (Now TELUS Digital) 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
WillowTree
Enterprise AI & foundational design system
WillowTree (Now TELUS Digital) 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
Role
Product design intern
Timeline
May - Aug '25
Role
Product design intern
Timeline
May - Aug '25
Copilot
MCP AI management dashboard
I led the design of a new feature supporting the launch of MCP capabilities in Copilot. This required designing while the system itself was still evolving, with frequent iteration and ongoing updates as both matured together.
Copilot
MCP AI management dashboard
I led the design of a new feature supporting the launch of MCP capabilities in Copilot. 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.
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.
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.
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
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.
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
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.
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
Details 4
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
Details 4
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
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.