Objective
This mobile flight information interface is designed for travelers navigating Atlanta International Airport, optimized for viewing on an iPhone 14 Pro. The interface features an overview page listing all flights, a detailed page for specific flight information, and an additional page providing general airport details.
Sketches
The sketching process involved exploring which information would be included in the flight overview tab, how the information would be grouped, and how to build a visual hierarchy. The information was sorted into four groups: origin, schedule, flight, and update. Origin and flight information are key for making the flight identifiable for passengers, while schedules and updates are essential for displaying the status information.
Digital Translation
Flight Overview Page
In early iterations of the overview page, variables such as color, type size, and shapes were restricted to focus on establishing a strong foundational composition. Categorical titles proved to be unnecessary to include. This is because the typographical grid system should be strong enough for the labels to be redundant. Flights appear chronologically because a passenger's flying experience is inherently time-sensitive.
Detailed Flight Info Page
On the detailed flight information page, it was apparent that type sizes needed to have a larger contrast in scale to better occupy the composition. The visual hierarchy was not strong and future iterations should have the flight status as the top level of the hierarchy.
Color Exploration
Flight Overview Page
Detailed Flight Info Page
Style Guide: Color & Type
Sky blue & bright, red-orange were chosen for the final color palette because they create sufficient contrast that doesn’t overwhelm the composition. In my early iterations, I found that the dark blue paired with the white background felt unbalanced and unnecessary. The sky blue and the off-white offer a smoother transition, eliminating the harsh contrast in value. Because the red-orange served as the brightest pop of color, it was used minimally.
The sans serif, Open Sans, offered high readability and a wide range of fonts. Given that this interface is being used by a wide range of people under the stressful circumstances of flying, it was crucial to use an accessible and legible typeface.
Additional Information Page
The contact numbers are at the top of the visual hierarchy so the user can easily navigate to their desired resource. Icons were designed for each resource to create a distinction between the groupings and make the resources easily recognizable.
Welcome Page
For the welcome page, the objective was to design a simple, clear introduction to the Atlanta Airport. The contrast was lowered between the background and the material to create a greater sense of calm and ease for the users.
Final
