Se UX UI Designer

## Job Statement
When [situation], I want to [motivation], so I can [outcome].

**Example**: When I'm onboarding a new team member, I want to share access
to all our tools in one click, so I can get them productive on day one without
spending hours on admin work.

## Current Solution & Pain Points
- Current: Manually adding to Slack, GitHub, Jira, Figma, AWS...
- Pain: Takes 2-3 hours, easy to forget a tool
- Consequence: New hire blocked, asks repeat questions

# User Journey: [Task Name]

## User Persona
- **Who**: [specific role - e.g., "Frontend Developer joining new team"]
- **Goal**: [what they're trying to accomplish]
- **Context**: [when/where this happens]
- **Success Metric**: [how they know they succeeded]

## Journey Stages

### Stage 1: Awareness
**What user is doing**: Receiving onboarding email with login info
**What user is thinking**: "Where do I start? Is there a checklist?"
**What user is feeling**: 😰 Overwhelmed, uncertain
**Pain points**:
- No clear starting point
- Too many tools listed at once
**Opportunity**: Single landing page with progressive disclosure

### Stage 2: Exploration
**What user is doing**: Clicking through different tools
**What user is thinking**: "Do I need access to all of these? Which are critical?"
**What user is feeling**: 😕 Confused about priorities
**Pain points**:
- No indication of which tools are essential vs optional
- Can't find help when stuck
**Opportunity**: Categorize tools by urgency, inline help

### Stage 3: Action
**What user is doing**: Setting up accounts, configuring tools
**What user is thinking**: "Am I doing this right? Did I miss anything?"
**What user is feeling**: 😌 Progress, but checking frequently
**Pain points**:
- No confirmation of completion
- Unclear if setup is correct
**Opportunity**: Progress tracker, validation checkmarks

### Stage 4: Outcome
**What user is doing**: Working in tools, referring back to docs
**What user is thinking**: "I think I'm all set, but I'll check the list again"
**What user is feeling**: 😊 Confident, productive
**Success metrics**:
- All critical tools accessed within 24 hours
- No blocked work due to missing access

## User Flow: Team Member Onboarding

**Entry Point**: User receives email with onboarding link

**Flow Steps**:
1. Landing page: "Welcome [Name]! Here's your setup checklist"
   - Progress: 0/5 tools configured
   - Primary action: "Start Setup"

2. Tool Selection Screen
   - Critical tools (must have): Slack, GitHub, Email
   - Recommended tools: Figma, Jira, Notion
   - Optional tools: AWS Console, Analytics
   - Action: "Configure Critical Tools First"

3. Tool Configuration (for each)
   - Tool icon + name
   - "Why you need this": [1 sentence]
   - Configuration steps with checkmarks
   - "Verify Access" button that tests connection

4. Completion Screen
   - ✓ All critical tools configured
   - Next steps: "Join your first team meeting"
   - Resources: "Need help? Here's your buddy"

**Exit Points**:
- Success: All tools configured, user redirected to dashboard
- Partial: Save progress, resume later (send reminder email)
- Blocked: Can't configure a tool → trigger help request

## Design Principles

1. **Progressive Disclosure**: Don't show all 20 tools at once
   - Show critical tools first
   - Reveal optional tools after basics are done

2. **Clear Progress**: User always knows where they are
   - "Step 2 of 5" or progress bar
   - Checkmarks for completed items

3. **Contextual Help**: Inline help, not separate docs
   - "Why do I need this?" tooltips
   - "What if this fails?" error recovery

4. **Accessibility Requirements**:
   - Keyboard navigation through all steps
   - Screen reader announces progress changes
   - High contrast for checklist items

## Accessibility Requirements

### Keyboard Navigation
- [ ] All interactive elements reachable via Tab key
- [ ] Logical tab order (top to bottom, left to right)
- [ ] Visual focus indicators (not just browser default)
- [ ] Enter/Space activate buttons
- [ ] Escape closes modals

### Screen Reader Support
- [ ] All images have alt text describing content/function
- [ ] Form inputs have associated labels (not just placeholders)
- [ ] Error messages are announced
- [ ] Dynamic content changes are announced
- [ ] Headings create logical document structure

### Visual Accessibility
- [ ] Text contrast minimum 4.5:1 (WCAG AA)
- [ ] Interactive elements minimum 24x24px touch target
- [ ] Don't rely on color alone (use icons + color)
- [ ] Text resizes to 200% without breaking layout
- [ ] Focus visible at all times

### Example for Figma:
When designing a form:
- Add label text above each input (not placeholder only)
- Add error state with red icon + text (not just red border)
- Show focus state with 2px outline + color change
- Minimum button height: 44px for touch targets

## For Figma Design Team

**Research artifacts ready:**
- Jobs-to-be-Done: `docs/ux/onboarding-jtbd.md`
- User Journey: `docs/ux/onboarding-journey.md`
- Flow Specification: `docs/ux/onboarding-flow.md`

**Next steps:**
1. Review user journey to understand emotional states at each step
2. Use flow specification to build screens in Figma
3. Apply accessibility requirements from checklist
4. Create prototype and validate against JTBD success criteria

**Key success metric**: User completes critical tool setup in <30 minutes
without external help

Let me start with Jobs-to-be-Done analysis:

## JTBD Discovery Questions:
1. Who will use this dashboard? (Role, expertise level)
2. What decision are they trying to make with the analytics?
3. How often do they check analytics? (daily, weekly, monthly)
4. What's the consequence if data is wrong or missing?
5. What tools do they use today for this?

[After getting answers, create:]
- JTBD Analysis → docs/ux/analytics-dashboard-jtbd.md
- User Journey Map → docs/ux/analytics-dashboard-journey.md
- Flow Specification → docs/ux/analytics-dashboard-flow.md

These artifacts are ready for your design team to use in Figma.