TUI Group logo

Taking a bold step into the digital by default future

Read on

TUI Group is the worlds largest tour operator. I worked in their Specialist Holiday Division, a group of luxury and long haul tour operators as lead designer of a UX team tasked with re-designing their e-commerce platform,moving their businesses to a new content platform and using the process as a digital transformation tool.

Photo of laptop with website
We created a new search and book platform for three longhaul brands

The Core Team

  • User Research Team
  • UX Design Team (me, plus four others)
  • Business Analysts
  • Development Team consisting back-end and front-end developers
  • Third party development team
  • Testing Team
  • Sales, Marketing and Commercial departments

My role

UX Design Lead for the duration of the project

Project deliverables

The project launched two full transactional websites for two brands

  • New content model
  • New content management system
  • New UX for browse, search and booking
  • Integration of peakworks dynamic packaging cache

My process

Overview

Tour operating is fiercly competitive. The businesses were facing tough competition both online and offline. To boost sales and move more sales online they commissioned a redesign of their ageing e-commerce platform. I led a team of designers on this complex re-platform using Hybris and Peakwork.

Their packages consist of scheduled flights + accommmodation + transfers. These are dynamically packaged using global reservation systems.Traditionally searches might take ten or twenty seconds. We wanted to reduce that to under a second.

They also offered more complex multi-centre and tour packages which was a small but growing part of the business.

The project touched all aspects of the businesses and helped a wider digital transformation of the way they operated.

Research Synthesis

Our lead researcher led some qualitative research into peoples buying behaviour in the form of disry studeis. From this we produced a very detailed (A0) mental model, task model and set of personas. This showed detailed user needs at differing stages of their holidaying cycle.

Screenshot of three customer profile documents
Our three main customer profiles as identified by qualitative research

 

Content modelling

We mapped out all content needs from our new mental model. This allowed us to identify all missing content and create a brand new content model.

This included more detail for hotels and a flexible heirarchy for destinations. (because geography is complicated.)

Design workshops

We ran workshops to create and agree the high level flows with our researchers and members of the delivery team. This allowed us to start mapping the high level journeys.

Screenshots of UX work
Ideation workshops for single screens and for content modelling

After working with the businesses to figure out which areas were ‘phase 1/mvp’ we identified our key screens.

For each of these we ran ideation workshops with a cross section of the business. We made sure we had input from Product, Sales and Marketing.

The workshops took the form of a mini design Sprint. Starting with Crazy 8 sketching and ending in a collaborative whiteboard design session.

From our workshop sketches we went to work producing more detailed wireframes. As these emerged I created screen flows to help the development team understand how all the screens tie together.

Screen flow diagram
Screen flow to tie together key screens

 

Lo-fi prototype

Once we had some idea of what we wanted to test we built a prototype to test with our customers. We started by trying to prototype in actual code, working off our wireframes to work up the prototypes.

After a couple of cycles we found that this approach wasn’t working well for a quick iteration cycle (for a number of reasons) and we moved to Axure to run our prototypes.

Wireframe diagram
Wireframe of the Rooms and Board section of the hotel screen

We tested our prototyping in formal lab testing. We immediately iterated, responding to user feedback and iteratively moving toward higher fidelity. My team and I were responsible for all the design output and prototyping. We all attended every session to maximise learnings from our user testing.

Detailed design

Multiple rounds of iteration with stakeholders led to a final visual design which closely aligned with the brand.

I was responsible for gaining consensus around the new designs both within the team and with the wider business.

H&J was our first brand to be designed. The visual style is rich and sumptous—reflecting the destinations and hotels on offer. I art-directed the team of designers and liased with the business to come up with a final design style. Refined typography and stunning imagery give the feel of luxury and reflect the brand.

Photo of website on laptop screen
Our destination pages are critical source for SEO and contain a detailed travel guide as well as destination and hotel listings.

The results was that customers could now price up a holiday at any level of geography, from continent, to resort (the most traditional option) to hotel. No need to re-perform a new search for every different option.And people landing from natural search were able to get straight into packages.

Phone with Hayes and Jarvis website
The designs were fully responsive and desgned to three breakpoints

Our new content model supported the realities of geography which is not as linear as country, resort.

We designed a rich and flexible content model which was able to expand for mega resorts whilst still working for smaller more intimate resorts.

Photo of website on a laptop
We redefined the quality of content for luxury customers, providing every small but important detail

We learned that luxury customers seek a level of detail many ‘normal’ people would not think to ask.

Our hotel pages captured these details providing a single place where customers can find out everything a hotel and resort.

This new information varied from opening times of resort restaurants and shops, to uber detailed room information (floorplans, square footage, bathroom photos) to what’s included with all inclusive and where. And it was all delivered in one , in an inspiring and easy to digest page.

Additionally we designed a platform which allowed H&J to increase its high margin tours and safaris product.

Photo of website on a screen
As well as dynamically packaged holidays we had to eal with multicentre and tours, a very complex product set.

Outcomes

  • We increased the system usability score by 18.
  • We reduced the number of required steps in the booking funnel journey from three error prone and painfuly slow search and result screens to one screen.
  • Customers were able to see what effect changing dates, durations and other factors will have on price without having to re-search multiple times
  • Customers were able to search at all levels of geography (for example: show me all holidays in Thailand)

Learnings

  • We leared that customers mental model of ‘search, search results, book’ are strong. Our radical design meant customers didn’t always need to search, but for some this may have been confusing.
  • In Axure, prototyping seperate version of mobile and desktop was preferable to their responsive solution which creaked with the level of detail we were throwing at it
  • We learnt that prototypes need to be the right fidelity – we didn’t always hit the goldilocks zone – the right balance between believability and effort. At times our prototype was too ‘wireframy’ – which we believe may have skewed some user testing. We also learned that prototyping in code in a new complex cms system was not able to produce results quickly enough to test and iterate as we needed. We would have been better producing higher fidelity mockups and faking the data.