Best UI/UX Design Learning Path for BBA Graduates

# User Interview Synthesis — a UX researcher's core deliverable
# This is what turns 5 interviews into a defensible design decision.

## Study Brief

**Product:** Mobile banking app for young professionals
**Problem:** Users abandon the payment flow at the "confirm" screen
**Research question:** Why do users drop off at confirmation?
**Method:** 6 moderated 30-minute interviews with users who abandoned
**Recruited from:** Analytics segment + customer support tickets

## Key Findings

### Finding 1 — Trust gap at confirmation
All 6 participants expressed uncertainty about whether the payment
had been "sent" after tapping Confirm. Three explicitly said they
feared double-charging and closed the app to check.

> "I tapped confirm and then panicked — is it done? Should I tap again?
> I closed the app to check my balance." — P2

### Finding 2 — No progress indicator
4 of 6 participants thought the app had frozen after tapping Confirm.
The screen shows a spinner but no message, no estimated time, and
no progress state.

> "I waited like 10 seconds and nothing happened, so I closed it." — P5

### Finding 3 — Jargon in error messages
When payment failed, the error message said "Transaction declined by
issuer." 5 of 6 participants did not understand what this meant or
what to do next.

> "I don't know what an issuer is. Is it my bank? What do I do?" — P1

## What This Changes

| Design decision | Current | Proposed |
|-----------------|---------|----------|
| Confirm state | Spinner only | Spinner + "Processing your payment" + elapsed timer |
| Success state | Redirect to home | Full-screen confirmation + "Payment sent to X" |
| Error message | "Declined by issuer" | "Your bank declined this payment. Try a different card or contact your bank." |

## Open Questions
- Would a "You can safely close this screen" message reduce anxiety?
- Do users who add payees recently behave differently?

# Why this matters:
# - This is a real UX research deliverable.
# - It converts qualitative interviews into a design action plan.
# - BBA graduates are extremely strong at this — you already
#   think in structured problem, finding, recommendation format.
#
# What interviewers look for:
# - Did you ask sharp questions?
# - Did you find patterns, not just quotes?
# - Can you connect the finding to a design change?

/* design-tokens.css — the foundation of any real UI system */

:root {
  /* Colour scale — semantic, not literal */
  --color-primary-50:  #eff6ff;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;

  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-200: #e2e8f0;
  --color-neutral-500: #64748b;
  --color-neutral-900: #0f172a;

  --color-success-500: #10b981;
  --color-error-500:   #ef4444;
  --color-warning-500: #f59e0b;

  /* Typography — a real scale */
  --font-sans: "Inter", system-ui, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;

  /* Spacing — 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows — subtle, layered */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.10);
}

/* Why this matters:
   - Design tokens make every screen consistent.
   - Changing --color-primary-500 updates the whole product.
   - Designers and developers share one source of truth.
   - This is one of the first things a UI/UX course should teach.
   - When a BBA graduate can talk about tokens, they sound
     like a designer, not a marketer. */

/* A real component using the tokens */
.card {
  background: var(--color-neutral-0);
  border: 1px solid var(--color-neutral-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}

.card__title {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}

// usability-analysis.js — what a UX designer does after a test
// 5 users, 3 tasks, one spreadsheet, real decisions.

const sessions = [
  { user: 1, task: "Sign up", completed: true,  time: 38, errors: 0, satisfaction: 4 },
  { user: 2, task: "Sign up", completed: true,  time: 52, errors: 1, satisfaction: 3 },
  { user: 3, task: "Sign up", completed: false, time: 90, errors: 3, satisfaction: 2 },
  { user: 4, task: "Sign up", completed: true,  time: 41, errors: 0, satisfaction: 4 },
  { user: 5, task: "Sign up", completed: true,  time: 63, errors: 1, satisfaction: 3 },
];

const completed = sessions.filter(s => s.completed).length;
const avgTime = sessions.reduce((sum, s) => sum + s.time, 0) / sessions.length;
const avgErrors = sessions.reduce((sum, s) => sum + s.errors, 0) / sessions.length;
const avgSatisfaction = sessions.reduce((sum, s) => sum + s.satisfaction, 0) / sessions.length;

console.log(`Task success rate: ${(completed / sessions.length) * 100}%`);
console.log(`Average time on task: ${avgTime.toFixed(1)}s`);
console.log(`Average errors per user: ${avgErrors.toFixed(1)}`);
console.log(`Average satisfaction: ${avgSatisfaction.toFixed(1)}/5`);

// Failing user 3 — what happened?
const failed = sessions.find(s => !s.completed);
console.log(`User ${failed.user} failed after ${failed.time}s with ${failed.errors} errors.`);

// What a UX designer does with this:
// - 80% success is not enough — user 3 hit 3 errors before giving up
// - 56s average sign-up is too slow — target should be under 45s
// - Satisfaction of 3.2/5 is below the 4.0 target
// - Re-watch user 3's session to find where they got stuck
// - Redesign the form, test again, measure again
//
// Why this matters for BBA graduates:
// - This is analysis plus business framing — a BBA strength.
// - You are not just testing — you are measuring and reporting.
// - The output looks like a business report, not a design note.
// - Hiring managers love this because it makes design decisions
//   defensible in a business review.