UX Design Expert

Core UX Principles

When designing user experiences, always follow these principles:

1. User-Centered Design: Start with user needs, not business requirements
2. Cognitive Load Minimization: Reduce mental effort required to complete tasks
3. Consistency: Maintain predictable patterns across the experience
4. Feedback & Feedforward: Show system status and next steps clearly
5. Error Prevention: Design to prevent errors before they occur
6. Accessibility First: WCAG 2.1 AA minimum, aim for AAA

---

UX Research Methods

1. User Interviews (Discovery)

When to use: Understanding user motivations, pain points, mental models

Process:

1. Define research questions (3-5 core questions)
2. Recruit participants (5-8 users per segment)
3. Prepare interview guide (open-ended questions)
4. Conduct 30-45 min sessions
5. Synthesize findings into themes

Interview Script Template:

Opening (5 min):
- Introduce yourself and research goals
- Explain confidentiality and recording
- Ask for permission to record

Background (10 min):
- Tell me about your role...
- How do you currently solve [problem]?
- Walk me through your last experience with [task]...

Deep Dive (20 min):
- What frustrates you most about [current solution]?
- If you could change one thing, what would it be?
- How do you decide when to [key decision]?

Closing (5 min):
- Is there anything I should have asked but didn't?
- Can you recommend others I should speak with?

Output: Affinity map of user needs, pain points, and opportunities

---

2. Usability Testing

When to use: Validating designs, identifying friction points

Process:

1. Define tasks (3-5 critical user flows)
2. Create prototype (low-fi for early testing, high-fi for refinement)
3. Recruit 5 participants per round
4. Conduct moderated sessions (30-45 min)
5. Measure: task success rate, time on task, error rate, satisfaction

Task Script Template:

Scenario: You need to [realistic goal]. Using this prototype, show me how you would do that.

Observation Notes:
- Where do they hesitate?
- What do they click first?
- Do they use search or navigation?
- What error messages do they encounter?
- Do they complete the task successfully?

Follow-up Questions:
- On a scale of 1-5, how difficult was that?
- What was confusing?
- What would you change?

Nielsen's Severity Rating:

• 0: Not a usability problem
• 1: Cosmetic (fix if time)
• 2: Minor (low priority)
• 3: Major (high priority)
• 4: Catastrophic (fix before launch)

---

3. Heuristic Evaluation (Jakob Nielsen's 10 Heuristics)

Use this checklist to audit any interface:

1. Visibility of System Status: Does the system keep users informed?

   • Loading indicators, progress bars, confirmation messages
   • ✅ Example: "Saving..." → "Saved!" feedback

2. Match Between System and Real World: Does it use familiar language?

   • Avoid jargon, use user vocabulary
   • ✅ Example: "Archive" not "Deprecate"

3. User Control and Freedom: Can users undo mistakes?

   • Undo/redo, cancel buttons, back navigation
   • ✅ Example: "Are you sure?" confirmation for destructive actions

4. Consistency and Standards: Do similar things look/behave the same?

   • Consistent button placement, color meanings, terminology
   • ✅ Example: Primary action always on right, danger always red

5. Error Prevention: Does it prevent errors before they happen?

   • Constraints (disable invalid options), confirmation dialogs
   • ✅ Example: Disable "Submit" until required fields are filled

6. Recognition Rather Than Recall: Is information visible, not hidden?

   • Show recent items, autocomplete, tooltips
   • ✅ Example: Show recently used colors in color picker

7. Flexibility and Efficiency: Are there shortcuts for experts?

   • Keyboard shortcuts, batch actions, customization
   • ✅ Example: Cmd+K for search, drag-to-select multiple

8. Aesthetic and Minimalist Design: Is every element necessary?

   • Remove decorative elements, prioritize content
   • ✅ Example: Hide advanced options behind "Advanced" toggle

9. Help Users Recognize, Diagnose, and Recover from Errors: Are errors helpful?

   • Plain language, suggest solutions, show where error occurred
   • ✅ Example: "Email format invalid. Try: name@example.com"

10. Help and Documentation: Is help contextual and searchable?

    • Tooltips, inline help, search-optimized docs
    • ✅ Example: "What's this?" icon next to complex fields

---

Information Architecture

Card Sorting (for Navigation)

Purpose: Understand how users mentally group content

Process:

1. Create cards for each content item (30-50 cards)
2. Ask users to group cards into categories that make sense
3. Ask users to name each category
4. Analyze groupings to find patterns

Output: Sitemap with user-validated categories

Site Map Template

Homepage
├── About
│   ├── Team
│   ├── Mission
│   └── Contact
├── Services
│   ├── Design System Lift-Off
│   ├── AI Brand Ops
│   └── AI UX Sprint
├── Work (Portfolio)
│   ├── Case Study 1
│   ├── Case Study 2
│   └── All Projects
└── Blog
    ├── Articles
    └── Authors

---

User Flows & Journey Mapping

User Flow Diagram

Purpose: Visualize how users move through a task

Example: Contact Form Submission

[User lands on Contact page]
        ↓
[Reads page content]
        ↓
[Fills form fields] → [Validation error?] → [Fix errors]
        ↓                                          ↓
[Clicks Submit] ←───────────────────────────────────┘
        ↓
[Loading state]
        ↓
[Success confirmation] → [Receives email]
        ↓
[CTA: Browse services]

Flow Analysis Checklist:

• Is the happy path clear?
• Are error states handled gracefully?
• Can users exit at any point?
• Is there a clear next action after completion?

---

Journey Map Template

For: [User Persona Name] Scenario: [Specific goal or task]

Stage	User Action	Thoughts	Emotions	Pain Points	Opportunities
Awareness	Googles "design system consultancy"	"Need help scaling our design..."	Hopeful but overwhelmed	Too many options	Clear positioning: "DS Lift-Off in 4 weeks"
Consideration	Visits homepage, reads case studies	"Do they understand my problem?"	Skeptical	Vague outcomes	Show metrics: "50% faster onboarding"
Decision	Checks pricing, reads testimonials	"Can I afford this?"	Anxious	No transparent pricing	Price ranges + ROI calculator
Onboarding	Books consultation, fills form	"What happens next?"	Uncertain	No confirmation email	Auto-reply + calendar invite
Experience	Receives deliverables	"This is exactly what I needed!"	Relieved	-	Upsell: Care retainer

---

Wireframing Guidelines

Low-Fidelity Wireframes (Sketches)

When: Early exploration, rapid iteration

Tools: Paper, whiteboard, Figma low-fi kit

Focus:

• Layout structure
• Content hierarchy
• Navigation patterns
• Interaction zones

Example: Service Page Wireframe

┌─────────────────────────────────────┐
│  Logo    Nav1  Nav2  Nav3  [CTA]   │  ← Header
├─────────────────────────────────────┤
│                                     │
│   ┌─────────────────────────────┐  │
│   │  [ Hero Image ]             │  │  ← Hero
│   │  DESIGN SYSTEM LIFT-OFF     │  │
│   │  Get production-ready DS    │  │
│   │  in 4 weeks                 │  │
│   │  [Book Consultation]        │  │
│   └─────────────────────────────┘  │
│                                     │
│   ┌───────────┬───────────┬──────┐ │
│   │ Week 1    │ Week 2    │Week 3│ │  ← Process
│   │ Discovery │ Build     │Launch│ │
│   └───────────┴───────────┴──────┘ │
│                                     │
│   DELIVERABLES:                     │  ← Details
│   - Token system                    │
│   - 20+ components                  │
│   - Documentation                   │
│                                     │
│   PRICING: €18-25k                  │
│   [Get Started]                     │
│                                     │
│   ┌─────────┐ ┌─────────┐          │  ← Testimonials
│   │ Quote 1 │ │ Quote 2 │          │
│   └─────────┘ └─────────┘          │
└─────────────────────────────────────┘

High-Fidelity Wireframes

When: Pre-development handoff

Include:

• Real content (not lorem ipsum)
• Actual component names from design system
• Interaction states (hover, active, disabled)
• Responsive breakpoints (mobile, tablet, desktop)
• Annotations for developers

---

Conversion Optimization

Landing Page Anatomy (CRO Best Practices)

Above the Fold:
├── Unique Value Prop (10 words max)
├── Subheadline (explain who it's for)
├── Hero Image/Video (show product in context)
└── Primary CTA (action-oriented: "Start Your Lift-Off")

Social Proof:
├── Client logos (6-8 recognizable brands)
├── Testimonial with photo + name + company
└── Metric (e.g., "500+ components shipped")

Benefits (Not Features):
├── Benefit 1: "Launch faster" (not "Component library")
├── Benefit 2: "Scale your team" (not "Documentation")
└── Each with icon + short description

How It Works:
├── Step 1 → Step 2 → Step 3 (visual timeline)
└── Keep it to 3-4 steps max

Objection Handling:
├── FAQ (address top 5 objections)
└── Risk reversal ("If we don't hit KPIs, 2 weeks free")

Final CTA:
├── Repeat primary CTA
└── Low-friction secondary ("Download case study")

---

Accessibility UX Patterns

Keyboard Navigation

Tab Order:

1. Skip to main content link (first tab)
2. Navigation menu
3. Main content (logical reading order)
4. Footer

Shortcuts:

• Tab / Shift+Tab: Navigate forward/back
• Enter / Space: Activate buttons/links
• Esc: Close modals/menus
• Arrow keys: Navigate within components (tabs, dropdowns)

Screen Reader Optimization

Landmarks:

<header>...</header>        <!-- Banner -->
<nav aria-label="Main">...</nav>
<main>...</main>
<aside>...</aside>          <!-- Complementary -->
<footer>...</footer>        <!-- Contentinfo -->

ARIA Labels:

<!-- For icons without text -->
<button aria-label="Close dialog">
  <svg>...</svg>
</button>

<!-- For complex widgets -->
<div role="tablist" aria-label="Service options">
  <button role="tab" aria-selected="true">Lift-Off</button>
  <button role="tab" aria-selected="false">Brand Ops</button>
</div>

---

Mobile-First UX

Progressive Disclosure

Pattern: Show essentials first, reveal details on demand

Example: Service Card

Mobile (320px):

┌─────────────────┐
│ DS Lift-Off     │
│ 4 weeks         │
│ €18-25k         │
│ [Learn More]    │
└─────────────────┘

Desktop (1024px):

┌─────────────────────────────────────────────┐
│ Design System Lift-Off               €18-25k│
│ Get a production-ready design system in 4   │
│ weeks. Includes tokens, components, docs.   │
│                                             │
│ ✓ Token system    ✓ Documentation          │
│ ✓ 20+ components  ✓ Training sessions      │
│                                             │
│ [Book Consultation] [Download Case Study]  │
└─────────────────────────────────────────────┘

Touch Target Sizes

• Minimum: 44×44px (iOS), 48×48px (Material Design)
• Spacing: 8px between targets minimum
• Hit area > visual size (padding increases tap zone)

.button {
  padding: 12px 24px; /* Visual size */

  /* Extend hit area with pseudo-element */
  position: relative;
}

.button::before {
  content: '';
  position: absolute;
  inset: -8px; /* 8px hit area extension */
}

---

Cognitive Load Optimization

Miller's Law: 7±2 Items

Problem: Long lists overwhelm users

Solution: Chunk information into 5-7 groups

Bad Example (12 navigation items):

Home | About | Team | Mission | Services | Pricing | Work | Case Studies | Blog | Authors | Contact | FAQ

Good Example (5 groups):

About (Team, Mission)
Services (Pricing, Offerings)
Work (Portfolio, Case Studies)
Insights (Blog, Authors)
Contact

Hick's Law: Choice Overload

Problem: More options = slower decisions

Solution: Reduce choices, guide users

Example: Service Selection

Bad (overwhelming):

• Design System Audit ($X)
• Token Architecture ($Y)
• Component Library ($Z)
• Documentation ($A)
• Training ($B)
• Governance ($C)
• Maintenance ($D)

Good (packaged):

• Lift-Off (Audit + Tokens + Library) - €18-25k
• Brand Ops (Templates + Governance) - €12-18k
• AI Sprint (Prototype + Evaluation) - €9-14k

---

Micro-Interactions

Feedback Patterns

States to design for:

1. Idle: Default state
2. Hover: Cursor over element (desktop only)
3. Focus: Keyboard navigation
4. Active: Click/tap in progress
5. Loading: Async operation
6. Success: Operation complete
7. Error: Operation failed
8. Disabled: Unavailable

Button Example:

Idle:     [Submit]              (blue background)
Hover:    [Submit]              (darker blue, slight scale)
Focus:    [Submit]              (outline visible)
Active:   [Submit]              (pressed effect)
Loading:  [○ Submitting...]    (spinner + text)
Success:  [✓ Submitted]        (green, checkmark)
Error:    [✕ Try Again]        (red, error icon)
Disabled: [Submit]              (gray, cursor not-allowed)

---

Form UX Best Practices

Input Field Design

Label:
- Always visible (not placeholder)
- Above input (not inline)
- Clear language ("Email address" not "Email")

Input:
- Large enough for touch (48px height min)
- Correct input type (email, tel, number)
- Autocomplete enabled
- Clear error state (red border + icon)

Help Text:
- Below input (not in placeholder)
- Show before user interacts
- Example: "We'll never share your email"

Error Message:
- Specific ("Email missing @" not "Invalid")
- Show immediately after blur
- Suggest fix ("Try: name@example.com")

Success State:
- Green checkmark when valid
- Optional: "Looks good!" message

Multi-Step Forms

Progress Indicator:

Step 1: Contact Info  →  Step 2: Details  →  Step 3: Review
  [●]                      [○]                  [○]

Best Practices:

• Show progress (step X of Y)
• Allow back navigation (no data loss)
• Save drafts automatically
• Show error summary at top
• Validate per-step, not only on submit

---

Design System UX Patterns

Component Discovery

Problem: Designers/developers can't find the right component

Solution: Multi-faceted navigation in Storybook

1. By Category: Layout, Forms, Feedback, Data Display
2. By Use Case: "I need to show a loading state" → Spinner
3. By Search: Fuzzy search across component names and tags
4. By Status: Production, Beta, Deprecated, WIP

Component Documentation Template

# Button

## When to use
Use buttons for primary actions like submitting forms or confirming decisions.

## When NOT to use
Don't use buttons for navigation—use links instead.

## Variants
- **Primary**: Main action on page (one per screen)
- **Secondary**: Alternative actions
- **Danger**: Destructive actions (delete, remove)

## Accessibility
- Always include visible text (not icon-only)
- Loading state announces to screen readers
- Disabled buttons explain why ("Save unavailable: form incomplete")

## Examples
[Storybook playground with live code]

---

Metrics & KPIs

UX Metrics Framework

Metric	What	How to Measure
Task Success Rate	% of users who complete task	Usability testing
Time on Task	How long to complete	Analytics + testing
Error Rate	% of actions that result in error	Error tracking
Satisfaction (SUS)	Subjective usability score	Post-task survey
Net Promoter Score	Would recommend?	Email survey
Bounce Rate	% who leave immediately	Google Analytics
Conversion Rate	% who complete goal	Analytics funnel

System Usability Scale (SUS) Survey

Post-task questionnaire (1 = Strongly Disagree, 5 = Strongly Agree):

1. I think I would like to use this system frequently
2. I found the system unnecessarily complex
3. I thought the system was easy to use
4. I think I would need support to use this system
5. I found the various functions well integrated
6. I thought there was too much inconsistency
7. I would imagine most people would learn quickly
8. I found the system very cumbersome to use
9. I felt very confident using the system
10. I needed to learn a lot before I could get going

Score: (Sum odd items - 5) + (25 - sum even items) × 2.5 Benchmark: 68+ is above average

---

When to Use This Skill

Activate this skill when:

• Planning user research studies
• Creating user personas or journey maps
• Designing user flows or wireframes
• Conducting usability tests
• Performing heuristic evaluations
• Optimizing conversion funnels
• Improving form UX
• Designing accessible experiences
• Reducing cognitive load
• Measuring UX success metrics
• Auditing information architecture
• Creating mobile-first experiences

Remember: Always validate designs with real users before development.