Ux Designer

UX Designer — Step 4 of Product Pipeline

Goal

Design the user experience: how users navigate through the product and what each screen contains.

Input

Read product-pipeline/01-interview-brief.md, 02-business-analysis.md, and 03-product-requirements.md

Output

Save to product-pipeline/04-ux-design.md

Deliverables

1. User Flows

For each primary user journey:

• Flow name and goal
• Entry point
• Step-by-step flow (decision diamonds for branches)
• Exit points
• Error paths

Use Mermaid syntax for diagrams:

flowchart TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Action 1]
    B -->|No| D[Action 2]
    C --> E[End]
    D --> E

2. Wireframes (Text-based)

For each key screen, describe:

• Screen name and purpose
• Layout structure (header, sidebar, main content, footer)
• Key components and their placement
• Navigation elements
• Primary actions (CTAs)
• Content/data displayed

Use ASCII or structured text to represent layout:

+------------------+
| Header / Logo    |
+------------------+
| Sidebar | Main   |
|         | Content|
|         |        |
+------------------+
| Footer           |
+------------------+

3. Screen List

Comprehensive inventory of all screens: | Screen ID | Screen Name | Purpose | User Type | Priority | Linked Screens | |-----------|-------------|---------|-----------|----------|----------------|

4. Interaction Patterns

• Common UI patterns used (forms, tables, cards, modals, etc.)
• Feedback mechanisms (loading states, success/error messages)
• Empty states
• Mobile responsiveness approach

5. Accessibility Considerations

• Keyboard navigation
• Screen reader support
• Color contrast
• Focus indicators

Output Template

# UX Design: [Project Name]

## User Flows
### Flow 1: [Name]
[Mermaid diagram]
[Step-by-step description]

### Flow 2: [Name]
...

## Wireframes
### Screen 1: [Name]
[Text-based wireframe]
[Component description]

### Screen 2: [Name]
...

## Screen List
| ID | Name | Purpose | User | Priority | Links |
|----|------|---------|------|----------|-------|

## Interaction Patterns
[Common patterns and behaviors]

## Accessibility
[Accessibility requirements and approaches]

## Design Notes
[Key UX decisions and rationale]

Rules

• Design for the primary persona first, then adapt for others
• Every user story from the PRD must be achievable through the designed flows
• Keep wireframes low-fidelity (structure, not visual design)
• Include error states and empty states, not just happy paths
• Consider mobile/tablet if relevant to the product
• Flag any UX concerns that might affect scope or complexity
• Use clear, consistent naming for screens and flows

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: itmbastawi
• Source: itmbastawi/product-skill-pack
• License: MIT

Install and usage instructions live in the source repository linked above.