Duration 3 days – 21 hrs
Overview
This 3-day on-site enablement program strengthens UX literacy, collaboration, and delivery readiness for banking business and product teams. Participants experience the full UX journey—from problem framing to interactive prototyping and handover—using FigJam, Figma, and AI-assisted workflows, without the expectation of becoming UX/UI designers.
Objectives
- Build a shared understanding of UX/UI principles in a banking context
- Enable hands-on collaboration using FigJam and Figma
- Develop confidence in designing and reviewing prototypes
- Improve design handover clarity and reduce rework
- Introduce responsible AI usage through Figma Make
Target Audience
- Product Owners / Product Managers
- Business Analysts / Requirements Analysts
- Digital Channel / Banking Product Specialists (e.g., deposits, loans, cards, payments)
- Operations / Process Owners (branch, call center, back office, fulfillment)
- Transformation / Continuous Improvement / Agile teams (PMO, Scrum teams, change teams)
- Technology partners involved in delivery
- Developers (front-end/back-end)
- QA / Testers
- Solution Analysts / Tech Leads (optional but recommended)
Prerequisites
- Comfortable using a laptop for hands-on work (basic file handling, browser tabs, shortcuts).
- Familiarity with your bank’s products/processes (e.g., onboarding, payments, customer service flows).
- Willingness to collaborate in teams and give/receive structured feedback.
Course Outline
Day 1 — UX/UI Design Thinking + FigJam Collaboration (Problem → Insight → Direction)
Outcome: Teams align on the right problem, define success, and produce a shared UX blueprint before jumping to screens.
Kickoff + shared language (Banking UX essentials)
- What “good UX” means in banking: trust, clarity, risk controls, accessibility, error recovery, security friction
- UX vs UI vs CX vs Service Design (who owns what)
- Roles in a cross-functional UX workflow (Business/Product/Ops/Tech/Compliance)
Exercise: “Bad-to-better” teardown of a banking flow (group critique using a simple rubric).
User + journey understanding
- Personas (lightweight, practical) and context of use
- Journey mapping (happy path + edge cases + failure states)
- Moments that create rework: unclear requirements, missing error states, unclear ownership
Exercise (FigJam): Build a Journey Map + Pain Points for a selected bank flow.
Problem framing & prioritization
- Problem statements that drive action (not just symptoms)
- How Might We (HMW), assumptions mapping, and risk hotspots (fraud, KYC, limits, regulatory steps)
- Prioritization: impact vs effort, risk vs value, quick wins vs structural fixes
Exercise (FigJam): Create Problem Statement + HMW + Prioritized Opportunities.
Solution sketching (collaborative, low-fidelity)
- Crazy 8s / lightning sketches (no design tools yet)
- UX flow thinking: steps, decisions, guardrails, microcopy prompts
- Acceptance criteria starters (what “done” looks like)
Exercise (FigJam): User Flow + Low-fi concept sketches per team.
Alignment checkpoint
- Defining success metrics (conversion, time-to-complete, error rate, call deflection)
- Design principles for the use case (3–5 rules the team agrees to follow)
Day 1 deliverables (per team)
- Persona snapshot (lightweight)
- Journey map + pain points + opportunities
- Problem statement + success metrics
- User flow + low-fi sketch board
Day 2 — Figma Basics: Designing Foundations (From Flow → Wireframes)
Outcome: Teams can produce clear, consistent low-fidelity screens that reflect the agreed flow and banking constraints.
Figma orientation (only what teams need)
- Files/pages/frames, naming conventions
- Layout fundamentals: grids, spacing, hierarchy
- Collaboration basics: comments, versions, branching concept (if applicable)
Exercise: Set up the team file structure and page templates.
Wireframing that reduces rework
- Information hierarchy and clarity
- Banking patterns: forms, OTP steps, confirmation, receipts, disclosures, limits, error states
- Content design basics: labels, helper text, warnings, “what happens next”
Exercise: Build Low-fi Wireframes for the chosen flow (happy path first).
Auto Layout + reusable building blocks (starter level)
- Why Auto Layout matters for responsiveness and consistency
- Creating simple components (buttons, form fields, cards)
- Variations: primary/secondary, enabled/disabled, error
Exercise: Create a mini component kit for the flow.
Accessibility + quality checks (banking-ready habits)
- Contrast, font sizing, focus states (conceptual), error messaging
- Checklist-based review: clarity, completeness, compliance touchpoints
Exercise: Run a Wireframe Quality Review using a rubric.
Day 2 deliverables (per team)
- Figma file organized with pages + naming conventions
- Wireframes for the flow (including key error states)
- Mini component set for consistency
- Quality review notes + revisions
Day 3 — Advanced Figma: Prototyping, Review, Handover + Responsible AI (Figma Make)
Outcome: Teams can create an interactive prototype, run a structured design review, and package a handover that engineers can implement with fewer back-and-forth cycles.
Interactive prototyping essentials
- Links, overlays/modals, stepper flows
- Designing for realistic states: loading, empty, error, success
- Prototype storytelling for stakeholders
Exercise: Build a clickable prototype for the full flow.
Structured design reviews (how teams approve work)
- Review roles: approver, challenger, scribe
- Review rubric: usability, clarity, risk/compliance, edge cases, feasibility
- How to document decisions and open questions
Exercise: Design Review Simulation (each team presents; others review using the rubric).
Handover that engineers actually love
- Dev-ready annotations: intent, rules, validations, API notes (at a high level)
- Dev Mode (if available): specs, measurements, assets
- Reducing ambiguity: “must/should/could” requirements
- Handover pack structure: flow map, screens, states, rules, open items
Exercise: Produce a Handover Pack inside the Figma file (and a 1-page summary).
AI-assisted workflows (Responsible AI using Figma Make)
Note: exact AI features depend on your org’s account settings. If “Figma Make” isn’t enabled, we’ll apply the same workflow using your approved AI tools and keep the outputs inside Figma.
- What AI is good for in UX work: ideation, variations, microcopy options, edge-case brainstorming
- What AI should NOT do: invent policies, generate compliance answers, use sensitive data
- Prompt patterns for banking UX:
- Generate alternative layouts (same intent, clearer hierarchy)
- Suggest error messages and helper text options
- Identify missing states and edge cases
- Human-in-the-loop: validation, bias checks, approvals, audit trail
Exercise: Build a small Prompt Library + generate 2–3 design/microcopy variations, then select and justify the final choice.
Day 3 deliverables (per team)
- Clickable prototype with key states
- Design review outcomes + decision log
- Handover pack (screens + rules + notes)
- Responsible AI checklist + prompt library snippet
