From Research to Refined Mobile Design. A Three-Skill Workflow

From Research to Refined Mobile Design

Building mobile products means balancing user needs, design best practices, and performance constraints. This workflow combines discovery research, automated UX auditing, and design refinement to ensure your mobile experience is both user-centred and technically sound.

The three skills work in sequence: first, validate assumptions with real users. Second, run a systematic audit against mobile UX standards. Third, implement and refine changes in your design system.

The Workflow in Context

Imagine you are redesigning a mobile checkout flow. Early prototypes exist but you have not validated them with users. You suspect some accessibility issues but lack a structured way to find them. Your team also needs to track changes in Figma without manually reviewing dozens of frames.

This is where the three skills become essential.

Stage 1. Validate Assumptions with User Research

When to use: UX Discovery Interviewer

Before investing in refinement, test whether your mobile design solves the right problem. UX Discovery Interviewer runs structured interviews with target users, asking about pain points, mental models, and behaviour patterns.

For the checkout example, you would:

• Recruit 5-8 mobile users who match your audience
• Use the skill to conduct interviews around their current checkout habits
• Capture blockers like form field confusion, payment trust concerns, or navigation patterns
• Synthesize findings into design implications

This gives you evidence-based priorities. Do not guess about what mobile users need. Let interviews surface real friction.

Stage 2. Audit Against Mobile UX Standards

When to use: Mobile UX Fixer

Once you have research insights, audit your designs against 40+ mobile-specific checks. Mobile UX Fixer evaluates viewport handling, touch targets, animation performance, Core Web Vitals, and WCAG compliance automatically.

For the same checkout flow:

• Export your prototype or live URL
• Run the automated audit
• Receive a detailed report covering tap target sizes, colour contrast, page load metrics, and animation jank
• Prioritise fixes based on impact and effort

This catches issues a visual inspection alone would miss. Buttons might look big on your 27-inch monitor but be too small on a 6-inch screen. Dark mode might fail contrast ratios. Animations might block user input on older devices.

The audit identifies all of these without debate or assumption.

Stage 3. Refine and Document in Figma

When to use: Figma Refine

After research and audit, changes need to flow back into your design system. Figma Refine uses AI-powered ReviewNote workflows to suggest refinements, track reasoning, and keep your Figma file as the source of truth.

For implementation:

• Create ReviewNotes in Figma tied to the audit findings and research insights
• Let Figma Refine suggest refinements (increased tap target padding, improved typography hierarchy, animation easing changes)
• Review and apply changes asynchronously across your team
• Maintain audit context alongside design decisions

This prevents the common problem where research and audit reports sit in Slack or Google Docs while the Figma file drifts.

Workflow Checklist

1. Define scope. Which mobile flow or component needs validation. Who are your users.
2. Conduct discovery interviews using UX Discovery Interviewer. Aim for 5-8 participants. Document blockers and mental models.
3. Synthesize research findings. Extract design implications and priority areas.
4. Run Mobile UX Fixer audit against your prototype or live product. Export the full audit report.
5. Cross-reference findings. Map research insights to audit results. Some may overlap; some may contradict expectations.
6. Create Figma ReviewNotes. Link audit issues and research evidence to specific design frames.
7. Use Figma Refine to generate improvement suggestions. Evaluate AI suggestions against research data.
8. Implement and document. Apply changes and record rationale in ReviewNotes for future context.
9. Close the loop. Share refined designs with research participants for validation (optional but recommended).

Comparison. Research vs. Audit vs. Refinement

Avoiding Common Pitfalls

Research without audit. You validate user needs but miss technical issues. Mobile users abandon products due to performance or accessibility problems even if the core concept is sound.

Audit without research. You fix every violation but miss what actually matters to users. Users might tolerate a slightly suboptimal animation to complete a task quickly.

Refinement without documentation. Changes happen in Figma but no one remembers why. Six months later, decisions get reversed because context is lost.

Sequential handoffs instead of iteration. Treat these three skills as overlapping cycles, not linear stages. Use research to prioritise audit findings. Use audit results to focus refinement. Use refined designs to validate new research questions.

Practical Timing

This workflow scales across project phases:

• Early design (weeks 1-2). UX Discovery Interviewer validates core assumptions.
• Mid-design (weeks 3-4). Mobile UX Fixer runs against prototypes to catch standards violations early.
• Refinement (weeks 5-6). Figma Refine applies changes and prepares designs for handoff.
• Post-launch (weeks 8+). Re-run Mobile UX Fixer against live product and plan iteration cycles.

With this workflow, research informs audit priorities, audit findings drive refinement, and Figma becomes the living record of both decisions and evidence.