UniBus UAC: seat booking for university buses

The problem

Every morning, thousands of students crowd around full buses with no way to know if a seat is left or when the bus will arrive.

The solution

A seat booked in your name: pick a departure, choose a seat on the bus map, pay by Mobile Money, board with a QR pass scanned by the supervisor, with an automatic waitlist.

Key features

• Bus seat map and named-seat booking

• QR boarding pass and live bus tracking

• Supervisor flow: scan, boarding list, documented refusal

• Back-office: routes and schedules, full departures, incident reports, revenue, audit log

Design process

Four phases: discovery (interviews, audit of the current service), definition (user flows, information architecture), design (UI, design system, prototype) and delivery (landing page, specs).

Design choices

Campus blue #1F4FA3 for the university and trust, sun yellow #F4C430 for accents and boarding, ink #111827 for text. Bricolage Grotesque for headings, Instrument Sans for body text; bus seat map and QR pass built for quick reading at the stop.

Landing page

A landing page presents the offer, shows the app and the back-office, and drives downloads.

Deliverables

• iOS and Android mobile app

• Web back-office

• Landing page

• Design system, Behance presentation and LinkedIn carousel

My role

User research and personas, user flows, information architecture, high-fidelity UI design, design system and interactive prototype in Figma. Screens are produced with a custom TypeScript Figma plugin driven by a UI kit, with accessibility checks: 4.5:1 contrast, 44 px touch targets, errors never conveyed by colour alone.

Unofficial portfolio concept, not commissioned by the organisations mentioned.