Flight Reseating dashboard with filtering options shown

Overview

I designed and built the frontend for Hong Kong Express’s internal flight reseating management system for my third collaboration with the airline software solutions company Huagati Systems.

Design

As the app is an internal seat management application, its naturally data-heavy, interactive nature required highly nested components to be displayed with relative usability in the Figma prototype.

In this case, many moving parts were built into the DataTable component, for displaying and editing stateful data. Many visual cues for good UX were taken into consideration, such as consolidating multiple states into recognizable, color-coded icons.

Final Figma prototype of the Reseating Management site

Development

Implementation of the site also proved a unique experience.

One example was the implementation of the DataTable component, a relatively complex component that linked up to the app’s existing data model via generic typing. Thanks to Blazor-specific optimizations, the component remained performant with large amounts of data.

Due to the data-dense nature of the Flights table, having a condensed visual language to represent state per row was necessary. To accomplish this, I used icons to create a a simplified visual language to represent the state of flights and individual bookings.

Figma view of individual bookings to be reseated in a flight: each icon is a representation of a reseating-specific concept.