Redesign Website (Passion Project) - Ellisa's Design Space

Airport Website Redesign (Passion Project)

Background

According to multiple sources, the most importance of making an airport website usable and appealing is to allow the users for the following:

real-time flight checking
arrival/departure boards
flight search

However, there are airport websites that do not provide user-friendly and mobile-friendly way to display such information

Goals

Redesign an existing Dulles International Airport’s current Arrival/Departure webpage so that it is both usable and visually appealing.

**

This is a passion project without any insights on Dulles International Airport.

**

01 - Discovery

Competitive Analysis

I did a competitive analysis of other airports in the big cities in the United States. Among them all, Dallas-Fort Work Airport (DFW) and John F. Kennedy (JFK) Airports had the most up-to-date design with straightforward information. They mainly utilized tabular view to simply show the flight status on the page.

Heuristic Evaluation

I conducted a Heuristic Evaluation of the webpage based on Nielsen Norman group‘s Usability Heuristics for User Interface Design.

Based on the heuristic evaluation of the webpage, I was able to pin-point a few parts that needed significant update for better usability

1. Recognition rather than Recall

The webpage needed more clear indication of where the user is located in terms of the what part of the page they clicked on

2. Flexibility and Efficiency of Use

In desktop view, the texts and filter with image background takes up more than half of the vertical space of the view. This leads to the user to only see the top 1 or 2 of the flight status from the list. Thus, the truncation of the background hero image should happen

Effects of Scroll based on Article

Based on the article between how scrolling behavior affects users’ attention by Therese Fessenden at Nielsen Norman group, the author shares that from the new eye tracking data, user tends to spend more time above the page fold of the website than below it. Also, the author emphasizes the importance of content prioritization when planning for a content.

How Does It Apply To This Case?

And this applies to the Dulles International Airport’s website as well. As mentioned in Flexibility and Efficiency of Use section, since there is a lot of vertical space of the page taken up by the hero image background and filters, the user must scroll down to see the list of flights’ status. This prioritization of the content should be revisited, so that the user can perceive as many useful information to them in the above the page fold

**

If this was an eCommerce website, it would be crucial to have content prioritization streamlined to fit above the page fold, so that CTA (call to action) can be drawn from the user by buttons and links quickly

**

02 - Design

Low-Mid Fidelity Wireframe

To convey the above statements into designs, I quickly made a low-mid fidelity wireframes to visualize the suggested design

High Fidelity Wireframe

For high fidelity mockup, I utilized IBM’s Carbon Design System to convey the fact there is a need for a lot of data are to be shown in the page rather than creating a custom UI. Also, the design system is fully equipped to be compatible with various front-end production tools such as React or Angular

03 - Handoff to Devs (hypothetically)

Below is an example of Design Specification documentation of how I would have handed off to developers with Figma designs, so that the developers could refer to designs and get them implemented with background knowledge of each component and design decisions.