AirAsia move
Creating a Responsive Design Optimized for Both Mobile and Desktop Users.
ROLE
UX/UI Designer
tool
Figma
YEAR
2024
I understand the frustration and inconvenience you experienced when dealing with confusing navigation, unclear flight options, and a complicated booking process on the AirAsia MOVE platform.
We redesigned the AirAsia MOVE website to address these usability issues and enhance the overall user experience for travelers.
Project Overview
It's important to provide a more intuitive and faster way for users to find information and manage bookings. A clear and straightforward booking process, especially for mobile users, is essential. Additionally, an updated design with more interactive and user-friendly elements will enhance the overall experience for users.
Timeline
From research to final prototype in 4 weeks.
Background
Process
This category details the step-by-step approach taken during the project.
Stage 1: Empathize
Conducted market research to identify existing time and task managing challenges and user preferences. Research methods included user interviews, competitive analysis, and user personas.
Stage 2: Define
Clearly articulate the problem to be solved and the goals of the project.
Stage 3: Ideate
Generate ideas and solutions to address the identified problems and needs.
Stage 4: Prototype
Create wireframes and prototypes to visualize the solution and gather initial feedback.
Stage 5: Test
Evaluate the usability and effectiveness of the prototype with real users.
Research
We need to understand the users, their needs, and the pain points they experience with the current AirAsia MOVE website.
Problem Statement
The current website's navigation is confusing, which is causing user frustration and abandonment. Users are struggling to understand flight options and complete bookings due to the complexity.
How should we redesign the website to solve this problem and reduce the likelihood of successful conversions?
Research Objectives
Identify common issues users face when navigating the current AirAsia MOVE website.
Determine the specific pain points in the flight booking process.
Understand user preferences for accessing additional services such as hotels, car rentals, and travel insurance.
User Goals
Simplify navigation and booking process.
Ensure a responsive design across devices.
Business Goals
Optimize the booking flow and promote additional services.
Address pain points and provide a seamless experience.
User Interviews
Conducted with frequent and infrequent travelers, including tech-savvy and less tech-savvy users.
Key Findings:
Pain Points: Users struggled with confusing navigation, unclear flight information, and a complicated booking process.
User Goals: Quick and easy booking process, clear flight information, and seamless payment experience.
Competitive Analysis
We compared three competitors (Booking.com, Expedia, and Skyscanner) to identify strengths and weaknesses in their responsive designs.
Key Findings:
Currently has a functional but potentially less polished design compared to top competitors.
Mobile responsiveness and seamless experience are critical areas for improvement.
The navigation can be cluttered, making it difficult for users to quickly find what they need.
Design elements may not be consistently applied across different pages, leading to a disjointed user experience.
The mobile interface may not be as smooth or intuitive as the desktop version.
User Personas
Creating user personas helped to guide my ideation processes, and they helped to highlight the goals and pains of AirAsia MOVE's users.
Affinity Map
Key Findings:
The qualitative data from the interviews reveal several key areas for improvement on the AirAsia MOVE website:
Usability and Navigation:
Users encounter slow loading times, confusing layouts, and difficulty managing bookings. To enhance user experience, the website performance should be improved, and navigation should be simplified.Booking Process:
The current booking process is complex and lengthy, with unclear steps. To reduce user frustration, the process should be streamlined, and transparent pricing should be ensured.Visual Design:
The design is professional but lacks engagement. To cater to family-oriented and senior travelers, more appealing visuals, larger fonts, and simpler layouts should be introduced.Mobile Experience:
The mobile version is slow and difficult to navigate, with small touch targets. Improving performance and interface will benefit all user groups, especially those on the go.Tailored Options:
There is a lack of family-friendly and senior-friendly options. Developing specific filters and features for these groups will make the website more inclusive and user-friendly.
Addressing these areas will significantly enhance the user experience on the AirAsia MOVE website, making it more efficient, engaging, and accessible for all users.
Design
Create sitemap, user flows, wireframes, and prototypes to visualize the solution and gather initial feedback from user testing.
Sitemap
Our goals:
Simplify the navigation and booking process to make it intuitive and user-friendly. Ensure that users can easily find and understand information on flights and additional services.
Implement a clear and concise layout that highlights key functions and services.
User Flow
Objective: The purpose of this user flow is to outline the steps a user takes to successfully book a flight and complete payment on the AirAsia MOVE website. It is designed to provide a clear, streamlined experience, ensuring that users can easily navigate through the booking process, select their desired flights, and finalize their purchase without encountering unnecessary friction or confusion.
Users are trying to achieve the following:
Search for Available Flights: Find flights that match their travel needs, including departure and arrival locations, dates, and times.
Select the Desired Flight: Choose a flight based on price, convenience, and availability.
Customize the Booking: Add any additional services, such as seat selection, baggage options, or travel insurance.
Provide Passenger Details: Enter personal and contact information for all travelers.
Complete Payment: Pay for the flight using their preferred payment method and receive a confirmation of their booking.
This flow is crucial for the overall user experience because it directly impacts the core purpose of the AirAsia MOVE website—enabling users to book flights. A seamless and intuitive booking process enhances user satisfaction, reduces the likelihood of cart abandonment, and encourages repeat bookings. Conversely, a complicated or frustrating process can lead to user frustration, loss of revenue, and negative brand perception.
The end goal for users is to successfully book a flight and receive a confirmation that includes all necessary travel details, ensuring they are fully prepared for their trip. The confirmation may also include options for managing the booking or checking in online, further enhancing the user experience.
Lo-fi Wireframes
Objective: We created lo-fi wireframes for brainstorming, testing initial ideas, and focusing on structure and flow rather than visual details.
From the competitive analysis and user interviews, we acknowledged:
Users prefer a straightforward and intuitive navigation system that allows them to find what they need quickly without unnecessary clicks or confusion. Lo-fi wireframes should emphasize a clean, minimalist navigation bar with clear labels and a logical hierarchy. Features like a sticky navigation bar and breadcrumb trails can help users stay oriented.
Users want a seamless booking process that minimizes the number of steps and inputs required to complete a flight reservation. Lo-fi wireframes should focus on designing a linear booking flow where each step naturally leads to the next. Avoid overwhelming users with too many options or distractions on any given page.
Users prefer a design that feels familiar and consistent with other travel booking platforms they have used, reducing the learning curve. Lo-fi wireframes should stick to common design patterns and UI elements found in the travel industry within the wireframes.
Hi-fi Wireframes
Key Features
Homepage: Clear and concise layout with prominent search functionality and quick links to popular destinations.
Booking Process: Streamlined steps for searching flights, selecting options, and entering passenger information.
Responsive Design: Consistent user experience across mobile and desktop devices.
Usability Test
Our goal for the usability test is to assess how well users can interact with the redesigned AirAsia MOVE website.
We specifically looked at the flight booking process, including flight search, selection, and payment, to identify any usability issues and gather feedback to improve the website.
Participants
5 participants, aged between 18 and 65.
Tech-Savviness: Mix of tech-savvy and less tech-savvy users
Experience with AirAsia
Frequent travelers who have booked flights online.
Infrequent travelers who have limited experience booking flights online.
Geographical Location
Users from different regions to understand diverse perspectives and needs.
Task Flows
Task 1: Flight Search Use Quick Search
Task 2: Review Flight Details and Select Flight
Task 3: Enter Passenger Information and Complete Payment
(Repeat the same steps on the responsive website.)
Results
Success rate: 100%
Error Rate: 0%
Insights and Improvements
All participants agreed that the buttons and icons are easy to understand, leading to a more efficient task flow.
All participants completed the tasks with a 100% completion rate and a 0% error rate.
(Quote) Participant 3: "The text hierarchy and highlighted sections make it easier to navigate to the flight details or order confirmation page."
Iteration #1
Because of the large amount of information, I went through many revisions to create a better hierarchy on the flight options and also coherent with its mobile page.
I also changed the “show more tickets” button to a pagination.
Added the “sort and filter” button on both desktop and mobile for responsiveness.
Before
Final
Iteration #2
Instead of align the confirmation details to the left like the other booking process pages, I moved it to the center. So, users can easily understand the booking process has been finished and they are on a new page now.
Because of the consistent styles, text with a border can be read as clickable cards. Instead of keeping the same format for the flight detail, I changed the style to text only and moved it to the right. And changed the title from flight details to summary, not to confuse with the previous pages.
Reduced the size of the successfully booked images and interact with the text.
Before
Final
Final Design - Book a Flight
Desktop Browser
1440 x 960 px
Mobile Browser
390 x 844 px
Conclusion
Takeaways
User-centric design is crucial: Prioritizing user needs and preferences leads to more intuitive and effective designs. By understanding the pain points and goals of different user personas, we created a more user-friendly platform.
Responsive Design Enhances Accessibility: Ensuring a consistent experience across devices is essential in today’s multi-device world. A responsive design not only improves usability but also increases user satisfaction and engagement.
Iterative Testing and Feedback Integration: Continuous usability testing and incorporating user feedback at each design stage is vital for identifying and addressing issues early. This approach leads to more refined and effective final designs.
Challenges Faced
Balancing Simplicity and Functionality: Striking the right balance between a simple, clean design and providing comprehensive functionalities was challenging, ensuring all necessary features are accessible without overwhelming the user required careful planning and testing.
Ensuring Consistency Across Devices: Creating a seamless experience across both mobile and desktop platforms presented technical challenges. Ensuring that the design was responsive and functional on all devices required significant testing and iterations.