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

Delivered interface evidence

One cabin experience across every viewport.

The same spatial tour, aircraft navigation and hotspot content had to remain understandable across desktop, tablet and mobile without reducing the smaller experience to a cropped desktop view.

Responsive TUI 360° premium-cabin experience shown across desktop, tablet and mobile layouts.
FIG 01 Responsive cabin exploration shown across desktop, tablet and mobile layouts.

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

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.

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.