Humayon Kabir

All work

EduBridge BD: I rewrote a UK brief for parents on Android phones

A tutoring marketplace asked for a desktop-first, English-only, card-only booking flow. Most of that was wrong for Bangladesh.

Type
Course project (Ostad, Claude for UI/UX Designers)
Year
2026
Role
UX designer, sole contributor
Built
Parent-facing booking request screen as working HTML, plus design tokens
Shipped
No. It was reviewed, not released to users.

Open the Figma fileSee the screens

The screens

The result: four screens from the booking flow I designed. The Figma file holds all of them, in a 390px mobile version and a desktop version for screens from 768px up. The story of how I got here follows.

  • Booking Request screen: navy header with 'Booking Request' and its Bangla title, a rate card reading 800 taka per hour, tutor Roksana Begum with a grey 'Verification pending' badge, qualifications, and a green 'Send booking request' button.
    1. Booking Request: the rate comes first.
  • Checkout screen: order summary with tutor, subject, duration and a total of 800 taka, then bKash selected and Debit or Credit Card as payment methods.
    2. Checkout: cost visible before the payment method.
  • Hand-off screen titled 'Leaving EduBridge', with the bKash logo, 'Opening bKash', the amount, and a button reading 'I've completed payment in bKash'.
    3. bKash hand-off: tells the parent what happens next.
  • Confirmation screen reading 'Your booking is confirmed' with a 'What happens next' note and an amount, transaction ID and tutor summary.
    4. Confirmation: the booking, not the payment.

The Figma file is the master. These images are rendered from my working HTML of the same screens.

The brief

The brief asked for a desktop-first, English-only booking and payment flow built around students as the primary user, using the same Stripe card checkout already live in the UK and Australia. EduBridge runs one shared platform across all markets.

A separate PM thread said something different: parents pay, mobile is the default, and Bangla matters.

The problem underneath

The task was "build a booking screen". The real problem was that two of the brief's core assumptions would have made the client's 15% conversion target nearly impossible in this market.

The brief targeted students in English, but parents decide and pay, and most are not comfortable in an English interface the way their kids are. It assumed card checkout, but most parents here pay with bKash, which is a different flow with its own app switch, OTP and error states.

I read the two documents together and found five contradictions: device, checkout, language, who the user is, and video calling. I took a side on each. Parents first, mobile first, Bangla from day one, bKash as the primary path, video calling out of scope. I wrote these down before any screen existed.

What I built

Before any screen, I locked the design tokens in a tokens file, so Claude could not invent its own colors, spacing or type scale. Then I directed Claude Code screen by screen, checked each render against what I intended, and called out spacing and type that drifted from the scale.

The screen is the parent-facing Booking Request, a single mobile card capped at 400px. A navy header carries the title in two languages: "Booking Request" with "বুকিং অনুরোধ" beneath it. The body opens with the rate, "৳ 800 / hour", before anything about the tutor. Below it sit the tutor summary and qualifications, and a "Verification pending" badge that I deliberately did not color green, because who issues the badge was still an open question. A full-width "Send booking request" button is pinned at the bottom, with the note: "No payment is charged until the tutor confirms the booking."

The file also holds three more states: an empty state, a loading state that says "Checking this tutor's details…" instead of showing a spinner, and an error state for a mismatched bKash transaction ID that tells the parent their booking is still held while they retry.

What I rejected

  • "Payment verified" as the confirmation headline. That is a payment fact. The parent at that moment needs to know the booking succeeded, so I changed it to "Booking confirmed".
  • Tutor summary above the rate. The brief required cost to be visible before payment method is chosen, and the rate is the commitment decision on this screen. I moved it above the tutor's identity.

Outcome, and what I got wrong

This is a course project, so it did not ship to real users. I ran the checkout through three structured review passes: a confused user, a shipping engineer and a skeptical PM. They found real gaps: no way to cancel or go back once a parent leaves for bKash, no defined verification step behind "Confirm payment", and an error-handling gap between the two payment paths. I ranked the findings and put the bKash hand-off fixes first.

My mistake. I pre-selected bKash and labeled it "Most parents choose this". That was true for this market. But I had built five error states for bKash and none for the card path. The PM review pointed out that my default sent more people into the flow I already knew broke five ways, while the card path got less traffic and no safety net.

I did not mean to bias the flow. Unequal design effort did it for me. I added the missing Card Payment Failed screen, and now I build error handling for every path before I default to any one of them.

A second mistake: I went straight to high-fidelity screens and drew the wireframes afterwards, from the build. They recorded where the build disagreed with my information architecture instead of shaping it. On the next project I wireframe first.

Error screens, bKash and card

The mistake above, in pictures. bKash has five error screens. The card path had none until the review. The last screen here is the one I added.

  • bKash error screen: 'Transaction ID doesn't match' with a Bangla subtitle, a short explanation and a green 'Try again' button.
    bKash: wrong transaction ID.
  • bKash error screen: 'Not enough balance in bKash' with a button to choose a different payment method.
    bKash: not enough balance.
  • Card error screen: 'Your card was declined', with 'No money has left your account' and a link to pay with bKash instead.
    Card: declined. Added after the review.

Scope I held

I got the boundary in writing before designing: four numbered questions to the PM about the payment flow. Video calling was excluded from this phase. Nagad was left out of this pass. Revision rounds were defined as one consolidated batch of feedback per screen, and anything beyond three rounds is billed separately.