ANA Airlines
Overview
ANA, globally renowned for its excellence in service and efficiency, faces usability challenges with its website's layout and navigation.
In this 65-hour case study, my focus is a mobile-first redesign for seamless user interactions. The goal is to craft an MVP improving search, booking, and check-in experience.
Product Type
Mobile-first responsive website
My Role
User research
UX/UI design
Duration
8 Days/ 65 Hours
Tool
Figma
User Flow: Search and booking
User Flow: Check-in
Research Goal
To collect user insights and feedback for the redesign of ANA's website, with a focus on aligning it with user expectations and improving the flight search, booking, and check-in experiences. This research involves both competitive analysis and user interviews.
COMPETITIVE ANALYSIS
To assess their strengths and weaknesses against other top international airlines, here's a key features comparison of ANA, Cathay Pacific, Air France, and Qatar Airways' websites.
KEY TAKEAWAYS
Cathay Pacific and Qatar Airways provide the best user experience with modern interfaces, easy booking and check-in processes, and consistent design across devices. Air France offers a good experience but could improve clarity and design consistency. ANA, while functional, needs to simplify processes and ensure a cohesive design to better reflect its brand quality.
Improving these areas can help ANA enhance its digital presence and offer a more competitive, user-friendly website.
USER INTERVIEWS
I've spoken with ANA travelers, aged 19-50, men and women, who want an easy process for finding, booking flights, and checking in.
KEY FINDINGS
USER GOALS
Effortlessly book flights, compare prices and seamlessly check in while on the move.
PAIN POINTS
66% users encounter difficulties like complex booking process and confusing flight search.
100% users find information unclear.
50% users encounter mobile-desktop design discrepancies.
USER NEEDS
100% users wants to check in easily while on the move.
100% users needs clear information about flights, baggage, seats, refunds, and cancellations.
100% users favor clean and modern designs.
50% users want design consistent on both website and mobile
In summary, users want a convenient, clear, and consistent experience across devices. They highlight the need for intuitive design and straightforward navigation for an improved flight booking process on ANA's website.
Streamlining the booking process and providing clear options for essential features are key areas for improvement.
PERSONA
How might we streamlined ANA's website for easy flight search, comparison, booking, and mobile check-in. Ensure clear information and a clean layout for a better user experience?
IDEATE
With our personas and how might we statement, we can begin to ideate!
USER FLOW
This user flow outlines the steps users will follow to search for a flight, make a booking, and complete mobile check-in.
TASK FLOWS
These three task flows were chosen based on user feedback, ensuring that the new ANA site meets user expectations effectively.
LO-FI WIREFRAMES
Key screens designed for the three main tasks.
Due to time limitations, I've selected a few key desktop screens to demonstrate the responsive layout.
EARLY USER TESTING
Users generally completed flight search and booking tasks successfully. Iteration priorities include adding a progress bar, enabling trip modifications, improving airport code visibility, and using icons for clarity. For check-in, users seek post-check-in customization, highlighting an area for further development.
RESULTS
users wanted a progress bar for tracking their booking process.
Flight Search and Booking
50%
users are interested in the ability to modify their trip during booking.
66%
users suggested making airport codes more visible.
33%
83%
users believe adding icons could improve information clarity.
Check-in
users desire a customized experience after completing the check-in process.
66%
FIRST ITERATION
Flight Search and Booking
1. Improved Booking Process Tracking: Users can now effortlessly track their booking progress with the new progress bar.
2. Clearer Information with Icons: The inclusion of icons makes it easier for users to understand and navigate information effectively.
3. Enhanced Airport Code Visibility: Enhanced visibility of airport codes for improved readability.
4. Effortless Trip Modification: A 'Modify' button has been added, allowing users to adjust their trip details during the booking process.
Check-in
5. Post-Check-In Customization: Users now have the ability to personalize their journey after completing the check-in process.
Based on user input, this improvement ensures a seamless experience with ANA!
HI-FI WIREFRAMES USER TESTING
All users successfully completed flight search and booking tasks. To improve, focus on pre-fill login for existing users. During check-in, some users struggled to find the boarding pass button. This highlights the need for a clear and intuitive access feature.
RESULTS
Flight Search and Booking
users completed tasks smoothly.
100%
users suggest highlighting pre-fill login for existing users to streamline passenger details.
33%
Check-in
users checked in successfully.
100%
users had difficulty finding the button to view their boarding pass after check-in.
66%
SECOND ITERATION
Flight Search and Booking
1. Efficient Login Pre-Fill: For existing users, passenger details are now pre-filled, streamlining the login process.
Check-in
2. Improved Boarding Pass Access: The boarding pass button is now conveniently located for easy access after check-in.
These updates enhance the ANA experience even further!
KEY LEARNINGS
Easy Booking: Users want a smooth booking process with clear information.
Mobile-Friendly: Make sure the website works well on mobile.
Consistent Design: Keep the design the same on both desktop and mobile.
Listen to Users: Their feedback leads to important improvements.
Save Time: Features like pre-fill login can save users time.