Select Page

united.com

A case-study and re-design to improve the travel-booking experience for the elderly and visually impared.

Why it matters

“Designing for inclusivity not only opensup our products and experiences to more people with a wider range of abilities. It also reflects how people really are. All humans are growing, changing, and adapting to the world around them every day. We want our designs to reflect that diversity.

Every decision we make can raise or lower barriers to participation in society. It’s our collective responsibility to lower these barriers though inclusive products, services, environments, and experiences.”

Microsoft’s Inclusive Toolkit Manual

Design Goals

 

  • Conduct user research and testings conducted with small group of elders ranging from 60-70 year olds to get baseline insight, pain points, and design feedback

  • Redesigned with United’s current design system for immediate design adoption

DESIGN ANALYSIS OF THE CURRENT UNITED.COM WEBSITE

User feedback:

  • Landpage’s information architecture was confusing to test users.
  • User was unsure about which required booking information they needed to provide before being able to move on to the next step.
  • Search results has different styling and layout.  Further confusing user about next steps and general product flow.
LANDING PAGE LAYOUT: DESIGN FLAWS & PROPOSE SOLUTIONS

Current Design’s Usability Issues

 

  1. The irregular grid and horizontal layout was confusing for elder users to navigate.  It was not clear which area of the page user should focus on.
  2. Many input fields were not required to proceed.
  3. User had to re-enter information in the following screen even though they have already entered them in the innitial screen.

Design Solutions

  1. Vertical layout replaces the horizontal layout arrangement.  This vertical layout is kept throughout other screens to establish a pattern for user to rely on.
  2. Only required information is needed in order to proceed
  3. Repeated fields were moved to following page.  This helps to reduce the clutter of information on the first screen.

LANDING PAGE INFORMATION HIERARCHY: DESIGN FLAWS & PROPOSE SOLUTIONS

Current Design Flaws

 

  1. Out of the six information fields that was asked of the user, only two fields were required in-order to move forward to the next step.

Design Solutions

  1. Re-organizing and applying hierarchy to page layout.
  2. Simplifying booking menu to request for only needed information.
  3. Tabs such as Flight Status, Check-in, and My Trips were moved to the header so that the center menu focus the user on the task of booking.

DESIGN COMPARISION

Current united.com landing page design

 

New landing page with layout and IA designs updated base on user feedback

NEW DESIGN WITH REVISED LAYOUT AND I.A.

DESIGN COMPARISION

Current Design’s Usability Issues

  1. Search results are shown in a new screen with a total different page layout.  Elder user was confused of this change and it took users some additional time to understand the new page layout.
  2. Search results were extremely overwhelming.
  3. It was nearly impossible to compare search results to get any meaningful information.
  4. Departure and Return results were kept on seperate screens.

 

Design Solutions

  1. Search results are shown as an extension of the booking menu.  User does not have to learn a different page out.
  2. Results were limited to a digestible amount.  Search, filter and pagination allow user view additional results.
  3. User commented that it was easier to compare the search results.
  4. Departure and Return results are shown side-by-side so that user can better plan their trip.

BOOKING TABS: DESIGN FLAWS & PROPOSE SOLUTIONS

Current Design’s Usability Issues

Other booking options such as Hotel, Car, Cruise, and Vacation were hidden below the Booking tab.  Elderly users wasn’t able to find these bookings option during user testings.  Surfacing these additional booking options could improve user experience and increase sales for those offers.

 

Design Solutions

  1. Tabs such as Flight Status, Check-in, and My Trips were moved to the header so that the center menu focus the user on the task of booking.

TAKE AWAY

We all have abilities and limits to those abilities. Everyone experiences exclusion as they interact with our designs. On the other hand, a solution that works well for someone who’s blind might also benefit any person driving a car.

Inclusive design works across a spectrum of related abilities, connecting different people in similar circumstances.

PROJECT INFO

My Role: UXUI, User Testing, User Research, Prototyping

Tools used: Sketch, Adobe Suite, Invision

Billy Dang @ 2020