tommygeoco_ui-audit/references/10-checklist-new-interfaces.md

# Checklist: Designing New Interfaces

A 6-step process for approaching any new interface from scratch.

---

## Step 1: Define the System

Understand the technical and contextual landscape before designing.

### Key Questions

☐ **What type of system is this?**
- Web application — Cross-platform, easy updates, limited hardware access
- Mobile app — Native performance, deep device integration, separate iOS/Android
- Desktop software — Full processing power, deep system access, requires updates
- Embedded system — Fixed hardware, task-specific, constrained resources

☐ **What are the platform constraints?**
- Screen sizes and orientations
- Input methods (touch, mouse, keyboard, voice)
- Performance requirements
- Offline capabilities needed?

☐ **What data inputs/outputs exist?**
- How do users get data in?
- How do users get data out?
- What integrations are required?

### Best Practices
- Match the system type to user needs and contexts
- Consider browser extensions, mobile companions for web apps
- Prioritize input methods that fit user context

---

## Step 2: Model User Tasks

Define who users are and what they need to accomplish.

### Key Questions

☐ **Who are the different user types?**
- What roles exist?
- What permissions should each role have?
- What are their distinct needs?

☐ **What are primary tasks users need to accomplish?**
- What are the jobs-to-be-done?
- How do tasks break into step-by-step workflows?
- What are entry points, decision points, and endpoints?

☐ **How will users CRUD data?**
- Create, Read, Update, Delete flows
- Necessary sequencing and granularity
- Bulk operations needed?

☐ **What are key data entities?**
- What objects do users interact with?
- How are entities related? (1:1, 1:many, many:many)
- What's the data model?

### Best Practices
- Focus on most frequent and important tasks first
- Use simple, clear language for task descriptions
- Validate task models with user research or feedback
- Label buttons with actions ("Add Content" not "Submit")

---

## Step 3: Organize Information

Structure content and navigation before visual design.

### Key Questions

☐ **What are the high-level categories/sections?**
- Main content areas or features?
- How can categories be logically grouped?

☐ **What are relationships and hierarchies?**
- What's the hierarchy of importance?
- Which entities relate to which? (1:many, many:many)

☐ **What are primary and secondary navigation patterns?**
- Main nav menu structure?
- Contextual or in-page nav needed?
- Breadcrumbs? Secondary nav?

☐ **What content and actions should be prioritized?**
- What info is critical for task completion?
- How can visual hierarchy guide users?

### Best Practices
- Use card sorting or tree testing to validate IA
- Follow established conventions for nav
- Provide clear labels and signposts
- Use breadcrumbs for deep hierarchies

---

## Step 4: Gather Design Inspiration

Research before creating. Stand on shoulders of giants.

### Choose Your Originality Level

1. **Direct copies** — Replicate existing patterns exactly (fastest, least differentiation)
2. **Remixes** — Combine elements from multiple sources
3. **Indirect parallels** — Inspiration from different domains solving similar problems
4. **Metaphors/analogies** — Real-world concepts informing design
5. **True innovation** — New patterns from first principles (slowest, highest risk)

### Inspiration Sources

**Standard:**
- Dribbble, Behance, Awwwards, Pinterest

**More interesting:**
- ProductHunt — How startups differentiate
- Layers.to — Higher quality than Dribbble
- Pageflows.com — User flows of popular apps
- Mobbin.com — Mobile pattern library
- Teardowns.ai — AI feature patterns

### Best Practices
- Focus on examples matching your project constraints
- Look beyond direct competitors to adjacent domains
- Create moodboards and organized collections
- Annotate what works and what doesn't

---

## Step 5: Generate Rapid Ideas

Quantity before quality. Explore widely before refining.

### Key Activities

☐ **Sketch 6+ low-fidelity concepts**
- Don't judge while creating
- Set a timer (15-30 min)
- Explore diverse approaches

☐ **Vary the fundamentals**
- Different layouts
- Different navigation approaches
- Different information hierarchies
- Different interaction patterns

☐ **Focus on structure, not style**
- Boxes and labels, not colors and fonts
- Workflow and flow, not polish

### Idea Generation Techniques

- **Crazy 8s** — 8 ideas in 8 minutes
- **Worst possible idea** — Then invert
- **How would [X company] do this?** — Steal mental models
- **Analogy mapping** — How does [unrelated domain] solve this?
- **Constraint removal** — What if we had no [budget/time/tech] limits?

### Best Practices
- Timebox ideation to prevent overthinking
- Don't fall in love with first idea
- Involve others for diverse perspectives
- Compare against JTBD to evaluate

---

## Step 6: Enhance Fidelity

Move from concept to detailed design.

### Fidelity Progression

1. **Wireframes** — Structure and layout
2. **Low-fi mockups** — Basic styling, real content
3. **High-fi mockups** — Full visual design
4. **Interactive prototypes** — Testable flows

### Key Questions for Enhancement

☐ **Are all component states defined?**
- Default, hover, active, focus, disabled, loading, error

☐ **Are all interactions specified?**
- Primary interactions (clicks, taps)
- Secondary interactions (hovers, long-press)
- Gestures and shortcuts

☐ **Is content scalability addressed?**
- Empty states
- Minimal content
- Maximum/overflow content
- Edge cases

☐ **Is system feedback clear?**
- Loading states
- Success/error feedback
- Progress indicators

☐ **Is user input handled?**
- Validation states
- Error messages
- Help text

☐ **Is navigation complete?**
- All pages/views connected
- Back navigation
- Deep linking

### Best Practices
- Apply fidelity checklists (see 11-checklist-fidelity.md)
- Apply visual style checklists (see 12-checklist-visual-style.md)
- Test with real content, not lorem ipsum
- Review against JTBD and macro bets

---

## Quick Reference: 6-Step Summary

| Step | Focus | Output |
|------|-------|--------|
| 1. Define System | Platform, constraints, data | System requirements doc |
| 2. Model Tasks | Users, workflows, entities | Task flows, CRUD maps |
| 3. Organize Info | Categories, hierarchy, nav | Information architecture |
| 4. Gather Inspiration | Research, patterns, references | Moodboard, pattern library |
| 5. Generate Ideas | Divergent exploration | 6+ wireframe concepts |
| 6. Enhance Fidelity | Detail, polish, edge cases | High-fi designs, prototypes |

**Rule:** Resist the urge to skip to Step 6. Steps 1-5 make Step 6 dramatically faster and better.