TUI / Interactive aircraft experience

Explore before boarding.

A responsive, multilingual aircraft experience connecting interactive 360° tours with content managed through a headless CMS.

Inspect the experience
Boeing 787 Dreamliner cabin exploration instrument A technical top-down Boeing 787 Dreamliner drawing with swept wings, twin engines and a tapered tail, surrounded by a 360-degree route, responsive viewport markers and multilingual content annotations. 360° VIEW HOTSPOTS RESPONSIVE CMS / LOCALES CABIN ROUTE
Spatial exploration / responsive interface / managed multilingual content
Client
TUI
Delivery
4 weeks / 2 sprint cycles
Role
Senior Product Designer, UX/UI Designer & Front-end Developer
Scope
Interactive experience, CMS integration and multilingual support

Connected challenge

Spatial exploration and editorial control had to work as one product.

Passengers needed a clear way to compare aircraft types, cabins and in-flight services through complex 360° imagery.

Content teams also needed to update supporting information across aircraft and languages without requiring a developer to alter the interface for every change.

USER Explore the aircraft Cabins / seats / services / hotspots
EXPERIENCE TUI 360° Spatial interaction joined to useful content
EDITOR Manage the content Aircraft / locales / information / updates

Experience journey

Four connected steps turned complex 360° content into a usable journey.

The interface needed to help passengers choose the right aircraft, explore the cabin, inspect hotspots and read supporting information while remaining coherent across desktop, tablet and mobile.

01 Choose aircraft
Responsive TUI aircraft-selection interface shown across desktop, tablet and mobile layouts.
FIG 01 Aircraft selection establishes the correct model and cabin before entering the 360° experience.
02 Enter the cabin
Responsive TUI 360 premium-cabin experience shown across desktop, tablet and mobile layouts.
FIG 02 The core panoramic cabin experience remains navigable across desktop, tablet and mobile layouts.
03 Inspect hotspots
Responsive TUI location-map interface showing aircraft wayfinding and hotspot navigation across desktop, tablet and mobile.
FIG 03 Location-map views and hotspot navigation keep spatial exploration anchored inside the aircraft.
04 Read the detail
Responsive TUI inflight-food content panel shown across desktop, tablet and mobile layouts.
FIG 04 Contextual content panels surface localised supporting information without breaking the exploration flow.

Interaction model

A clear route through a non-linear space.

The interface gave people freedom to look around while retaining enough structure to understand location, aircraft context and the information attached to each hotspot.

  1. 01 Choose aircraft Start with the right model and cabin
  2. 02 Enter the cabin Maintain orientation inside the panorama
  3. 03 Inspect hotspots Reveal details without leaving the view
  4. 04 Read the detail Support decisions with localised content

Content topology

The panorama stayed stable while content changed around it.

Separating editorial content from interface code allowed aircraft information, hotspot detail and translations to be managed through a headless CMS.

INPUT Headless CMS Aircraft / cabin / hotspot / locale
MODEL Structured JSON Content separated from presentation
Aircraft Hotspots Languages

Decision register

Three decisions protected clarity and delivery.

The product needed to feel exploratory without becoming disorienting, and flexible without moving content management into the interface code.

  1. 01 Keep spatial exploration anchored.

    Aircraft and cabin context remained visible so free movement through the panorama did not remove a person’s sense of location.

  2. 02 Separate content from presentation.

    CMS-managed structured content could change across aircraft and languages without redesigning the interaction layer.

  3. 03 Design mobile around the task.

    Responsive behaviour prioritised exploration and information needs rather than compressing the desktop arrangement.

Delivery trace

Four weeks. Two connected sprint cycles.

SPRINT 01 Frame the experience Spatial interaction / responsive structure / content model
SPRINT 02 Connect and deliver Interface refinement / CMS integration / multilingual support

Evidence boundary

The interactive experience, CMS integration and multilingual structure were delivered.

The work was completed across two sprint cycles and directly observed in use. Commercial performance, engagement, conversion and satisfaction outcomes were not quantified, so none are claimed.

Interface perspective

Intuitive and functional were the same requirement.

“Michael's ability to create outstanding user interfaces that are not only intuitive but also highly functional is impressive. During his time working for my department, he has built solutions across many different domains, including big data dashboards/live infographics, MDM, virtual reality and portal sites. Not only that, but he is a great guy!”

Yas Poptani

Next case study

TUI Content Hub

Examine Content Hub

Need interaction and content to move together?

Tell me what people need to explore, what editors need to control and where the experience must adapt.

Start a conversation

I usually respond within two working days.