top of page
TR MYB Hero_edited.jpg

Manage your Booking

Travel Republic aims to enhance the user experience by enabling them to conveniently book additional services online, even after they have made a primary booking with us. To achieve this, we have designed an improved feature called "Manage Your Booking." Within this feature, users can access the overview section for their selected trip, where they can view a comprehensive summary of their booking details. 

 

At this crucial stage, TR recognizes the importance of reminding and promoting the various extras that users can still purchase to enhance their trip experience. To determine the most effective approach for enticing users to engage in cross-selling, we have developed three distinct user journeys and concepts. These concepts were carefully crafted to undergo thorough user testing, allowing us to identify the optimal strategy for attracting users to make additional purchases.

 

TR extras are:

  • Transfer 

  • Bags 

  • Car hire 

  • Parking 

  • Insurance

MY ROLE
  • Assist with user interviews

  • Create UX/UI 

  • Create User Journey 

  • Create 3 different concepts 

  • Mock-Ups 

  • Prototype 

  • Assist user testing to quickly do relevant changes between sessions.

TOOLS
THE COMPANY

Travel Republic is one of the UK’s largest low cost online travel agents. They are part of the dnata Travel Group and the Emirates Group, providing holidays, hotels, flights, attractions and travel extras.

THE PROBLEM
MYB Problems.png

In summary, the current state of the website, call centre, and app presents significant obstacles to users who wish to book extras for their trips. These limitations not only impede the seamless purchase process but also result in customer dissatisfaction, reduced efficiency, and a disjointed user experience. Addressing these shortcomings is crucial to enhancing user satisfaction and streamlining the booking of additional services.

SOLUTION
MYB solution 1.png

By implementing these solutions, TR can significantly improve the user experience and streamline the process of booking extras. Users will benefit from a seamless and intuitive interface across the website and app, allowing them to conveniently purchase extras at any stage of their booking process. Additionally, these solutions will alleviate the burden on the call centre and enhance overall efficiency, resulting in improved customer satisfaction and a more cohesive user experience.

 

This case study will focus only on the App solution.

 Design Process 

MYB design process.png

Emphasize

PERSONA
TR Persona.png
COMPETITOR ANALYSIS

At this stage, I wanted to understand the current main holiday journey, the third party companies that provide these products, and do some competitor analyses.

The main competitors who offer extras in their apps were:

MYB competitors 1.png
MYB competitors 2.png
MYB competitors 3.png
USER INTERVIEWS

For the user research interviews, we conducted in the in-house research lab the office had. We had 4 completely different profiles of travellers to define different behaviours and needs.

 

The profiles were:

  • Single 

  • A young couple (20-35 years old)  

  • Family with young kids (0-10 years old)  

  • Family with teens (10-18 years old)  

 

The interview questions were the following:

  • When in the journey does the user want to cross-sell?

  • Which cross-sell products do they expect to see?

  • What payment methods do they expect to see?

  • On which platform do you buy extras?

  • Which visual designs are most interesting?

  • Where should the extra show?

Define

PRODUCT CHALLENGES
MYB challenges.png

By addressing these challenges, the team aimed to seamlessly integrate third-party extras, strategically introduce options to users, incorporate extras post-booking, ensure consistency across experiences, and create a stress-free purchase process. The focus was on enhancing the user experience, simplifying the journey, and providing users with a seamless and enjoyable extras booking process within the TR app.

PROJECT OBJECTIVE
MYB objectives.png

By setting these project objectives, the focus remains on designing an app-specific solution that enhances the user experience, drives conversions, maintains brand consistency, and meets the unique needs and expectations of app users.

Ideate

WIREFRAMES

Based on initial research and prioritising the iOS app, wireframes were sketched to present the initial idea for user testing. The goal was to explore navigation models and create a clean product screen layout that could be reused without compromising user information. These wireframes aimed to attract users, ensure usability, and gather feedback for further iteration..

MYB Sketches.png
DIAGRAM FLOW

To gain a clear understanding of the scope for these new features and effectively organize the flow of these products within the app, a task flow diagram was created by me. This diagram served as a visual representation that facilitated clear communication across teams, ensuring a shared understanding of how everything would fit together and be implemented within the existing app structure. The task flow diagram played a crucial role in streamlining the design and development process, aligning stakeholders, and ensuring a seamless integration of the new features into the app.

Task Flow - App Cross-sell .jpg

Prototype

MOCK UPS

For these first round of concepts, I focused on key elements including:

 

  • Easy, Understandable, and Clear Layout and Navigation

  • Recognizable Icons

  • Balanced Interface Elements

 

By focusing on these key aspects, the mockups aimed to create a visually appealing and user-friendly experience. The goal was to provide users with an interface that offered clear navigation, recognizable icons, and informative elements, ultimately enhancing their overall interaction and satisfaction with the app.

MYB mock up 1.png
MYB mock up 2.png
MOCK UP FLOWS
Cross Sell Journey.jpg
PROTOTYPE

To determine the most effective way to attract users from their trip overview page, 3 distinct concept prototypes with different navigation models were developed for user testing.

 

Disclaimer: These prototypes were done with "Principle". It was my first time using it and I took the opportunity to play and learn with the tool's micro-animations, therefore, you will see some animations out of place.

​

These prototypes featured the following navigation models:

1.  Cards with Images and Vertical Scrolling

 

In this model, product options were presented in cards that users could scroll vertically. This approach offered a straightforward and intuitive way to explore available extras.

2.  Checklist with Icons

 

This navigation model presents the product options in a checklist format, accompanied by icons. The checklist design aimed to provide a structured and efficient way for users to review and select the extras they wished to purchase.

3.  Cards with Images and Horizontal Scrolling (Carousel)

 

This model showcased product options through visually appealing cards that users could scroll horizontally. The carousel design allowed for a dynamic and engaging browsing experience.

Testing

USER TESTING & EVALUATION

​​User testing was conducted through 1-to-1 interviews with six participants. Each interview session lasted approximately 60 minutes and followed a structured format with a set of questions and tasks.

The prototypes were rotated among the participants to ensure unbiased feedback and eliminate order effects.

 

The testing phase focused on evaluating the 3 prototype concepts that were created:

 

  1. Standard Cards Carousel: This concept featured a carousel of standard cards displaying the cross-sell items.

  2. Cards with Vertical Scrolling: This concept presented the cross-sell items in cards that users could scroll vertically.

  3. Checklist Layout: This concept organised the cross-sell items in a checklist layout, resembling a to-do list for users to complete before their trip.

​

The results of the user testing revealed that the checklist layout was the best-received concept. Users appreciated the impression that the cross-sell items were part of their personal list of things to do before their trip. This layout effectively conveyed a sense of importance and urgency, increasing users' engagement and motivation to explore and select extras.

MYB Testing.png

Based on these findings, a final version was created, incorporating the refined checklist layout and other insights gathered from user feedback. This version served as the basis for further development, ensuring that the solution aligns with users' preferences and expectations, ultimately enhancing the overall user experience.

FINDINGS
  • Users perceived the prototypes with image cards as banners or pushy advertisements, leading to a negative reception.

  • The checklist layout was preferred by users as it provided a clear and organised view of the cross-sell items.

  • The carousel navigation model was not well-received as users desired to see all offers at a quick glance.

  • Users expressed the need for a clear view of what extras were already included in their booking.

​

Following the user testing and presentation of findings by the user research team, I incorporated the suggested changes into a second version of the design.

​

The second version was prepared for presentation to the Product Manager, Project Manager, Android and App developers to assess capabilities and limitations before proceeding with development.

Conclusion

In the user testing, users had a hugely positive reaction with the payment complete animation, according to the research, it made them have a sense of completion and they interpreted the time of the animation as the time the app took to complete their payment.

 

Effective collaboration during "three amigos" meetings, involving the responsible developer, product manager, and myself, proved crucial in ensuring that my mockups were successfully implemented while adhering to all limitations and requirements across teams.

 

In hindsight, if given the opportunity, I would have approached the project differently by initially creating sketch versions of the different concepts based on user test results. Given the extensive scope of the project and the need for multiple versions based on various limitations and requirements discussed in product team meetings, creating sketches first would have saved time and effort. The subsequent step would be to create mockups for the final version, streamlining the process.

 

We made a conscious effort to involve the engineers early in the design process to foster collaboration, gather their ideas and feedback, and consider any technical constraints that might arise during development. This proactive approach allowed for a smoother workflow and ensured that design decisions were well-informed and aligned with the development team's capabilities.

 

As a designer, I aimed to remain involved in the development process, bridging the gap between research and design decisions. This involvement allowed me to communicate the intentionality behind design choices and provide valuable insights to help the product reach its optimal state.

 

The design goal was to create a user interface that would be familiar and comfortable for the target audience, incorporating native elements to enhance usability and user satisfaction.

 

During user testing, the payment completion animation garnered an overwhelmingly positive response from users. According to the research findings, the animation provided users with a sense of completion, and they interpreted the animation duration as the time the app took to process their payment.

 

Overall, by fostering collaboration, incorporating feedback, and adapting the design process based on user testing results, we were able to create a successful and user-centred product while considering development constraints and requirements.

bottom of page