UI/UX templates

# Design handoff: [screen name]

Designer: ______  Developer: ______  Date: ______

## The screen
- [ ] Purpose in one line: what can someone do here that they could not before?
- [ ] Entry points: where do people arrive from?
- [ ] Primary action, and what happens after it
- [ ] Out of scope for this release

## States (a screen is not done until all of these exist)
- [ ] Empty: first use, nothing to show, with a next step
- [ ] Loading: skeleton or spinner, and what stays visible
- [ ] Partial: some data missing or still arriving
- [ ] Error: what went wrong, in plain words, and how to recover
- [ ] Success or confirmation
- [ ] Long content: longest realistic name, 3-line heading, 200 rows

## Responsive
- [ ] 360 px, 768 px, 1280 px behaviour described, not just drawn
- [ ] What reflows, what stacks, what gets hidden (and why hiding it is safe)
- [ ] Touch targets at least 44 px on phone

## Tokens used
- Spacing: ______   Radius: ______   Shadow: ______
- Type styles: ______
- Colors by token name, not hex: ______

## Interaction
- [ ] Hover, focus, active, disabled for every control
- [ ] Focus order and keyboard path through the screen
- [ ] Animation: what moves, how far, how long
- [ ] What happens on slow connections

## Accessibility
- [ ] Contrast checked for every text and background pair
- [ ] Alt text written for meaningful images
- [ ] Form fields have visible l

[...]

# Usability test script

Product: ______  Date: ______  Participant: P__  Moderator: ______

## Before (2 min)
"Thanks for making time. I am testing the product, not you, so there are no wrong answers.
Please think out loud as you go. If something confuses you, say so. That is the useful part.
I did not build all of this, so be as blunt as you like. May I record the screen and audio?"

## Warm-up (3 min)
1. Tell me about your role and what a normal week looks like.
2. How do you handle [the problem this product solves] today?
3. What is the most annoying part of that?

## First impression (2 min)
Show the landing screen for 5 seconds, then hide it.
4. What is this product for?
5. Who is it for?
6. What would you do next?

## Tasks (15 min) — give the goal, never the steps
Task 1: ______________________
  Success looks like: ______  Time: ____  Completed: Y / N / with help
  Where they hesitated:

Task 2: ______________________
  Success looks like: ______  Time: ____  Completed: Y / N / with help
  Where they hesitated:

Task 3: ______________________
  Success looks like: ______  Time: ____  Completed: Y / N / with help
  Where they hesitated:

Prompts when they go quiet: "What are you thinking?" · "What did you expect to happen?"
· "What would you do if I was not here?"
Never: "Just click the blue button."

## Wrap-up (5 min)
7. What was the most frustrating moment?
8. If you

[...]

# Website audit: [site]

Auditor: ______  Date: ______  Pages reviewed: ______

## Score
First impression (5 sec test)        /10   notes:
Visual hierarchy                     /10
Navigation and information scent     /10
Content clarity                      /10
Forms and conversion                 /10
Accessibility                        /10
Mobile                               /10
Speed and stability                  /10
Trust signals                        /10
Consistency                          /10
TOTAL                               /100

## The 5 second test
Ask three people who do not know the company: what does this do, who is it for, what would you do next?
Answers:
1.
2.
3.

## Findings
| # | Severity | Page | What is wrong | Why it costs money | Fix |
|---|----------|------|---------------|--------------------|-----|
| 1 | Critical |      |               |                    |     |
| 2 | High     |      |               |                    |     |
| 3 | Medium   |      |               |                    |     |

## Top three fixes, in order
1.
2.
3.

## What I could not verify
(analytics, real user data, server-side behaviour)