Airline MOBILE Website Usability Testing

Mobile airline website high-fidelity prototype screens

Mobile airline websites pose several unique usability problems. They contain a lot of information and offer a lot of services, but need to be very simple to use. This means that the information architecture of the site needs to be optimized and the UI design needs to be clear and simplified. I was tasked with designing such a website for the fictional “Lucad Airlines” brand (a play on the LUCAD acronym for the Lesley University College of Art and Design).

Context

Lesley University Course Project

My role

UX researcher (part of a team, and individually) and UX designer

Stakeholder

Professor Bryan Rodrigues

Target Users

  • Airline travelers
  • Age: 21-65
  • Geography: US Only
  • Language: English

Timeline

The project took 3 weeks to complete, with some tasks overlapping.

  • Interviews: 3 days
  • Make empathy map: 3 days
  • Create user flow: 3 days
  • Create low fidelity wireframe: 5 days
  • Run paper prototype lo-fi usability test: 1 day
  • Create high fidelity prototype: 5 days
  • Run paper prototype lo-fi usability test: 1 day
  • Revise high fidelity prototype: 2 days

Process

I began this project with interviews. I sat down with existing flyers to talk about their experiences with both mobile airline websites and airline apps. I showed some existing websites and apps to the interviewees and asked for their feedback on various aspects of the sites/apps.

Pain Points

  • Cluttered interfaces that are hard to skim, and hard to tap on mobile.
  • Confusingly similar wording in different sections.
  • Visual design that lacks information hierarchy and makes it hard to tell areas apart.
  • Confusing site flow with too many screens asking the user to pick options.

Empathy Map

Overall, I found that the bigger airline companies utilized features and designs that flyers felt provided for a good experience, while smaller companies were more likely to have confusing or simply visually unappealing site/app designs. This helped me understand what design patterns to use when I created my lo-fi mobile website design. I also was able to put together a helpful empathy map from my findings, to better connect with the target user.

Mobile airline website customer empathy map

Paper Prototype

For my paper prototype usability tests, I sketched out some lo-fi wireframes on paper, and asked my participants to go through a few tasks with them. In some cases I simply asked where they would click, and in others I had them work through multi-screen flows, where I acted as the “computer,” changing out the screens as they “tapped” on areas. I had the users talk through their actions, and asked them questions when the tasks were completed.

Digital High-fidelity PRototype

Based on user feedback from my paper prototype, I knew I had a design that overall was easy to use, with only a few simple suggestions for changes, such as button location and text orientation. I put those changes into my high-fidelity digital prototype.

I ran my moderated digital prototype tests with my first hi-fi prototype, and again gave the participants tasks and had them talk through their actions. All of the users found the site easy to navigate and use. The only feedback I received was regarding some aesthetic choices and button color contrast. I applied this feedback to a revised hi-fidelity prototype.

Mobile airline website high-fidelity prototype screens
The Final High-Fidelity Prototype Screens

The stakeholder was very happy with the final hi-fi prototype, appreciating the ease of use and appealing interface design.

Next Steps and Recommendations

Next, I would recommend the following:

  • Expanding the existing prototype to include other aspects of the user flow, such as creating an account or signing in.
  • Run first-click and 5-second usability tests with the expanded prototype.