All projects

AIRLINER – HOTEL & FLIGHT BOOKING APP

Lab project

Flights, hotels and trip plans in one booking flow, designed from two real traveller profiles.

Client
AmaliTech
Service provided
Web app – Flight & hotel booking
Duration
2 weeks
Year
2026
Tools
Figma
Platform
Web (desktop 1440, with tablet and mobile rules)
View prototype
Airliner – Hotel & flight booking app: Flights, hotels and itineraries in one responsive booking flow

BACKGROUND & CONTEXT

  • Planning a trip from Ghana usually means flights on one site, hotels on another and the plan itself in a notes app.
  • Prices change between tabs, details get typed in again and again, and the plan is lost once the booking is done.
  • The lab brief: understand responsive design and Figma's responsive tools by designing one booking product end to end.

TARGET USERS

  • Leisure travellers like Sarah (29, marketing manager in Accra): budget-conscious, deciding on price, reviews and what to do there

  • Business travellers like Kofi (42, IT consultant in Takoradi): booking often, sometimes for family, deciding on time, reliability and paperwork

THE GOAL

Let someone search, compare, book and plan a trip in one place, and find it all again under 'Your Trips'.

MY PROCESS

  1. Problem statement & user stories
  2. Personas & mind maps
  3. Sitemap & breakpoint rules
  4. Style guide & components
  5. UI
  6. Prototype

KEY DECISIONS

  1. One search on the home page with Flights and Hotels tabs, so the first action is the main action
  2. Browse without an account; sign in only when you commit to a booking
  3. Loading states for every search, so a slow result never looks like a broken one
  4. A trip is more than a ticket: each itinerary pairs the booking with attractions, activities and restaurants
  5. Mobile Money alongside card and PayPal at payment, for travellers paying from Ghana

THE SOLUTION

  • Search: flights or hotels from one hero, with filters for price, stops, airlines, star rating and amenities.
  • Book: flight and hotel booking flows with seat selection, add-ons, payment and a confirmation.
  • Plan: destination guides with attractions, food, customs and etiquette, and a View Itinerary page with receipt and boarding pass.
  • Return: 'Your Trips' with a calendar and list of itineraries and saved destinations, plus account settings with a live password checklist.

KEY FEATURES

  1. Flights & hotels in one search
  2. Filters & sorted results
  3. Destination guides
  4. Trips calendar & itineraries
  5. Receipt & boarding pass
  6. Card, PayPal & Mobile Money

DESIGN SYSTEM & ACCESSIBILITY

  • A documented style guide: blue #0F3FA9, amber #FFB000, a spacing scale of 2–64 and radii of 8, 12 and 24.
  • Navbar, footer, cards and payment methods built as components with desktop, tablet and mobile variants; the sitemap sets the breakpoint rules (1200+, 768–1199, 320–767).
  • Password rules use ✓ and ✕ icons, not just red and green. Next: white numbers on the amber calendar dates are 1.9:1 and need dark text.
View gallery (11 images)Hide gallery
Airliner personas: Sarah, a budget-conscious leisure traveller, and Kofi, a business traveller with family travel needs(opens full size in a new tab)
Two travellers from the lab's research. Each persona has a mind map in the file.
Airliner sitemap with main navigation, authentication, search and booking, and travel management, plus breakpoint rules(opens full size in a new tab)
The sitemap includes the breakpoint rules every component was built to.
Airliner home page with Dream it, Book it hero and flight search tabs(opens full size in a new tab)
One search, two tabs: the first action is the main action.
Flight search results with filters for price, stops and airlines(opens full size in a new tab)
Filters on the left, sorted results on the right, seats left on every card.
Hotel search results with star rating and amenity filters(opens full size in a new tab)
Hotels follow the same pattern, so nothing has to be relearned.
Dubai destination guide with attractions, activities, restaurants and local customs(opens full size in a new tab)
A destination page that helps you plan, not just book.
Your Trips page with itinerary list and booking calendar(opens full size in a new tab)
Every booking, past and upcoming, in one place.
View itinerary with payment receipt and boarding pass(opens full size in a new tab)
The receipt and boarding pass live with the plan.
Login modal over the search results(opens full size in a new tab)
Sign in only when you commit to a booking.
Airliner colour, spacing and type tokens(opens full size in a new tab)
Tokens first, screens second.
Contrast checks for Airliner blue, body text and amber calendar dates(opens full size in a new tab)
Blue and body text pass; amber needs dark text.

BY THE NUMBERS

Search for flights and hotels
1
Sign-ins needed to browse
0
Ways to pay, Mobile Money included
3

OUTCOME

  • A complete desktop booking product, from search to boarding pass, backed by a documented problem, personas and sitemap.
  • A component library with breakpoint variants ready for the tablet and mobile layouts.
  • A clear plan for the next breakpoints: what stacks on tablet, and what mobile prioritises (upcoming trips and quick actions).

What I learned

Writing the breakpoint rules before drawing the screens made the components honest: every part had to know how it would shrink.

View prototype