User goal statement template
As a ____ (user)
I want to ____ (goal)
so that ____ (benefit)
while ____ (context or constraint)

Example:
As a first-time patient, I want to book the earliest available slot
so that I can see a doctor this week, while using my phone on a bus.

Five-question user interview
1. Tell me about the last time you ____.
2. What did you do first? Then what?
3. What was frustrating or slow?
4. What did you do to work around it?
5. If you could change one thing, what would it be?
Listen more than you talk. Ask 'why' instead of suggesting answers.

/* A simple, consistent scale for a beginner project */
:root {
  --font-sans: "Inter", system-ui, sans-serif;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 20px;
  --text-xl: 28px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
}
body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; }
h1 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.card { padding: var(--space-4); }
.stack > * + * { margin-top: var(--space-3); }

/* One primary action; secondary actions are quieter */
.btn { padding: 8px 16px; border-radius: 8px; font-weight: 600; }
.btn-primary { background: #2952cc; color: #fff; border: 1px solid #2952cc; }
.btn-secondary { background: transparent; color: #2952cc; border: 1px solid #2952cc; }
.btn-text { background: none; color: #2952cc; border: none; text-decoration: underline; }

<!-- Visible label, helpful hint, clear error tied to the field -->
<label for="phone">Mobile number</label>
<p id="phone-hint" class="hint">10 digits, without +91</p>
<input id="phone" name="phone" type="tel" inputmode="numeric"
       autocomplete="tel-national" aria-describedby="phone-hint phone-error"
       aria-invalid="true">
<p id="phone-error" class="error" role="alert">
  Enter a 10-digit mobile number, for example 9876543210
</p>

Five-user usability test (20 minutes each)
Intro: "We're testing the design, not you. Please think aloud."
Task 1: Book the earliest slot with Dr. ____ this week.
Task 2: Change the booking to the next day.
Task 3: Find the clinic's address.
Observe: where they hesitate, mis-tap or ask questions.
After: "What was hardest?" "What did you expect to happen?"
Record issues by frequency and severity.

Screen: ____
User goal on this screen: ____
Squint test — what stands out? ____ Is it the right thing? Y / N
Primary action clear? Y / N
Text readable (size, contrast)? Y / N
Spacing consistent? Y / N
Two improvements I would make: ____, ____

1. Pick a confusing screen from an app you use
2. Write the user goal statement
3. List 3 problems using the usability principles
4. Sketch 2 alternative layouts on paper
5. Build the better one in Figma with a type and spacing scale
6. Test with 3 people; note what changed

☐ Body text contrast at least 4.5:1
☐ Every input has a visible label
☐ Errors explain how to fix the problem
☐ Information not shown by colour alone
☐ Tap targets comfortably large
☐ Layout still works with bigger system text