Product & UX Design Workflows

Auditing Checkout Flows

Follow this workflow when requested to audit a checkout flow for drop-offs or friction.

1. Map the flow mobile-first using Nielsen's 10 usability heuristics.

   • Input: Screenshots or URL of the current checkout flow on iOS/Android devices.
   • Output: Figma-style wireframe diagram (text-based or descriptive) with each screen limited to three fields maximum and a persistent progress indicator like a bold step counter.
   • Why: Limits input fatigue and provides clear orientation, reducing abandonment by orienting users to completion.

2. Time each step using simulated Hotjar heatmaps and session recordings.

   • Input: Provided session data or describe 50-100 sessions; focus on real-device timings for iOS/Android.
   • Output: Table of step timings with hesitations noted (e.g., >45s on shipping selector).
   • Why: Identifies cognitive overload points where users hesitate, correlating to drop-offs.

3. Score each step 1-5 on friction based on cognitive load.

   • Input: Mapped flow and timing data.
   • Output: Spreadsheet or table with scores: deduct 1 point per Nielsen violation (e.g., -1 for no progress indicator, -1 for >3 fields/screen, -1 for unclear CTAs); target average <2 per step.
   • Why: Quantifies violations across heuristics like error prevention and flexibility/efficiency for prioritization.

4. Prioritize and prototype fixes targeting <90s total completion.

   • Input: Scores and timings.
   • Output: Figma prototype descriptions (e.g., reduce shipping to 2-field screen with guest checkout toggle and predictive address dropdowns).
   • Why: High-friction steps (>4 score, >45s hesitation) drive 80% of abandons; prototypes test fixes directly.

5. Validate prototype on iOS Simulator for tap targets and smoothness.

   • Input: Prototype specs.
   • Output: Validation report confirming reductions (e.g., guest toggle drops shipping fields from 5 to 2).
   • Why: Ensures mobile parity before staging, catching tap target issues early.

6. Run staging Hotjar simulation across 50-100 sessions.

   • Input: Validated prototype.
   • Output: Metrics report: time-to-complete (<90s), heatmaps, rage clicks, drop-offs.
   • Why: Measures uplift (e.g., 18% completion boost) with real-user simulation data.

7. Generate handoff deck in Google Slides format (10-15 slides max).

   • Input: All prior outputs.
   • Output: Structured deck with embedded Figma links (template below).
   • Why: Enables PM review with evidence-backed proposals, minimizing ping-pong.

Handoff Deck Template

Executive Summary (1 slide): Problem (e.g., 25% cold zone at shipping), uplift projection (18%).

Audit Evidence (3-4 slides): Hotjar heatmaps (>20% cold zones), 5-10 annotated session screenshots/GIFs.

Root Causes & Prioritization (2 slides): Decision matrix by abandonment >10-15%.

Proposed Fixes (3-4 slides): Figma before/after links, microcopy tweaks.

Metrics & Validation (1-2 slides): Staging uplift (18%), QA sign-off.

Example: For a shipping selector with 45s hesitations, prototype a guest toggle reducing fields to 2, validating 22% conversion uplift in staging.

Reviewing Landing Pages

1. Run 5-second test simulation.
   • Output: Note key elements recalled (headline, CTA).
2. Layer with AIDA framework (Attention, Interest, Desire, Action).
   • Score 1-5 per stage using Zeplin for pixel-perfection and WebAIM for 4.5:1 CTA contrast.

Accessibility Audits for Forms

1. Scan with WAVE/Lighthouse for WCAG 2.1 AA.
   • Output: Compliance report focusing on tab order (focus-first).
   • Why: Ensures keyboard navigation without mouse dependency.