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.
Error messages should be expressed in plain text and suggest a solution.
Aesthetic & Minimalist Design
Dialogues should not contain information which is irrelevant or rarely needed.
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.
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
Cluttered social apps, does not appeal easy on the user's eyes
Utilize white space so that text above is not clumped together
What we recommend is to increase text, change colour text, distribute CTA buttons and social apps
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.
WCAG AA: PASS
WCAG AAA: FAIL
WCAG AA: PASS
WCAG AAA: PASS
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: 3
Conventionally a magnifying glass is used for search, in this case it's used for shopping
Icons move to a different position once the user begins scrolling
We recommend top bar to the bottom and provide a hamburger menu to let users know that the button contains a list of items.
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
If there are no available flights, it leaves user no options to recover
We recommend having available departure dates so that user does not have to retrieve their steps