British Airways Hackathon
Tools
Figma, Canva
Duration
24 Hours
Project Type
Cross-Collaboration Group
Role
Lead UX / UI Designer
The Team
Yuriy | UX Designer
Natalia | UX Designer
Leta | Software Engineer
Soji | Software Engineer
Andy | Software Engineer
Gemma | Software Engineer
Diego | Data Scientist
Tasnima | Data Scientist
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.
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.
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
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
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?”
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.
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
3% increase in voucher usage last month
Proposed Design
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
Understand
Machine Learning solution to
cluster customers
Train predictive model with data
of people who used voucher
Connect
Empower marketing to tailor marketing
Personalized experience
Measure
A/B Testing - measure impact of design changes
Measure engagement
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?
My first UX hackathon was an intense yet rewarding experience that underscored the importance of collaboration, rapid prototyping, and user-centered design. The fast-paced environment pushed me to iterate quickly, harnessing feedback to refine our solution, and equipped me with valuable skills for future projects.
Understanding the Problem
Extensive user research and detailed experience mapping uncovered not only key pain points and opportunities but also nuanced user needs. This deeper insight directly informed our design decisions, ensuring our solution was aligned with what users truly required.
Working Collaboratively
Collaborating with cross-functional teams enriched the project by combining diverse perspectives and strengths. Open communication and constructive feedback were essential in uniting our efforts and creating a cohesive, impactful product.
Short Timeframe
Operating under tight deadlines sharpened my focus on prioritizing essential design elements and rapidly iterate through prototypes. This experience underscored the importance of swift decision-making and clear, efficient communication to refine our product in a fast-paced environment.