British Airways Hackathon

Project Type

Cross-Collaboration
Group

Role

Lead UX / UI Designer

Tools

Figma, Canva

Duration

24 Hours

The Team

Yuriy | UX Designer

Leta | Software Engineer

Natalia | UX Designer

Soji | Software Engineer

Diego | Data Scientist

Andy | Software Engineer

Tasnima | Data Scientist

Gemma | Software Engineer

Overview

Design Challenge

Partnering with British Airways during a 24-hour hackathon, our cross-functional team tackled a real-world challenge: streamlining their e-voucher system. Our group, comprised of software engineers, data scientists, and UX designers, collaborated intensively to identify the root cause of the problem and develop a well-crafted, functional solution.

The Problem

British Airways customers whose flights or holidays were delayed or canceled in 2020-2021 could exchange their payment for a voucher to use at a later time.

Since 2020, many e-Vouchers issued have gone unused resulting in millions being wasted. BA is looking for a way to encourage users to use up the vouchers before they expire in 2024.

The Solution

To redesign the BA user account banner in order to display the current balance of
e-Vouchers the customers currently have available.

To include a e-Vouchers tab within the users account where they can view and manage the specific e-Vouchers that they currently have.

Reposition the function of adding the e-Vouchers to the payment screen in order to avoid any system or user errors.

Design Process

Sprint Planning

To kick off the project, we decided to convene as a team in order to brainstorm how we will be tackling this project. As this was a first time for us working collaboratively with other disciplines, it was important that we had a thorough understanding of the problem space. We shared various ideas on how we might solve the problem proposed to us, but as a UX designer I emphasized that the user experience is a key component in creating the solution.

Research

What does the Research show?

To tackle the puzzle of unused e-Vouchers, we embarked on a research journey. This included both primary and secondary research methods to uncover the reasons why customers weren't using their vouchers. Our research revealed a range of factors contributing to this issue.

Primary Research:

  • User’s had difficulty storing and tracking existing vouchers, they are responsible for looking after their vouchers via e-mail

  • User’s said codes worked inconsistently when applied manually online, they often needed to call support and work it out over the phone

Secondary Research:

21%

of customers found it difficult to check or even use their vouchers.

🔗 Choice

£533M

worth of unclaimed
e-Vouchers
are registered under IAG (BA’s PC)

🔗 BBC

1 in 3

e-Vouchers were used on flights last year

Heuristic Evaluation

What can be Improved?

To gain deeper insights into potential user challenges, we conducted a heuristic evaluation of the BA website's booking experience. This analysis revealed several key areas for improvement.

One issue we came across was that there was no tab within the users account where they could check the value or how many vouchers they had remaining.

When going through the booking process, it was found that the only section where it requested to apply a voucher, was within the secondary information page where optional extras are included in which majority of customers skip over to the final payment page.

Another problem was that it is difficult to find the page where they could check on the current amount they have available since it was a portal page connected to their email.

Key Findings and Opportunities

What are the main issues?

Following the research and analysis of the current website, we found various common pains and frustrations that can be improved within the user experience. But due to the limited time frame, we could only focus on a few of the key areas. This included the following: Lack of awareness, the tracking of e-Vouchers, and the usability application of the vouchers during the booking process.

Lack of
Awareness

  • Many users not aware they possessed e-Vouchers.

  • Unclear communication from organization to users about given e-Vouchers.

  • Lots of users found difficulty finding out the value of their e-Vouchers.

Voucher
Tracking

  • Users found difficulty tracking their e-Vouchers.

  • Sole responsibility of e-Vouchers caused many users to forget about them.

  • Emails with e-Vouchers tend to get lost within users email accounts.

  • Users found it to be very time-consuming having to search for their e-Vouchers.

Usability
Issues

  • Some users expressed issues trying to use their e-Voucher codes.

  • Codes not working consistently, potentially due to technical glitches.

  • Significant amount of users struggled to locate the section to apply their e-Vouchers within the booking process.

“How might we encourage customers to
book flights using their travel e-Vouchers?”

Persona

Who is our Target Audience?

To humanize the design challenge and ensure our solution resonates with real users, we developed a detailed user persona. Leveraging BA's customer data and our own research, we created "Steve." This persona incorporates key demographics, motivations, pain points, and booking behaviors typically observed in a BA customer. By understanding Steve's needs and challenges, we could design a solution that directly addresses his booking experience.

Experience Map

What does Steve’s journey look like?

To further understand Steve's (persona) booking journey and identify key areas for improvement, we created a user experience map. This map visually depicts the persona's touchpoints throughout the booking process, highlighting pain points and opportunities for optimization. This allows us to focus our design efforts on the areas most likely to impact the user experience positively.

Concept Sketches

Visualizing Concepts

From the research and experience mapping, it was possible to to explore various solutions to the problems we have discovered. For this, we decided on going with the crazy 8 design approach as it enables us as a team to quickly design a range of possible solutions that could be implemented into BA’s current website.

As the lead UX designer of the group, I had to keep in mind about the short time frame and any constraints that the software engineers might have when implementing the designs, so it was important to come up with a design that was quick & easy to iterate but impactful for the user’s within the current website.

Chosen Solutions

Tackling the Main Problems

From the explored concept drawings and the experience map, it was now possible to see which areas we could focus on. As we were on a short deadline, it was impossible for us to focus on every problem we came across so we decided to focus on voucher tracking and usability issues since we believed that these would have the most impact for the users in order to be able to use their vouchers.

Voucher Tracking

Proposed solution that simplifies voucher management by implementing a dedicated section within user accounts, it will eliminate the hassle and provide a convenient location to access their e-vouchers. Users will be able to instantly view the value and quantity of their e-vouchers, without the need to search through endless emails. This eliminates the frustration of lost or forgotten vouchers and ensures users can easily track their available balance. This user-friendly feature streamlines the voucher experience, allowing users to maximize the benefits and enjoy a more seamless experience.

Usability Issues

To get around the issue of users missing out on applying their e-vouchers during the booking stage, we propose a strategic reorganization of the process. By moving the e-voucher application option to the payment page, it will become significantly more noticeable. This simple shift in placement can significantly increase
e-voucher redemption rates
, ensuring users get the most out of their valuable e-vouchers.

Ideation & Concepts

Keeping true to the Brand

For the proposed concepts, we decided to look
at the history of British Airways and wanted to incorporate a similar aesthetic into the designs
in the form of vouchers while still using the same colour scheme that BA currently uses for consistency.

Within the voucher design we thought of adding a function of revealing the voucher codes in order
to provide an extra layer of protection was more beneficial rather than already having it displayed
to avoid others from viewing and using their codes.

Default

Hover

Applied

Final Prototype

Solutions Showcase

Before Applying voucher

After Applying Voucher

Data Analysis

Leveraging Data to measure Success

Building on the data scientists' insights, I identified A/B testing as a key tool to verify the impact of changes to product features and guide future iterations. A/B testing allows us to experiment with different variations and measure the rate of e-voucher usage and user behavior to identify the most effective approach.

Current Design

Proposed Design

3% increase in voucher usage last month

17% increase in voucher usage last month

Hypothesis test example:

  • Null hypothesis: The change had no effect in user behavior

  • p-value is low (0.02) --> low probability of seeing this data --> REJECT NULL (conclusive test)

  • We assume that our change had an impact

  • Machine Learning solution to
    cluster customers

  • Train predictive model with data
    of people who used voucher

Understand

  • Empower marketing to tailor marketing

  • Personalized experience

Connect

  • A/B Testing - measure impact of design changes

  • Measure engagement

Measure

Presenting the Project

Unveiling the Solution

We delivered a compelling presentation of our e-voucher solution to a panel of 5 British Airways representatives. Collaborating closely with our team of software engineers and data scientists, we crafted a persuasive narrative that effectively demonstrated the identified problem space and the transformative value of our proposed solution.

This collaborative effort resulted in a presentation that not only highlighted the technical aspects of our solution but also emphasized its potential impact on user experience and business outcomes. By effectively communicating the user challenges and the tangible value of our e-voucher solution, we successfully captivated the attention of the representatives.

Next Steps & Considerations

Thoughts on Further Improvements

  • Improved Research: Invest more time into researching the current problems and experiences in order to provide a solution more catered to the users needs. Continue to implement data science solutions to further improve BA’s connection with costumers, and provide better recommendations.

  • Improved UI: Further improve the visual aspect of the proposed solutions in order to enhance the user experience while navigating the purchasing process.

  • Usability Testing: Prioritizing the feedback from several rounds of usability testing to make sure that proposed solutions are beneficial, easy for the users to understand and navigate in order to make sure we are providing the best possible experience for them.

Learning Progress

What did I learn from the Project?

Participating in my first UX hackathon was a whirlwind experience that taught me invaluable lessons about collaboration, rapid prototyping, and the power of user-centered design. The fast-paced environment pushed me to think creatively, while the collaborative nature of the project emphasized the importance of effective communication and teamwork. I learned the value of iterative design, constantly gathering feedback and making adjustments to ensure our solution met the needs of our target users. Overall, this hackathon was a rewarding experience that equipped me with essential skills for future UX projects.

One of the most valuable lessons I learned during the hackathon was the importance of deeply understanding the underlying problem we were trying to solve. By conducting thorough user research and experience mapping, I was able to uncover the pain points that users were experiencing and identify opportunities for improvement. This understanding guided our design process and ensured that our solution genuinely addressed the needs of our target audience.

Working Collaboratively

Collaborating with the various teams was one of the most insightful and informative aspects of this project. By leveraging & delegating each other's strengths and perspectives, effectively communicating, sharing ideas, and providing constructive feedback, we were able to create a cohesive and impactful product within the limited timeframe. The experience reinforced the importance of teamwork and open communication in successful UX projects.

Short Timeframe

Working within a tight timeframe forced me to prioritize efficiency and focus on the most critical aspects of the design. I learned the value of rapid prototyping and iterative design, allowing me to quickly test ideas, gather feedback, and make necessary adjustments. Additionally, the collaborative nature of the hackathon reinforced the importance of effective communication and teamwork in delivering a successful product.

Understanding the Problem