E-commerce UX from concept to realisation for a tour operating group of companies

My Role: Lead UX Designer for a Project that launched a multi-brand e-commerce platform for two brands over 18 months. The project launched two full transactional websites for two brands. Deliverables included a new content model, a new content management system. All new UX for browse, search and booking. Integration of Peakwork's dynamic packaging cache.

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.

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

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 + accommodation + 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 diary studies. 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.

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

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.

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.

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 sumptuous—reflecting the destinations and hotels on offer. I art-directed the team of designers and collaborated 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.

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.

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.

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 extremely 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 deal with multi-centre 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 painfully 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 learned 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 separate 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 ‘wireframey’ – 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.

Back to case studies ⤴