The UI UX Designer Projects That Actually Create Conversation

Me: Tell me about this travel app.
Candidate: It is a travel booking app with a modern UI.
Me: Who is it for?
Candidate: For travellers.
Me: What problem does it solve?
Candidate: It makes booking easier.
Me: What was the hardest decision?
Candidate: The colour palette, I tried a few options.

(Nothing here I can dig into.)

Me: Tell me about this clinic booking redesign.
Candidate: A small clinic near my home takes bookings on
the phone. Reception staff are busy, so patients wait on
hold. I designed a web booking flow for them.
Me: What was the constraint?
Candidate: Doctors change their timings daily, so slots
cannot be fixed. I designed for the receptionist to open
slots each morning in under a minute.
Me: Why that and not automatic slots?
Candidate: The clinic had no calendar system to connect to.

(Now I want to hear about testing, edge cases, the
receptionist's view. The conversation has places to go.)

PROJECT: Failed payment recovery for a ticket booking flow

Problem: When UPI payment times out, users see a generic
'Something went wrong' and do not know if money was taken.

States to design:
  1. Payment pending (money may still arrive)
  2. Payment failed, not charged
  3. Charged but booking not confirmed
  4. Session expired, seats released

Constraint: Bank confirmation can take a few minutes,
so the app cannot always know the result instantly.

Key decision to discuss:
  Hold seats during 'pending' or release them?
  Trade-off: user trust vs seats blocked for others.

PROJECT TYPE 5: Information-heavy screen redesign

Example: A college exam timetable or results page
that students read on phones.

Friction:
  - Lots of data, small screen
  - Different students need different rows
  - Must still work when printed or screenshotted

Decisions that create questions:
  - Table vs card list on mobile
  - What to filter by default (branch, semester)
  - How to show changes after the timetable is revised

Evidence: ask five students to find their next exam
in the old and new versions and note what slowed them.

// WCAG 2.x contrast ratio between two hex colours
function luminance(hex) {
  const rgb = hex.replace('#', '').match(/.{2}/g)
    .map(h => parseInt(h, 16) / 255)
    .map(c => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4));
  return 0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2];
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

console.log(contrast('#777777', '#FFFFFF').toFixed(2)); // 4.48 -> fails AA body text
console.log(contrast('#595959', '#FFFFFF').toFixed(2)); // 7.00 -> passes AA and AAA

ACCESSIBILITY AUDIT LOG - college admissions page

#  Issue                         Criterion   Priority
1  Grey body text on white       Contrast    High (all text)
2  'Apply' is a div, no keyboard Keyboard    High (blocks task)
3  Focus ring removed in CSS     Focus       High
4  Inputs use placeholder only   Labels      Medium
5  Campus photos lack alt text   Alt text    Low (decorative)

Fixed first: 2, then 1 and 3.
Reason: issue 2 stops keyboard users from applying
at all; the others make the task harder but possible.

PROJECT BRIEF

User group (specific):   ______________________
Where I will meet them:  ______________________
The one flow I will fix: ______________________
Problem I observed:      ______________________
Real constraint:         ______________________
  (time, tech, policy, budget, device, staff)
Hardest decision I expect: ____________________
How I will test:         ______________________
What 'better' means:     ______________________
Time box:                ____ weeks

If any line is blank, shrink the scope.

BEFORE ADDING IT TO YOUR PORTFOLIO

Ask a friend to read the case study for 3 minutes,
then ask you 5 questions. Count them:

[ ] Did they ask about a decision? (good)
[ ] Did they ask about a constraint? (good)
[ ] Did they ask 'who is this for?' (bad sign: unclear user)
[ ] Did they only comment on colours? (bad sign: no tension)

If most questions are about visuals, add the
decision and constraint more clearly to the page.

A BALANCED FRESHER PORTFOLIO (2 to 4 projects)

Project A: Real-user flow redesign
  -> shows research, constraints, testing

Project B: Accessibility audit or unhappy-path design
  -> shows rigour and thinking beyond the happy path

Project C (optional): Mini design system
  -> shows consistency, components, variables

Project D (optional): Visual concept
  -> fine for visual range, but label it as a concept

Lead with A. Never lead with D.