Redefining User Engagement and improve usability: Strengthening connections between supporters and Médecins Sans Frontières
Overview
Poised to redefine the flying experience and inspire a new generation of travellers across Australia and beyond, Airborne Airlines has arrived to disrupt the travel market by offering comfortable and economical flights. The design team at Airborne Airlines has been tasked to communicate its essence and vision for its highly anticipated launch in late 2024.
Program: UI Design Course - RMIT Online
Role: UI Designer
Duration: 6 weeks
Problem
Travelers lack clarity about what to expect during their flight and encounter difficulties in accessing clear information about flight deals, impacting their ability to plan and enjoy their journeys seamlessly.
Challenge
Develop a the brand identity and user interface design for Airborne Airlines that will establish a strong brand presence and deliver a user-friendly and intuitive interface design as a new brand in the market.
Preliminary Research
The UX design team had already conducted research and user interviews to understand AA's the market and target users, and they shared the following with us as a team:
Personas ↓
Key Findings ↓
01 Users missed the ‘From location’ in the flight deals on the homepage
"Oh, I totally missed that part. I would definitely want to know where the deals was flying from"
02 ‘Deals end by xxxx’ is a missing element on the deals page
"How long do I have access to this deal for? When do I need to book?"
03 Users were unable to ‘search’ for help queries on the help page
"What happens when I have a ques on that isn’t addressed here? Do I have to send an email? That would be annoying."
Solution
How might we simplify the process for Airborne Airline travellers to discover their flight options and access exciting flight deals, empowering users to take control of their journey and enjoy seamless travel experiences?
Constraints
Due to the fictional nature of this case study. I faced resource constraints affecting the depth of my research and insights. To tackle this limitation and to supplement my materials, I considered external resources in the form of Competitive Analysis to understand industry standards and integrate effective design practices into your product design and development
Competitive Analysis
Because of limited research and resources, I conducted additional research method of Competitive Analysis to give me strategic insights into the features, functions, flows, and feelings evoked by the design solutions of competitors of Airborne Airlines.
Qantas Airlines
Brand:
-
Qantas' Red suggests power while Dark Grey is evokes reliability and wisdom
Advantages:
-
Flag Carrier of Australia
-
Iconic and Reputable Brand
Strengths:
-
Classic, organised and clean interface
-
Experience the Qantas difference' section
-
Informative Homepage offers various tools or links to assist users along with extensive IA
Weaknesses:
-
Destinations vaguely tagged with *Deal but doesn’t specify
-
Flights options page can be lengthy
-
Logo resembles Virgin
Virgin Airlines
Brand:
-
Virgin's red with purple evokes excitement and individuality
Advantages:
-
Identifies themselves as NEITHER high class or low class airline.
Strengths:
-
Balanced branding between classic and trendy
-
Users have the option to view deals from their departing city
-
Explore page is a mini travel guide and encourages to users to discover destinations
Weaknesses:
-
Doesn’t state the airport, only the city
-
Too many classes to choose from
-
Logo resembles Qantas'
Jetstar Airlines
Brand:
-
Orange portrays youth, energy, playfulness, and being bold
Advantages:
-
Low-cost travel that attracts the masses
Strengths:
-
Family-friendly feel
-
Bright and happy destination images that captures users attention
Weaknesses:
-
Check out process can be cluttered due to customisation and add-ons
Scoot Airlines
Brand:
-
Yellow evoke strong senses of joy, happiness and optimism
Advantages:
-
Low-cost travel that attracts the masses
Strengths:
-
Clean and simplified interface with clear breadcrumbs
-
Easy and Seamless flight booking journey
-
Friendly and playful interface
Weaknesses:
-
Minimal homepage - doesn’t encourage users to engage with other content but to book
-
Error page is an unfinished blank page leaving users waiting page
Preliminary Wireframes
With already established low-fidelity wireframes by the UX team, I developed these wireframes to a fully functional and interactive prototype. I focused on the mobile pages as this will be the one to test with users in the next process
Design Progress
With already established low-fidelity wireframes by the UX team, I developed these wireframes to a fully functional and interactive prototype. I focused on the mobile pages as this will be the one to test with users in the next process
User Flow
I constructed a user flow diagram to map out how users might move through the website. It aided my design decisions and prioritize necessary elements for an optimal flight booking experience.
User Testing
Click Testing Results:
100% Tasks completed
70% Overall Success
I conducted a usability test with Optimal Workshop. The design was tested with 5 participants informing areas for improvement. Participants were given tasks to complete such as
01 You want to see current flight promos
02 You want to manage a booking
03 You want to know about inflight movies
04 You want to buy a round-trip ticket from Tokyo-Sydney 1-14 January
Issues
+ When booking a flight, some users missed the| .| (Roundtrip/One way) options button on landing page
+ Users found some icons a bit too small to see when |booking dd(Roundtrip/One way) flights
+ Users could not find 'manage a booking' and clicked on log in
Solution
+ Re-design and re-organise the flight booking function in a ..||more visible way
+ Enlarge icons that are difficult to see on mobile
+ Cross link the function in both 'help' and 'log in' pages and ..||add a drop down menu for a more elaborate navigation
Final Iteration: Mobile
Apart from the feedback from usability testing, I made further changes to some elements within pages that didn't appear refined or ready for "hand-off". I kept reiterating back and forth to find the right look for the mobile version. These final version I iterated are more professional, seamless and consistent.
Final Iteration: Web
I was already satisfied with the overall design but I made minor iterations, prioritizing the key concerns outlined above to improve the user experience. Visual hierarchy and balance were also my central focus to really well structure the elements and contents within the page.
