Imaging a redesign of EVA Air’s existing responsive web airline booking process.
ROLE: UX Researcher, UX/UI Designer
TIMELINE: 4 weeks
UNDERSTANDING THE PRODUCT
EVA Airways Corporation (better known as EVA Air) is the second largest Taiwanese airline, operating passenger and dedicated cargo services to over 40 international destinations. After its origin in 1991, EVA Air is making themselves more known in recent years to the North American audience, by introducing several non-stop flight services to cities including Toronto, New York, Chicago, Houston and more.
EVA Air currently has an existing North American based desktop and mobile website, along with a mobile app that can be downloaded.
THE PROBLEM
We want to understand user’s motivations and frustrations when booking air travel so that we can evaluate what features can be improved upon to the existing EVA Air desktop and mobile website, to create a more streamlined and enjoyable user experience.
01. Empathize
OBJECTIVES
Evaluate the usability and visual design of EVA Air’s existing website - primarily focusing on the search and booking process.
Understand how the responsiveness of EVA Air’s existing website can be improved to increase user satisfaction and retention, and propose a redesign of key features.
RESEARCH METHODS
Website Heuristic Evaluation
Social Listening
Competitive Analysis
User Interviews
An example of EVA Air’s current flight options selection page.
HEURISTIC EVALUATION
We chose to conduct a heuristic evaluation to assess the usability of the existing EVA Air website. By utilizing a guideline checklist, we were able to to inspect and identify usability problems in the UI design of the website. Some observances include:
Visibility of System State:
Elements do not clearly show which can be clicked and not clicked, hard to distinguish what text is a clickable link.
User Control and Freedom:
Once in the booking process, it is difficult to find an undo or back button.
Consistency and Standards:
Brand guidelines are mostly consistent throughout the site, however there are some discrepancies with button and link colors.
Aesthetic & Minimalist Design:
Text on the website feels very crowded, and features very little “breathing space” around text areas.
SOCIAL LISTENING OBSERVANCES
This research method was used to discover how users view their previous experiences with EVA Air, and how the brand is portrayed online. We discovered that users have varying satisfaction levels with their overall travel experiences, however there was an overwhelming amount of negative feedback and thoughts regarding the existing EVA Air website. Below are a few comments regarding the website:
USER INTERVIEWS
We interviewed 2 people in person and 2 people over Zoom that travel and book airline tickets frequently.
A few of the interview questions include:
How often do people use websites to book their travel? (vs. using a third-party such as a travel agent)
What do people prioritize when booking air travel?
What challenges do people run into when booking air travel through a website? What do people dislike or consider the most tedious part about their experience?
An Affinity Map was created to identify the patterns amongst the interviewees. Take a deeper look into the Affinity Map here.
KEY TAKEAWAYS
Users prefer using a desktop device to book their flight tickets because it offers a sense of security in having users think it will lead to minimal mistakes.
Users appreciate seeing an overview of what different flight price and time options are available.
Users want to know where and how to book flight tickets, be able to check-in, check the status of flights, and see the status of their personal mileage points.
02. Define
USER PERSONA
We developed two user personas to anchor the future ideation phase and guide my design process. Both Grace and Jacob became the key users that would benefit from a proposed redesign to the EVA Air website.
03. Ideate
TASK FLOW
A Task Flow was created to organize and map out how we would propose to streamline the EVA Air flight booking process.
LOW-FIDELITY WIREFRAMES
Defining the task flow helped develop the initial iterations of low-fidelity wireframes. In these low-fidelity wireframes, we wanted to enhance the current booking experience by condensing the amount of text and reorganizing the existing components to have a sense of hierarchy.
MID-FIDELITY WIREFRAMES
After laying out the necessary components and understanding the organization of the proposed redesign, the next step was to create mid-fidelity wireframes, a couple of which are shown below.
04. Prototype
In preparation to begin the prototyping process, we studied and incorporated EVA Air’s existing brand colors, logo, iconography, and images to create high-fidelity wireframes for a user flow of booking a round trip flight ticket. High-fidelity wireframes were created for both Desktop and Mobile view, a few of which are shown below.
HIGH-FIDELITY WIREFRAMES
USABILITY TEST FINDINGS
4 people were recruited to participate in the Usability Tests and Zoom’s screen-share capability was utilized to conduct and record the sessions. While observing, we also gathered notes and categorized them into what worked, what needs to be changed, potential new ideas, and remaining questions. These usability test takeaways led to a list of priority revisions to be made.
Take a closer look at the analysis in the file here.
PRIORITY REVISIONS
Based on the results and insights gathered from the usability tests, we then revised several screens and user flows to address any items that came up. Take a look below at some of the priority revisions that were implemented.
Sort Trip Results
To allow users to have a more customized experience, a ‘Sort By’ option was added for users to choose the way that trip results are organized.
Hover State Flight Selection
Users want to be sure of what flight option they are selecting. When users hover over a flight option selection, the chosen selection card will transition to a bright orange color, creating an obvious distinction against the other unselected flights. By adding a hover state for flight selection, it will create user confidence and will minimize selection errors.
Legibility of Seat Map and Upgrade Menu
The usability test participants enjoyed being able to view and browse the class upgrades that were available to them, however the legibility of the text was concerning. To create a more usable experience, we chose to enlarge the seat selection map and upgrade menu.
To round out the project, we reflected back on how the current website and user experience compares to the redesign. The current design feels outdated and cluttered, and the proposed redesign feels more modern and organized. Take a look at a portion of the existing and redesigned Home Page below.
BEFORE & AFTER
TEST OUT THE DESKTOP PROTOTYPE
05. Next Steps
Retest iterations and edit the prototype as needed
Handoff to developers
Look forward to testing for KPIs such as high task success rate, low user error rate, and a high customer satisfaction score.
After further testing, start iterating on new components for more informational screens for baggage allowance, payment confirmation, and more.
WHAT’S NEXT?
REFLECTION
Over the 4 weeks, we were able to analyze an existing airline responsive website and conduct research that would allow us to reimagine the booking process to streamline and enhance its’ current user experience. Even though EVA Air is a robustly built out company with a working website, we learned that there is always something that can be added, subtracted or redesigned to streamline its user design.
Thanks for taking the time to join us.