UI/UX Case Study: Optimising Etihad’s Ancillary Booking Experience

Optimising Etihad’s ancillary booking experience aims to improve user experience (UX) and increase conversion rates. This involves refining the booking process to make it more user-friendly and efficient, ultimately encouraging more customers to purchase additional services.

Timeline: 2 Weeks | Process Followed: Guerrilla Testing, User Research, Competitive Analysis, User Flow, Designing Wireframes, Designing UI, Prototyping, Usability Testing.

Note: This is one of my previous project, which I am excited to share with you. This article provides valuable insights and lessons learned that can be applied to avoid potential pitfalls in similar situations or to consider alternative strategies. Let get into it! :)

Objective

To explore opportunities to optimise the digital booking experience for ancillary products in current Etihad’s app.

Current Etihad’s app screens

In this project, our focus is towards optimising three key screens:
1. Extras
2. Seat
3. Baggage

The Problem

From the current design, the challenge is clear:

“ How might we enhance the digital booking experience for ancillary products offered by Etihad Airways to maximize user satisfaction and increase conversion rates?”

Tackling this issue involves rethinking every aspect of the ancillary booking process, from usability to user-friendly experiences and encourage more add-ons.

Empathise

Let’s put ourselves in the shoes of our customers and really understand what they like, what bugs them, and what they’re hoping to get out of the app. What are the things that make them go “ugh” and hoping to see or do? By getting where they’re coming from, we can make the app work better for everyone.

Guerrilla Testing

To better understand current user pain points, we’ve conducted Guerrilla Testing with five of our peers, conducting user interviews.

Additionally, we’ve put together a competitive analysis to see how we stack up against others in the field.

These efforts provide valuable insights into areas where booking experience for Etihad Airways’ ancillary products can be improved.

Synthesised all the feedbacks

User interviews

Based on the user interviews, we discovered the following insights:

• 4 out of 5 users were able to add extras and proceed to payment.
• 3 out of 5 users faced difficulties navigating through the process of adding extra products.
• 2 out of 5 users opted to continue without adding any extras.

…And the pain points:

• Complex Navigation: Users encounter difficulties navigating through the app to access extras services.
• Unclear Pricing: Pricing for extras services may not clearly communicated, leading to confusion to users when selecting items.
• Limited visibility and usability issue

Competitive analysis

Conceptualise & Design

After synthesizing and collecting insights, we proceed with creating user flows and wireframes. This step allows us to explore various ideas, visualize design concepts, and outline the basic structure and functionality of potential solutions.

Scribble wireframe & user flow

We’ve reached the final phase: design. We’ve taken our wireframes and brought them to life through UI designs.

Below are the proposed designs for the three key screens, addressing the pain points identified during our analysis.

1. Extras

Pain point 1:
Complex Navigation: Users encounter difficulties navigating through the app to access extras services.

Solution 1:

• Optimise user focus by providing clear navigation, simplifying task completion through a technique known as progressive disclosure, one of interaction design pattern.
• Reworked the information hierarchy by prioritising essential informations and aligning with the user’s tasks and needs.
• The information hierarchy is as follows:
  1. Flight details
  2. List of Extras
  3. Passenger Informations

Pain point 2:
Unclear Pricing: Pricing for extras services may not clearly communicated, leading to confusion to users when selecting items.

Solution 2:
Display the price upfront to enhances transparency, improve decision-making and reduce abandon rates.

2. Seat

Pain point 1:
Hard to find the price against seat selection.

Solution 1:
Display available and reserved flight seats clearly, with prices prominently featured for easy identification.

Bottom Sheet: show seat price upon selecting available seat

Pain point 2:
The legend blocking the entire screen.

Solution 2:
The legend display in sticky horizontal scrolls for convenient reference access.

Display legend in a sticky horizontal scroll

Extra features:

• Expand and collapse interaction to switch user.
• Easy seat selection navigation.
• Indication for selected seat.

3. Baggage

Pain point:
Users encounter difficulties navigating through the app to access extras services.

Pricing for extras may be unclear when selected.

Solution:

• Expand and collapse interaction to switch user.
• Clear price details.

Expand and collapse interaction to switch user.

After completing the initial iteration, we conducted usability testing to confirm the effectiveness of the proposed flow. Subsequently, we refined the design based on feedback and present below the final prototype.

End-to-end Ancillary Booking Experience Design

Impact & Conclusion

What we’ve learned from here by having a seamless and easy to navigate , clear price details and information would increased user satisfaction and loyalty which in turn contribute to increased conversion rates and revenue opportunities.

What’s Next?

We’re just getting started! We’re not done yet — we’re figuring out how to make things even better. What if we personalised recommendations for ancillary products based on user preferences and travel history? Stay tuned for more exciting updates!