What Changes with AI … and What Keeps Us Grounded

The following best practice principles are still relevant (and should even be more valuable) in the era of AI and automation. This content also covers methods of leveraging AI to greatly improve productivity and automate previous designer > developer process bottlenecks.

View Patterns & Prototypes

created with Claude Design

Staying Grounded in Core Principles This section covers best practices, principles, and OKRs that can be used across products and teams - and provides orientation at the platform and project levels. View Design Opportunities with AI AI provides a number of opportunities to improve user research and measurement, as well as opportunities to simplify interactions and workflows with assistants and agents. View Figma, Claude, & MCP We have an opportunity with AI tools like Claude Design and MCP servers to greatly improve processes, including the hand-off, design system management, and practical pattern development. View
Core Principles

Product, Business, and Engineering Alignment

Design the Meaningful

The following are simple guidelines that I use as a reference (and to help the team) understand user needs, clarify outcomes, and measure quality.

Design critique tends to fail when it has no frame of reference. So I give it one.

Ground the Team Before Design Begins

Seven steps from problem to measured impact, then back around

Steps 1-2 build understanding.
Step 3 is design.
Steps 4-5 are development and final review.
Steps 6-7 close the loop with data and feedback.

I take into account the objective , the system around it , its constraints and tradeoffs , and a scalable, incremental path forward — grounded in evidence and shared context, so we solve the right problem.

01 · Understand problem and impact

Problem framing and user research

  • Gather early context and list the questions that need answers.
  • Group research into themes and apply 5W1H: who, what, when, where, why, how.
  • Prioritize problems by impact and give the team a grounded reference.
Output: a prioritized problem statement the team agrees on.
02 · Understand problem and impact

Context and preliminary work

  • Clarify what is needed before drawing screens.
  • Map user flows, requirements, constraints and dependencies with product and engineering.
  • Agree on what success looks like.
Output: scope, flows and open questions resolved.
03 · Design

Explore options and narrow to one approach

  • Start from existing patterns and explore a couple of options.
  • Select one approach and state its benefits and trade-offs as you go.
  • Keep the options few so decisions stay fast.
Output: one approach with its rationale written down.
04 · Develop and final review

Build and validate

  • Build a working version early and test it, preferably with customers.
  • Work with engineering during the build to resolve gaps as they appear.
  • Revise the approach when validation says so.
Output: a validated build and the changes it requires.
05 · Develop and final review

Polish and ship

  • Refine details: spacing, states, copy and accessibility.
  • Run a final review against the agreed approach.
  • Release.
Output: a shipped release.
06 · Measure

Measure

  • Adoption: are people using it?
  • Engagement: how often and how deeply?
  • User feedback: what do telemetry and further research say?
Output: evidence compared against the success criteria from step 2.
07 · Repeat

Continue to optimize with user feedback

Findings from measurement become the inputs to the next round of problem framing.
THE PROCESS CAN BE COMPRESSED
When context is known and relevant patterns are available, the steps shorten.
Context is known: steps 1-2 shrink to confirming what is already understood.
Patterns exist: step 3 starts from them, with fewer options to weigh.

Understand the “Why“

The PM heard "I want mobile" from customers, worked with engineers to make the desktop app responsive to mobile, checked the box, and moved on.

“I want mobile”
Customers ask
The request, taken at face value
PM and engineers
Make the desktop app responsive
Checked the box
Moved on, without asking why

I requested that we touch base with customers to dig into the “why“ behind this - which was related to receiving network alerts on mobile.

So, I had the team play out the scenario. With a mobile site , customers would never hear the alert coming in (no bell ringing in their pocket).

A native app would accomplish this, but timing was a factor.

So, I recommended a trade-off of allowing users to leverage existing native apps (Outlook, Slack, etc.) for notifications. That will free up real estate on the desktop experience - to improve patterns and interactions there - where most users spend most of their time.

We can make a dedicated native app a future goal in the roadmap.

Solving one problem (with design thinking) solved several.

Solve the Right Problem

I nudged the team toward a change in product strategy to fit what large enterprise customers actually wanted for GDPR workflows - full automation - based on a series of user research sessions.

PMs were wanting to take the "sticky app" approach.

Going down the wrong path would have meant low adoption (lost opportunities) and turning back from the path of a complex new feature would have been very difficult later.

Helping PMs see this from another perspective (giving customers what they actually want and need and improving adoption) would present a major value ad to the cloud platform - and the team's contribution could be SMEs for data privacy.

Secondary value-ads could have been offered, such as ServiceNow templates.

Designing with AI

Discovery, measurement, assistants, and agents

AI-Assisted Research, Discovery and Measurement

Let AI do the repetitive and time-consuming footwork for discovery - turning one-off research projects into standing signals and strong starting points.

  • Gemini or Zoom meeting transcriptions for user research sessions
  • ChatGPT for finding categorized themes from user feedback
  • Claude and ChatGPT for company, persona, and market research
  • Claude Design for generating 2-3 design options for early design ideation
  • ChatGPT/Claude for summarizing CSV data from win/loss reports, customer support logs, Slack conversations on CSM channels, etc.

Agents Change the Paradigm

The human sets goals, approves high-impact changes, and measures outcomes. Agents do the rest.

In some business processes, the goal can be embedded and the workflow completely event-driven; only flagging high impact items for human approval.

When designing for multi-agent orchestration, are we considering … ?

  • If we’re matching the right model to the right task
  • How permissions, state, and error handling affect error-free operation
  • When humans should be in the loop
  • Agent lifecycle management (versioning, ownership, rollbacks, etc.)
  • Business outcome measurement
  • Operational visibility and cost awareness
  • Drift management

Assistants and Agents Working Together

This is an example of a design for a Netflix observability tool.

Common, repetitive workflows were mapped ahead of time to provide the AI (in JSON files), the deterministic data needed to run investigations. Users choose a use case from a prompt library in an assistant (along with account ID, and time window) and the agent runs the actual investigation.

Ground the AI with Deterministic Data

The following are the investigation workflows used as deterministic data for the automated investigation project mentioned above - mapped with Claude initially - and then validated with users.

Process Improvements with AI and MCP

Design System Governance, Patterns, and Improved Hand-offs

The Bottlenecks of Translation and Multiple Reviews

The current process of managing design system implementation and updates, handling designer-developer handoffs with multiple questions and reviews, and guideline creation has always been time-consuming.

We labeled it as a ‘means to an end‘ and repeated the same laborious process for years. We now have an opportunity to improve several processes at once - with one new simple format.

MCP as the Governance Layer

The Source of Truth

If we could leverage the power of AI design tools like Claude and a MCP server (acting as the governance and design system management layer) we could go from completely probabilistic AI to AI that’s more grounded in deterministic rules.

Designers and developers would be working off of the same source of truth.

A Fast, Streamlined Process

If the process were redesigned with 3 core parts, we may be able to implement multiple improvements at once.

The design(Figma file, screenshot, or prompt in Claude Design)
The MCP Server(maintains and understands how to apply the design system and can process any designs sent to it with the correct tokens, components, layouts, behaviors, accessibility, etc.)
The Staging Server(The endpoint of the process for designers. With an engineer’s help, designers can go from idea to production-ready React pages very fast).

The team would review on a real, production-ready page, instead of a Figma simulation.

Managing the design system would be done directly on the MCP Server, instead of the traditional Figma > Storybook > Production flow. Figma won't disappear. Its role will shrink from "where the product is designed" to "where humans resolve ambiguity that agents can't efficiently resolve."

Moving Out of the Weeds

The time saved could be spent creating reusable design patterns at a higher level than components only. Guidelines at the component (atom or molecule) level are typically designer-created documentation for other designers.

Patterns become much more valuable when they’re created in a format that matches the way we all think.

Design for Where We Live

Higher-level patterns match the way we all think and work.

  • Product (Thinking in features and flows)
  • Engineers (Thinking in pages, flows, and seeing components as a means)
  • End Users (Thinking in terms of tasks and flows)
  • Designers (Matching the mindset of the user with tasks and flows)

Platform Level Patterns

An example of a use case (or platform-level) pattern would be a simple wizard that the design team wants to present in a modal. That one pattern is not a component. It’s a collection of pages and components, organized into a flow.

Modal windowLayout spacingForm fields and labelsTypography for title and subtitlesProgress BarButtons

If patterns were approached from this perspective, they would be much more understandable, practical in terms of how we think about solutions, could provide more deterministic data for the MCP Server, and may help the team move faster without compromising quality.

Start Where You Are

If there are enough skills to set up a pilot MCP Server - teams can partner at least one designer and developer to run a pilot project for one project for one release.

Review accuracy - and the additional work on the Engineers side. Despite the potential need to start slow, I believe teams will see immediate productivity enhancements.

For the embedded MCP design system, start with a pre-existing design system (eg. AirTable, Material Design, etc.) to test with. These frameworks are fully featured, vetted in many ways, will simplify setup, and - with needed branding additions - could become the production design system (post pilot).

Improving Both Strategy and Execution

Everything mentioned above comes back to 3 core areas:

A more informed strategy , grounded in data and communicated clearly to the team.
A streamlined AI process that automates repetitive work, provides automatic governance, and allows the team to shift more time toward strategy and validation.
Practical Patterns that provide a much richer and more practical match to the way we approach projects.