product-designer

$2a

Day

Activity

Output

Monday

Map problem, interview experts

Challenge map, target area

Tuesday

Sketch solutions, Crazy 8s

Solution sketches

Wednesday

Decide, storyboard

Testable hypothesis

Thursday

Build prototype

Realistic clickable prototype

Friday

Test with 5 users

Validated/invalidated hypothesis

User Journey Map Template

PERSONA: Sarah, Product Manager, goal: find analytics insights fast

STAGE:      AWARENESS    CONSIDER     PURCHASE     ONBOARD      RETAIN

Actions:    Searches     Compares     Signs up     Configures   Uses daily

Touchpoint: Google       Website      Checkout     Setup wizard App

Emotion:    Frustrated   Curious      Anxious      Hopeful      Satisfied

Pain point: Too many     Hard to      Complex      Slow setup   Missing

            options      compare      pricing                   features

Opportunity: SEO content  Comparison   Simplify     Quick-start  Feature

                         tool         flow         template     education

Information Architecture

Card Sorting Methods:

• Open sort: users create their own categories

• Closed sort: users place items into predefined categories

• Hybrid: combination approach

Example Site Map:

Home

+-- Products

|   +-- Category A

|   |   +-- Product 1

|   |   +-- Product 2

|   +-- Category B

+-- About

|   +-- Team

|   +-- Careers

+-- Resources

|   +-- Blog

|   +-- Help Center

+-- Account

    +-- Profile

    +-- Settings

UI Design Foundations

Design Principles

• Hierarchy - Visual weight guides attention via size, color, and contrast

• Consistency - Reuse patterns and components; maintain predictable interactions

• Feedback - Acknowledge every user action; show system status and loading states

• Accessibility - 4.5:1 color contrast minimum, focus indicators, screen reader support

Design Token System

/* Color tokens */

--color-primary-500: #3b82f6;

--color-primary-600: #2563eb;

--color-gray-50: #f9fafb;

--color-gray-900: #111827;

--color-success: #10b981;

--color-warning: #f59e0b;

--color-error: #ef4444;

/* Typography scale */

--text-sm: 0.875rem;   /* 14px */

--text-base: 1rem;     /* 16px */

--text-lg: 1.125rem;   /* 18px */

--text-xl: 1.25rem;    /* 20px */

--text-2xl: 1.5rem;    /* 24px */

/* Spacing (4px base unit) */

--space-1: 0.25rem;    /* 4px */

--space-2: 0.5rem;     /* 8px */

--space-4: 1rem;       /* 16px */

--space-6: 1.5rem;     /* 24px */

--space-8: 2rem;       /* 32px */

Component Structure

Button/

+-- Variants: Primary, Secondary, Tertiary, Destructive

+-- Sizes: Small (32px), Medium (40px), Large (48px)

+-- States: Default, Hover, Active, Focus, Disabled, Loading

+-- Anatomy: [Leading Icon] Label [Trailing Icon]

Component Design Tokens (JSON)

{

  "color": {

    "primary": {"50": {"value": "#eff6ff"}, "500": {"value": "#3b82f6"}},

    "semantic": {"success": {"value": "{color.green.500}"}, "error": {"value": "{color.red.500}"}}

  },

  "spacing": {"xs": {"value": "4px"}, "sm": {"value": "8px"}, "md": {"value": "16px"}},

  "borderRadius": {"sm": {"value": "4px"}, "md": {"value": "8px"}, "full": {"value": "9999px"}}

}

Example: Usability Test Plan

# Usability Test: New Checkout Flow

## Objectives

- Validate that users can complete purchase in < 3 minutes

- Identify friction points in address and payment steps

## Participants

- 6 users (3 new, 3 returning)

- Mix of desktop and mobile

## Tasks

1. "Find a laptop under $1,000 and add it to your cart" (browse + add)

2. "Complete the purchase using a credit card" (checkout flow)

3. "Change the shipping address on your order" (post-purchase edit)

## Success Criteria

| Task | Completion Target | Time Target |

|------|-------------------|-------------|

| Browse + Add | 100% | < 60s |

| Checkout | 90%+ | < 180s |

| Edit address | 80%+ | < 90s |

## Metrics

- Task completion rate

- Time on task

- Error count per task

- System Usability Scale (SUS) score (target: 68+)

Prototype Fidelity Guide

Fidelity

Purpose

Tools

Timeline

Paper

Quick exploration

Paper, pen

Minutes

Low-fi

Flow validation

Figma, Sketch

Hours

Mid-fi

Usability testing

Figma

Days

High-fi

Dev handoff, final testing

Figma

Days-Weeks

Scripts

# Design token generator

python scripts/token_generator.py --source tokens.json --output css/

# Accessibility checker

python scripts/a11y_checker.py --url https://example.com

# Asset exporter

python scripts/asset_export.py --figma-file FILE_ID --format svg,png

# Design QA report

python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com

Reference Materials

• references/design_principles.md - Core design principles

• references/component_library.md - Component guidelines

• references/accessibility.md - Accessibility checklist

• references/research_methods.md - Research techniques

Tool Reference

design_critique.py

Evaluates a UI design against Nielsen's 10 Usability Heuristics and accessibility standards. Generates a structured critique report with severity ratings, compliance scores, and prioritized improvement recommendations.

Flag

Type

Default

Description

--checklist

flag

-

Generate empty checklist for evaluation

--answers

string

-

Path to completed checklist JSON file

--json

flag

False

Output as JSON

python scripts/design_critique.py --checklist

python scripts/design_critique.py --checklist --json > checklist.json

python scripts/design_critique.py --answers completed_checklist.json

python scripts/design_critique.py --answers completed_checklist.json --json

journey_mapper.py

Creates structured user journey maps with emotion curves, pain point identification, and opportunity analysis. Includes pre-built templates for SaaS, e-commerce, and mobile app journeys.

Flag

Type

Default

Description

--template, -t

choice

-

Pre-built template: saas, ecommerce, mobile_app

--stages, -s

string

-

Path to custom stages JSON file

--json

flag

False

Output as JSON

python scripts/journey_mapper.py --template saas

python scripts/journey_mapper.py --template ecommerce --json

python scripts/journey_mapper.py --stages custom_journey.json

usability_scorer.py

Calculates System Usability Scale (SUS) scores and task performance metrics from usability test data. Provides individual and aggregate analysis with grade interpretation and benchmarking.

Flag

Type

Default

Description

action

positional

-

"sample" to create sample CSV files

--sus-responses

string

-

CSV with SUS responses (participant, q1-q10)

--task-data

string

-

CSV with task data (participant, task, completed, time_seconds, errors)

--json

flag

False

Output as JSON

python scripts/usability_scorer.py sample

python scripts/usability_scorer.py --sus-responses responses.csv

python scripts/usability_scorer.py --task-data tasks.csv

python scripts/usability_scorer.py --sus-responses responses.csv --task-data tasks.csv --json

Troubleshooting

Problem

Cause

Solution

SUS score below 68 (benchmark)

Significant usability issues

Focus on critical severity findings from design_critique first

Low task completion rate (<80%)

Task flow too complex or unclear

Simplify flow; add progressive disclosure; reduce steps

Users cannot find features

Poor information architecture

Conduct card sorting; redesign navigation; add search

High error rate on forms

Insufficient validation and guidance

Add inline validation, smart defaults, and contextual help

Inconsistent design across screens

Missing or ignored design system

Audit with design_critique; enforce token usage

Usability test participants are unrepresentative

Poor recruitment criteria

Screen for target persona match; mix new and returning users

Journey map emotions are flat

Insufficient research data

Conduct deeper interviews; observe real usage sessions

Success Criteria

Criterion

Target

How to Measure

SUS score

>68 (industry average), target >80

usability_scorer aggregate score

Task completion rate

>85% for core flows

usability_scorer task metrics

Time on task

<2x expected duration

usability_scorer avg_time_seconds

Design critique compliance

>80% checklist pass rate

design_critique compliance_score

Accessibility compliance

WCAG AA on all screens

design_critique accessibility section

Journey map coverage

All key personas mapped

Count of completed journey maps

Usability test cadence

Test every sprint or release

Count of tests per quarter

Scope &#x26; Limitations

In scope:

• Heuristic evaluation and design critique

• User journey mapping with emotion curves

• Usability test scoring (SUS and task metrics)

• Design sprint facilitation structure

• Information architecture planning

• Prototype fidelity guidance

• Accessibility checkpoint evaluation

Out of scope:

• Automated visual regression testing (use Chromatic/Percy)

• Real-time analytics dashboards (use Amplitude/Mixpanel)

• Figma file manipulation or asset export (use Figma API)

• Eye tracking or biometric analysis

• A/B test implementation (see ab-test-setup skill)

• Design token generation (see ui-design-system or design-system-lead skills)

Integration Points

Tool / Platform

Integration Method

Use Case

Figma

Journey map and critique findings as design specs

Translate research into design changes

Maze / UserTesting

Export task data CSV for usability_scorer

Score test results from remote testing platforms

Dovetail / Condens

Export interview themes for journey_mapper

Build journey maps from research repositories

Jira / Linear

design_critique JSON priorities as tickets

Track usability improvements in sprint backlog

Notion / Confluence

Human-readable output from all tools

Document research findings and design decisions

Miro / FigJam

journey_mapper JSON output

Collaborative journey map workshops