Baobab Ticket: mobile ticketing for intercity coaches

Charbel Mehinto

Product Designer UI/UX

Baobab Ticket: mobile ticketing for intercity coaches
Baobab Ticket: mobile ticketing for intercity coaches, hero

The problem

To travel to Parakou or Lomé, passengers go to the station the day before, pay cash and hope the coach leaves on time. No operator in the region offers real mobile ticketing.

Baobab Ticket: mobile ticketing for intercity coaches, contra 04Baobab Ticket: mobile ticketing for intercity coaches, problemBaobab Ticket: mobile ticketing for intercity coaches, dribbble 03

The solution

Book a seat from your phone in under a minute, get a QR ticket, share it with a relative and track the coach until arrival.

Baobab Ticket: mobile ticketing for intercity coaches, overviewBaobab Ticket: mobile ticketing for intercity coaches, contra 01

Key features

  • Search, results and coach seat map

  • Shareable QR ticket and arrival notification for a relative

  • Real-time coach tracking

  • Operator back-office: busy routes, lines, parcels, fleet, drivers, billing

Baobab Ticket: mobile ticketing for intercity coaches, dashboardBaobab Ticket: mobile ticketing for intercity coaches, dribbble 01Baobab Ticket: mobile ticketing for intercity coaches, controlBaobab Ticket: mobile ticketing for intercity coaches, contra 03

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).

Baobab Ticket: mobile ticketing for intercity coaches, timelineBaobab Ticket: mobile ticketing for intercity coaches, dribbble 02

Design choices

Baobab green #2F5D3A for trust and travel, night blue #12223F for text, ochre #F2B544 as the accent. Montserrat for headings, Inter for body text. The seat map and QR ticket are built for quick reading in bright sunlight at the station.

Baobab Ticket: mobile ticketing for intercity coaches, contra 02Baobab Ticket: mobile ticketing for intercity coaches, login

Landing page

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

Baobab Ticket: mobile ticketing for intercity coaches, liveBaobab Ticket: mobile ticketing for intercity coaches, dribbble 04Baobab Ticket: mobile ticketing for intercity coaches, web platform

Deliverables

  • iOS and Android mobile app

  • Web back-office

  • Landing page

  • Design system, Behance presentation and LinkedIn carousel

Baobab Ticket: mobile ticketing for intercity coaches, screens

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.

baobab-ticket-intercity-bus-ticketing-ui-ux-case-study visual 1
baobab-ticket-intercity-bus-ticketing-ui-ux-case-study visual 2
baobab-ticket-intercity-bus-ticketing-ui-ux-case-study visual 3

Comments (0)

  • Be the first to comment.

Give your brand the website it deserves

15 minutes to review your current site and leave with a clear plan. Free, no commitment.