Working AI integration model

The product-design operating model I architected and put into practice.

I designed and implemented this model to integrate AI across research, design systems, prototyping, delivery, quality assurance and performance measurement. I am its architect and advocate; I also enabled the team to use it through structured onboarding, office hours, practical training materials and support on live work.

Agentic research Figma Make Design-to-code AI-powered QA Performance insight

The model in practice

From isolated AI tasks to a system teams can actually use.

I created the model to connect six stages that were often treated as separate experiments: agentic research, rapid design, design-to-story and code, scalable content generation, automated quality assurance, and performance insight fed back into the next cycle.

The model is already in use and continues to evolve; the artefacts below show the implemented research workflow, design-system grounding, generated prototypes, custom tooling, code-ready output and controlled templates behind it.

I led adoption alongside implementation. I onboarded the team, ran office hours to resolve questions on live projects and created training materials that translated the model into repeatable steps, examples and review points.

Diagram showing generative AI integrated across research, design, development, validation and delivery in the product and UX design cycle — I use this model to align teams around where AI enters the design cycle, which source of truth it uses, what it produces and where human accountability remains.

Accountable ownership

I position AI as an accelerator; researchers, designers and product leaders still own the decisions.

Controlled context

I ground each workflow in approved research, brand guidance, components, tokens and product data.

Traceable output

I keep assumptions, findings, specifications, test results and KPI signals visible and reviewable.

Governed adoption

I make privacy, accessibility, security, brand and code review explicit gates in the workflow.

Team enablement

I made adoption part of the implementation.

I introduced the model through active delivery, rather than handing over a process diagram. The support structure gave the team a place to learn the workflow, apply it to current work and improve it through use.

Onboarding

Introduced the six stages, roles, source material, outputs and review responsibilities.

Office hours

Provided regular access for live questions, workflow coaching and practical problem solving.

Training materials

Created reusable guidance, worked examples and guardrails that teams could follow independently.

Agentic user research

A working research workflow with researcher judgement built in.

I have integrated agentic support into the research workflow for surveys, discussion guides, recruitment operations, scheduling, transcription and first-pass thematic analysis. The researcher still interrogates the evidence, separates severity from confidence and decides what must be validated next.

Draft and refine research instruments
Support participant operations and session records
Cluster evidence and surface themes for review
Turn findings into prioritised, testable hypotheses

Research process timeline from setup through moderated sessions, synthesis and proposed retesting — A structured research timeline keeps AI-assisted operations tied to fieldwork, synthesis and a clear validation decision.

Research findings table showing severity, task impact and evidence — Findings record severity, task impact and supporting evidence; researchers remain responsible for the conclusions.

Rapid design iteration

I made the design system the starting point for generation.

I configured the Figma Make workflow around approved brand libraries, tokens and existing components. That lets teams produce responsive variations and working prototypes quickly without inventing a parallel visual language. New patterns only enter the shared system after review.

Explore states, flows and breakpoints rapidly
Reuse tokens and components before creating new patterns
Prototype interactions with realistic content and behaviour
Review accessibility, brand and system fit before adoption

Figma Make design system output showing style-library foundations and colour tokens — Design-system foundations give generation a controlled visual and structural vocabulary.

Responsive design variations generated across multiple breakpoints — Responsive variations expose layout decisions early, before they become implementation defects.

Interactive page prototype built rapidly from an existing design system — Working prototypes make structure, content, hierarchy and motion easier to evaluate together.

Custom tools & plugins

I use the model to remove specific workflow bottlenecks.

When I identified motion specification as a recurring hand-off gap, I used an agentic development workflow to create a working Figma plugin. Prompting accelerated the build; I retained code review, permission control, documentation and QA. The result converts motion decisions into reusable annotations and exportable behaviour.

Custom Figma scroll-motion plugin interface — Designers set interaction behaviour directly in a focused Figma workflow.

Custom plugin interface for applying animation settings to selected layers — Shared presets make motion decisions more consistent and easier to review.

GitHub documentation for a custom Figma animation plugin — Documentation captures features, limitations and the intended operating model.

GitHub manifest code for the custom Figma plugin — Versioned source and an explicit permission model make the tool inspectable.

Design to story & code

I designed the hand-off as structured delivery output.

I structured the Figma source so it can generate first-pass Azure DevOps stories, acceptance criteria and specifications while exposing code-ready tokens, semantics and layout rules. Product, design and engineering review the generated output together before it enters delivery.

Translate named components and states into story structure
Carry behaviour, accessibility and edge cases into acceptance criteria
Expose tokens and reusable implementation patterns
Keep a reviewable line between design source and shipped code

Code-ready design-system output with structured components and assets — Structured design output supports reusable implementation instead of one-off screen translation.

Design-token specification covering colour, typography, spacing, radius, layout, icons and z-index — Tokens make visual decisions explicit and machine-readable across design and code.

Template, content & asset generation

I turned approved templates into controlled generation tools.

I introduced controlled Figma Make and Firefly workflows around approved templates. Locked structures, defined editable fields and curated media let teams produce page, content and asset variations without rebuilding the composition or drifting away from the brand system.

Generate layouts from approved page templates
Swap structured content without rebuilding the composition
Create on-brand image and asset variations for review
Preserve provenance, rights and human approval before release

Figma template interface with controlled text and media fields applied to a branded page — Controlled template fields let teams create more while protecting hierarchy, component behaviour and brand consistency.

AI-powered QA & VQA

I connected quality assurance back to the approved design source.

The model uses approved Figma output as the reference for automated regression and visual QA. It flags layout, component, content and accessibility differences for review; the team then records whether each difference is a build defect, an accepted variation or a required update to the design source.

Source

Approved Figma output

Components, tokens, states, breakpoints and expected behaviour.

Compare

Build & regression run

Visual diffs, interaction checks and accessibility signals across key journeys.

Decide

Human triage

Fix the build, accept the variation or update the source of truth.

Earlier detectionCatch drift before it compounds across templates and breakpoints.

Repeatable coverageRe-run critical journeys and states as the product changes.

Visible decisionsKeep exceptions and updates explicit rather than silently diverging.

UX KPIs & performance insight

I designed measurement as the input to the next cycle.

I use AI-assisted analysis across Copilot, Userlytics and customer-data platforms to connect behavioural signals, qualitative feedback and business outcomes. The team reviews the patterns, tests attribution and converts prioritised opportunities into the next research questions, experiments and design-system updates.

Observe

Behaviour & journeys

Completion, conversion, abandonment, pathing, errors and performance.

Understand

Feedback & meaning

Usability evidence, support themes, sentiment and emerging needs.

Prioritise

Opportunity & confidence

Combine scale, severity, value and evidence quality before acting.

Learn

Feed the next cycle

Turn live evidence into new questions, experiments and system updates.

ResearchDesignDeliverMeasure