This case study highlights my work building cross-platform design systems and pattern libraries that support enterprise-grade product suites — specifically in the healthcare and life sciences space. From stakeholder interviews and ecosystem audits to building PoCs and MVPs, it captures how I approach complex systems with clarity and a deep respect for the people using them.

✦ Introduction

When working on enterprise-scale design systems, I always start by zooming out — looking at the bigger picture of how multiple product suites connect, operate, and evolve over time. Typically, I'm part of a lean cross-functional pod: one senior from the client team, a junior from their side, and myself leading design. What makes this setup work is our shared commitment to go beyond visual kits — we dig into actual workflows, user journeys, and tech ecosystems.

The foundation is always research. Understanding the specific contexts of designers and developers across internal, vendor-side, and cross-product teams matters because each has different needs. A team building a conversational AI interface thinks differently than someone working on a supply chain content platform. So instead of starting with a generic component library, I begin with a workflow audit — understanding how and why each pattern exists.

✦ Starting with an ecosystem audit, not a component library

We map out the key systems in play — internal portals, third-party tools, and headless platforms — then conduct a detailed audit of workflows, components, and patterns in use. But instead of just capturing what exists, we ask deeper questions: Why was this layout chosen? What friction points do users face? Are these patterns optimised for how and where users actually work?

✦ Designing for multiple viewports

User context is everything. In manufacturing and supply chain environments, users often rely on tablets or large-format desktops on the shop floor, while quick mobile inputs are used for incident logging. Desk jobs demand robust dashboards on laptops or desktops. We also evaluate the tech proficiency of each user group — so we're designing for real-world usage, not ideal scenarios.

✦ Designing for varying use-cases across product teams & users

Sometimes it makes more sense to offer a combination of components with similar application logic, because the different needs of projects and users demand it.

Toast Messages: We identified two types in our audits — a long banner at the top center for desktop, and a bottom-right corner toast. Mobile users tend to prefer the bottom-right. Both styles exhibit similar usability benefits, so both components can be implemented — provided they're used consistently throughout the portal without mixing the two.

In-line Citations: It's not always possible for back-end teams to implement in-text citations with hover functionality for a first release. So a simpler option was designed: users click the citation number to view references in a side panel or on a separate page.

✦ Prioritising patterns over components at scale

What starts as a single component — a button, a card, an input — quickly scales into patterns in context. A card becomes a dashboard module. A table combines with filters, bulk actions, and pagination to form a complex data-management pattern. These aren't just UI clusters — they're systems of interaction.

This is why we build with reusability and modularity in mind. By tokenising even the smallest design decisions, we create atomic pieces that fit into larger, more intelligent systems. These patterns flex and scale to support everything from GenAI interactions to supply chain escalation flows — adapting to different user roles, environments, and intents without breaking consistency.

✦ Launching GenAI-focused components, patterns, and hybrid components

GenAI is reshaping how we think about design systems — it's about architecting the entire system to support GenAI logic and behavior at scale. One key principle: helping users visually distinguish between automated flows and GenAI-driven actions, so they can understand what's happening and feel confident trusting the system.

Across various GenAI use cases — conversational platforms, document generation tools, simulation systems — we've uncovered emerging pattern needs specific to each context. In a conversational AI interface, a chat bubble + system response pattern works hand-in-hand with a "model system instruction" module. Casual users focus on query-response; advanced users rely on configurable system prompts to fine-tune behavior. Designing for both levels of interaction has been central to the system's flexibility.

✦ Explorations with Claude, VS Code, and agentic tooling

One of the more recent shifts in this work has been integrating agentic tools directly into the design workflow. I've been using Claude to pressure-test component logic, draft and refine design documentation, and validate naming conventions across token layers — particularly for the Figma-to-Storybook handoff pipeline.

With VS Code, I'm able to bridge the gap between token specs and implementation faster — reviewing how tokens render in production and catching discrepancies before they become systemic issues. The broader shift is using AI not just as a writing or generation tool, but as a thinking partner for systems work: mapping edge cases, auditing pattern coverage, and thinking through multi-viewport behavior before a single frame is built.

Working on something complex, ambitious, or hard to get right?
I’d love to hear what you’re building.

Most of my work sits with teams solving complex problems — where design needs to hold up as products evolve and companies scale. If that’s what you’re working on, we’ll likely get along well.

Book a call

Reach out

Book a Call