Expedia

UX Redesign & Heuristic Evaluation

Image by Jairph

Project Overview

As part of a team of 4 UX Designers we decided to redesign the all in one travel app, Expedia and evaluate the user experience journey and the interface design. Collaboratively we found some issues and worked together to improve Expedia's app usability issues.

Tools used: Figma

Project length: 3 weeks

The story begins

Expedia is an one-stop travel guide

Expedia is a mobile app and travel website that helps users with their travel plans that includes booking flights, hotels, attractions and car rentals.  Despite its many features in all in one travel app there are several usability issues. Our team decided to choose a task that will be generally used by travellers, which was booking flights.

What are Heuristics?

A heuristics evaluation is a method for finding usability problems in a user interface design. They involve having a small set of evaluators that examine the interface and judge its compliance with recognized 10 usability principles.

- Nielson and Molich 1990: Nielson,1994

In this case study we found 4 types of heuristics. Below are their descriptions.

Consistency & Standards

User should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.

Aesthetics & Minimalist Design

Dialogues should not contain information which is irrelevant or rarely needed.

Error Prevention

Error messages should be expressed in plain text and suggest a solution.

visibility & system status

The system should always keep users informed about what is going in.

Severity Rating Scale

Based on the severity of usability problems a number is assigned to each heuristic using a 0 to 4 rating scale. 

rating scale png.png

Sign in

The issue on the sign in screen is that the the text and CTA buttons are too close in proximity. There is an opportunity for these groupings to be expanded across the screen. This falls under the Heuristic of aesthetic & minimalistic design. 

Severity Level: 1

Tiny text, not visible enough for user

X - 1.jpg

Cluttered social apps, does not appeal easy on the user's eyes

Utilize white space so that text above is not clumped together

Before

Screen Shot 2021-05-26 at 1.25.13 PM.png

After

Screen Shot 2021-05-26 at 1.25.21 PM.png
Recommendations

What we recommend is to increase text, change colour text, distribute CTA buttons and social apps

Accessibility

Adhering to WCAG guidelines

WCAG is a guideline for web accessibility compliance. You may have noticed that there is a slight colour difference in the above screenshots. In the original screen, not all of the colours were accessible. AAA will reach a greater number of people and we noticed that the colour blue shown in the CTA button and hyperlinks in the original app were not accessible for everyone therefore went for a different hint of blue shown in the right, which has a higher contrast ratio. 

Before

WCAG AA: PASS

WCAG AAA: FAIL

#4f87f0

After

WCAG AA: PASS

WCAG AAA: PASS

#78AEF3

Home Screen

The issue on the home screen was that the icons on the top bar moved position once the user begins to start scrolling. This falls under the heuristic of aesthetic & minimalistic design. 

Another issue we found was that the magnifying glass icon was for "Shop Travel". The industry convention for shopping is generally a cart, and the user may misinterpret magnifying glass for search. This type of issue falls under consistency & standards.

Severity Level:

Conventionally a magnifying glass is used for search, in this case it's used for shopping

Screen 3.jpg

Icons move to a different position once the user begins scrolling

Before

After

Recommendations

We recommend top bar to the bottom and provide a hamburger menu to let users know that the button contains a list of items. 

Dead End

Search results leaves user with no options to recover

Once a user has searched their flights there might be a possibility for the user to come to a dead end and have to restart the process of searching for flights until available date is found. This issue falls under the heuristic of error prevention.

Severity Level: 3

X - 2.jpg

If there are no available flights, it leaves user no options to recover

Before

Screen Shot 2021-05-26 at 7.19.10 PM.png

After

Screen Shot 2021-05-26 at 7.19.21 PM.png
Recommendations

We recommend having available departure dates so that user does not have to retrieve their steps

Final Redesign

 
Watch it in action