UI Design Deliverables

Designers communicate ideas through specialized artifacts tailored to different phases of the product lifecycle:

• Strategic Deliverables: Personas, empathy maps, and service blueprints that align cross-functional executives on why we are building.
• Architectural Deliverables: User flows, site maps, and wireframes that define how features work.
• Tactical Deliverables: High-fidelity UI mockups, interactive prototypes, and design specs that guide what engineers code.

User Personas

A persona is an archetypal representation of an actual user segment based on synthesized empirical research:

• Must Include: Goals, motivations, core pain points, environmental context, and behavioral triggers.
• Anti-Pattern: Avoid fictional trivia (e.g., 'favorite breakfast cereal' or 'uses a MacBook'); focus strictly on goals and frustrations relevant to the software.

Empathy Maps

Visualizes four quadrants of user experience during a task:

1. Says: Direct quotes from interview transcripts.
2. Thinks: Unspoken thoughts and private internal concerns.
3. Does: Observable physical actions and workarounds.
4. Feels: Emotional states (anxious, overwhelmed, confident).

User Journey Maps

Visualizes the end-to-end timeline of a user's experience as they strive to achieve a goal across touchpoints:

• Maps user actions, emotional highs/lows, and friction points across phases (e.g., Awareness, Onboarding, Usage, Renewal).
• Highlights opportunities for high-impact UX interventions.

Service Blueprints

Expands the journey map by connecting the user's frontstage experience with internal backstage systems:

• Frontstage: What the user directly sees and interacts with.
• Backstage: What internal employees and customer support agents do.
• Support Processes: The databases, microservices, and third-party APIs running behind the scenes.

Before opening Figma to draw screens, designers model interaction logic through flowcharts:

Task Flows

A linear sequence showing the single optimal path to complete a specific task (e.g., 'Resetting a Password'):

• Focuses strictly on efficiency without branching logic.

User Flows

A comprehensive flowchart incorporating conditional branches, edge cases, and error loops:

• Diamond nodes indicate user decisions or system checks (e.g., 'Is credit card valid?').
• Shows how users recover from failed transactions or alternate scenarios.

The days of manual redline spec PDFs are over. Modern design handoff leverages interactive tools (Figma Dev Mode):

A professional handoff spec includes:

• Design Tokens: Every color, font size, and spacing value references an explicit token name (e.g., spacing.lg, color.text.muted).
• Interaction States: Specs must explicitly show Default, Hover, Focus, Active, Disabled, and Error states for every component.
• Responsive Behavior: How cards wrap, stretch, or hide across standard breakpoints.

During QA testing and post-launch maintenance, designers conduct Design Audits:

• Visual Consistency Audit: Cataloging every button style, font size, and modal pattern in production to identify duplicate and rogue components.
• Usability Defect Report: Documenting discovered UX bugs with:
  1. Clear reproduction steps.
  2. Severity rating (Cosmetic to Usability Catastrophe).
  3. Video/screenshot evidence.
  4. Specific recommended design remediation.