Strudel Design System Journey

Scalable foundations for Strudel’s AI copilot — embedded today, platform-ready tomorrow.

Speed Read In a rush?

Here's the gist.

Speed Read In a rush?

Here's the gist.

CHALLENGE

Strudel’s AI assistant, Dawn, lives inside Freshdesk, Jira, and Slack. Without a consistent design language, the experience felt fragmented and sometimes untrustworthy, exactly the opposite of what support engineers needed when handling high-stakes tickets

Process

I led the creation of Strudel’s first design system. I began with a UI audit across integrations, defined design tokens, built portable components for embeds, and introduced AI‑specific patterns such as Evidence Chips and a Verification Loop that mirrors the product’s Close‑the‑Loop behavior. I then extended the same foundations to Strudel’s upcoming standalone platform.

Takeaways

Designing for an assistant that exists inside other tools is very different from designing for a single platform. I learned how to balance host-native UI conventions with Strudel’s identity, while also planning ahead for a world where Strudel owns its full interface

Impact

The new system improved developer handoff and reduced design/build time by ~30–40%. More importantly, Dawn’s presence now feels consistent and trustworthy across all integrations, while laying the foundation for Strudel’s future dashboard product

Got more time? :)

Click the arrow to read the entire case study

Got more time? :)

Click the arrow to read the entire case study

Tools

Figma, Miro

Role

Solo Product Designer

Timeline

4 - 6 months

CLIENT

Strudel AI

YEAR

2025

COLLABORATORS

2 Frontend Engineers, 1 PM, 1 QA

Project Overview

Strudel AI builds an intelligent copilot for technical support teams. Dawn, the virtual support engineer, is powered by a proprietary small‑language model (SLM). It ingests telemetry, logs, and code changes to help diagnose and resolve issues, and it closes the loop by drafting responses, linking to Jira or Freshdesk, and confirming fixes against production signals.

At the time, Dawn appeared in multiple host tools — Freshdesk, Jira, Zendesk, and Slack — but each implementation looked slightly different. Buttons, colors, and text styles varied. Accessibility was inconsistent. AI insights did not follow a clear pattern. This slowed development and risked undermining trust in Dawn’s suggestions.

I was asked to create Strudel’s first design system that would:

Bring consistency across existing integrations
Define portable, reusable patterns for AI explanations
Meet accessibility standards for enterprise customers
Could expand into a full platform once Strudel launched its own dashboards

GM x UofM

General Motors (GM) partnered with the University of Michigan (UofM) to facilitate students' exploration and comprehension of the design of in-vehicle infotainment (IVI) systems. As part of this collaboration, we visited GM's office in Warren, MI, where we received a comprehensive design brief and gained insight into GM's IVI design process. We learned about the specific approaches taken by various GM car teams, such as those responsible for Buick, Chevrolet, and Cadillac vehicles. The given design brief :

Develop a new In-vehicle experience for the luxury car segment focusing on in-car themes.

Project Statement

Problem

Dawn didn’t feel like the same assistant everywhere. In Freshdesk, AI insights were plain text. In Jira, they looked like standard comments. In Slack, they were message blocks formatted differently again.

This fragmentation created two problems: support engineers struggled to recognize Dawn’s outputs quickly, weakening trust, and developers wasted time recreating UI elements for each host tool. For a company focused on reducing support friction, these gaps were slowing both adoption and delivery.

What did I do?

I built a two‑mode design system that works today inside host tools and tomorrow inside Strudel’s own platform.

Scope at a glance

Audited Freshdesk, Jira, Zendesk, and Slack surfaces to document inconsistencies and accessibility gaps
Established design tokens for color, typography, spacing, states, focus, and motion with host‑aware mappings
Designed portable AI components: AI Insight Card, Evidence Chips, Verification Badge, Explainability Block, and Close‑the‑Loop actions
Documented usage, do’s/don’ts, and accessibility guidance in Figma and Storybook
Extended patterns to standalone needs: navigation, tables, charts, role‑based templates

The Impact?

30–40% faster UI delivery

Reusable components and clear specs enabled teams to ship common flows significantly faster.

60–75% component reuse

High reuse across Freshdesk, Jira, and Slack ensured consistency after the first release cycle.

35–50% fewer visual regressions

A single source of tokens reduced styling drift across embedded surfaces.

25–30% fewer a11y issues

Accessibility tokens and WCAG-aligned patterns lowered QA defect counts on key screens.

1–2 days saved per feature

Storybook parity and code examples shortened design-to-dev handoff cycles.

Goal

Define a consistent visual identity for Dawn across Freshdesk, Jira, and Slack

Introduce AI-specific UI patterns to make reasoning clearer and more trustworthy
Ensure accessibility compliance for enterprise customers
Lay the groundwork for Strudel’s upcoming standalone platform

Why a Design System and Not Just Fixes?

Fixing inconsistencies one by one would only treat the symptoms. What Strudel needed was a single source of truth that designers, engineers, and product managers could all use.

A design system provided:

Consistency:

agents recognize Dawn instantly across tools

Efficiency:

engineers reuse stable parts instead of rebuilding variants

Scalability:

the same foundations power both embedded and standalone experiences

Quality:

accessibility and Close‑the‑Loop patterns are built‑in, not bolted on

Project Statement

Designing a luxury vehicle experience integrating advanced personalization, AI-driven features, and ergonomic design to enhance comfort, convenience, and safety.

Overview / Summary

General Motors gave us an assignment to create a cross-channel experience that integrates in-vehicle systems with a mobile app for the luxury segment. Our goal was to design features that enhance the driving experience without compromising safety. We focused on personalization, advanced technology, seamless integration, and safety, incorporating customizable themes, AI-driven voice assistants, and an ergonomic HUD to meet luxury user expectations and ensure a superior experience.

Problem Statement

General Motors tasked us with developing a new cross-channel experience, integrating in-vehicle systems with a mobile app, for one of three predefined customer segments: mass market, performance, and luxury. We chose to focus on the luxury segment. Our goal was to design features that appeal to luxury users, including a required in-vehicle theme feature. Therefore, we formulated the following problem statement: How can we integrate advanced, personalized features into a luxury vehicle to enhance the driving experience without compromising driver safety?

Process

This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.

Auditing existing designs

I began with a full audit of Strudel’s presence in Freshdesk, Jira, and Slack. The goal was to map inconsistencies and accessibility issues. Dawn’s insights appeared differently in each tool, making it hard for agents to recognize and trust them.

Key findings:

Button and tag styles varied widely
AI outputs inconsistent: plain text in some cases, highlighted in others
Components duplicated separately per host environment
Accessibility gaps: poor contrast, missing screen reader labels

Understanding Team Needs

I interviewed support agents, engineers, and PMs to align on what “trustworthy and fast” should mean in daily work.

What I heard

Agents need short, scannable AI insights with clear next actions
Engineers need portable, host‑aware components with tight Storybook docs
PMs want scalability so the same system extends into Strudel’s own platform

Establishing Foundations

I created tokens and rules that travel well across hosts and scale into a first‑party app.

Core tokens defined

Semantic color palette for success, warning, error, and info
Typographic hierarchy: Inter for UI, monospace for logs and telemetry
8‑point spacing grid for predictable density
Focus and accessibility tokens compliant with WCAG 2.1 AA

Building Components and Patterns

I designed portable, host‑aware components that feel native but remain distinctly Strudel.

Components and patterns

Atoms: buttons, inputs, tags, badges
Molecules: AI Insight Card, Evidence Chips, Verification Badge
Organisms: ticket detail with explainability, RCA timeline, verification panel
Patterns: Explainability Block, Verification Loop (Close‑the‑Loop: draft → link to Jira/Freshdesk → confirm), Escalation Guardrail

Bridging Design and Development

To ensure adoption, I worked closely with engineers to publish the library in Storybook. This created a reliable pipeline from design to code.

Collaboration outputs

Figma components mapped 1:1 to Storybook components
Usage and accessibility guidance for every component
Jira workflows linked to component status for visibility
Reduced rework and faster alignment across design and dev

This category details the step-by-step approach taken during the project, including research, planning, design, development, testing, and optimization phases.

Research

Conducted market research to identify existing scheduling challenges and user preferences. Defined target audience segments and outlined key features based on user needs and market trends.

Design & Prototyping

Collaborated with designers to create intuitive user interfaces and interactive prototypes. Iteratively refined designs based on user feedback to enhance usability and visual appeal.

Implementation

Leveraged agile development methodologies to build the scheduling app from the ground up. Prioritized feature development based on user feedback and technical feasibility. Implemented AI algorithms to analyze user behavior and optimize scheduling recommendations.

Testing & Optimization

Conducted rigorous testing across various devices and platforms to ensure compatibility and performance. Gathered user feedback through beta testing and iteratively optimized the app based on usability metrics and user satisfaction.

Process

Two Worlds: Embedded Today, Platform Tomorrow

Part 1 — Embedded Copilot (Current State)

When Strudel was first introduced into Freshdesk, Jira, and Slack, each integration looked inconsistent. For example, in Freshdesk (see “Before” images), insights were delivered as plain yellow text blocks with no visual hierarchy or structure. While functional, this forced agents to parse raw paragraphs of analysis, slowing comprehension and reducing trust in the system.

Problem before Redesign?

To address this, I applied a design system lens to reimagine the embedded experience. In the redesigned version (see video), Dawn’s insights appear as a structured AI Insight Card with:

Evidence Chips (logs, telemetry, commits, similar cases)

Explainability Block (clear reasoning behind suggestions)
Verification Badge (pending → verified → follow-up)
Action Row (draft reply, link to Jira, mark as verified)

Instead of isolated text, insights are now delivered through a consistent AI Insight Card across hosts, adaptable to Freshdesk, Jira, or Slack while still feeling native to each environment.

System Foundations

Tokens: Freshdesk-native palette (Green #2CB971, Orange #F59E0B, Red #E53A35, Blue #3A7BD5), system font at 14–16px, 8px spacing grid, 4–8px border radius, and Soft Shadows (1–2).
Components:
- Buttons — Primary & Secondary with hover/active states
- Chips — Logs, Telemetry, Commits, Similar Cases
- Badges — Pending, Verified, Error states
- Action Row — contextual actions (Draft Reply, Link to Jira, Mark as Verified)
Patterns:
- Explainability Block — clear “why” behind each suggestion
- Evidence Grouping — scannable chips for supporting data
- Verification States — confidence evolving from Pending → Verified

Design System Foundations

Application in Freshdesk

Outcome

Agents now see structured, scannable cards instead of raw text.
Design tokens ensure consistency across Slack, Jira, and Freshdesk while still respecting each host’s native look and feel.
The restructured card makes Strudel’s presence feel trustworthy, actionable, and embedded seamlessly.
These same foundations also pave the way for a future standalone design system, ensuring scalability.

Redesigned Interaction Video

Part 2 — Standalone Platform (Future State)

As Strudel moves toward first‑party dashboards, the same patterns scale into a comprehensive UI framework. The system supports deeper layouts, cross‑role workflows, and richer monitoring.

Platform capabilities enabled

Navigation system: sidebar, top bar, breadcrumbs
Data‑heavy components: tables, RCA timelines, monitoring charts
Role templates: agent dashboard, engineering RCA, admin metrics
Responsive grid for dashboards
Reuse of AI elements like Evidence Chips and Explainability Blocks for continuity

Impact & Takeaways

The design system improved both team velocity and agent trust.

Key outcomes

30–40% faster development using reusable components
Consistent Dawn identity across Freshdesk, Jira, Zendesk, and Slack
Higher agent confidence through explainability and verification patterns
Accessibility compliance improved QA pass rates
Smooth path to Strudel’s platform vision with minimal rework

Closing Reflection / What I learned?

Building consistency was only half the challenge. The bigger challenge was designing for two realities at once: today’s embedded assistant and tomorrow’s standalone platform. That pushed the work beyond visuals into trust, explainability, and scale.

Developer experience is user experience. Documentation drives adoption.
A design system is a living product. It evolves with the org.
Timing matters. Strudel was at the right maturity for a DS.
AI needs its own rules. Evidence and explainability patterns are as critical as buttons and forms.

Ultimately, this project wasn’t about individual components but about creating a shared language. That language now makes Dawn consistent, trustworthy, and scalable, whether living inside someone else’s tool or powering Strudel’s own platform.

User research

Research Methodology

We conducted a literature review, analyzing existing research articles, reports, and publications on luxury vehicle features and user expectations.

Global car Market Overview

We Began by familiarizing ourselves with the key players in the automotive sector. Although our primary focus lies on luxury cars, it's crucial to comprehend the broader market spectrum and their respective priorities. Here is what we found:

Mass Market cars

Large center display accessible to the front passenger is a fundamental requirement.
Optional driver displays to provide cost-saving options for customers.
Emphasis on easy navigation and functionality tailored to essential features.
Prioritized functions are Audio, Maps, and Clean content options.

Luxury cars

No restrictions on screen sizes and technology.
Consideration for passenger displays to enhance the overall luxury experience.
The luxury car users care about comfort, features, and convenience above all else.
Luxury car brands use elegance, aesthetics, sound, storytelling, sensual imagery, lighting, ambiance, and lifestyle associations, to create a captivating experience.

Performance cars

Cluster and HUD screens are prioritized over center displays for performance enhancement.
Focus primarily on the driver; less concern for passenger comfort.
Gauges take precedence over audio and map functionalities.

According to market research, the luxury car market is expected to grow soon. This makes it even more important for us to keep in mind the increasing size of the market, especially because competitors are trying hard to stand out. Companies are paying close attention to how cars look, feel, and function inside. They're taking advantage of this opportunity by adding features that transform the in-car experience, like changing screen graphics, lighting, motion, and even sound.

Luxury car owners want more than just basic transportation - they're after something extra!.

The Benchmarks

Summary of Key Insights

Luxury vehicle users prioritize four main aspects: comfort, advanced features, convenience, and safety. Personalized comfort features, advanced technology, and high-quality entertainment options enhance the luxury driving experience. Seamless integration and reliable voice command systems provide convenience, while robust driver assistance systems and distraction-free interfaces ensure safety. Our design decisions, including theme customization, AI-driven personalization, and ergonomic HUD design, align with these priorities and aim to deliver a superior user experience.

Project Overview

GM x UofM

Project Statement

30–40% faster UI delivery

60–75% component reuse

35–50% fewer visual regressions

25–30% fewer a11y issues

1–2 days saved per feature

Why a Design System and Not Just Fixes?

Consistency:

Efficiency:

Scalability:

Quality:

Project Statement

Designing a luxury vehicle experience integrating advanced personalization, AI-driven features, and ergonomic design to enhance comfort, convenience, and safety.

Process

Process

Two Worlds: Embedded Today, Platform Tomorrow

Problem before Redesign?

Design System Foundations

Application in Freshdesk

Redesigned Interaction Video

Impact & Takeaways

Closing Reflection / What I learned?

User research

Summary of Key Insights

Thank you for reading my case study!