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.