O’Hare Airport
Challenge
Every airport traveler’s nemesis: flight information displays. When racing to catch a connecting flight while wrangling a gaggle of kids, an overflowing luggage cart, an armful of passports, and a half-eaten sixteen-dollar breakfast sandwich, the last thing your jetlagged eyes need to navigate is a massive moving wall of tiny claustrophobic text.
Every airport traveler’s nemesis: flight information displays. When racing to catch a connecting flight while wrangling a gaggle of kids, an overflowing luggage cart, an armful of passports, and a half-eaten sixteen-dollar breakfast sandwich, the last thing your jetlagged eyes need to navigate is a massive moving wall of tiny claustrophobic text.
Approach
This conceptual mobile website for Chicago’s O’Hare airport aims to be a breath of calm in the chaos that is airport travel. Erasing distractions and preventing information overload, this straightforward approach to the flight information display system presents itself in a logical, pocket-sized format that makes finding flights simple and stress-free.
This conceptual mobile website for Chicago’s O’Hare airport aims to be a breath of calm in the chaos that is airport travel. Erasing distractions and preventing information overload, this straightforward approach to the flight information display system presents itself in a logical, pocket-sized format that makes finding flights simple and stress-free.
2022
Studio Project
Visual System Development, Mobile Website Design & Prototyping
Scroll ︎︎︎
Process
Research
In tackling this project, I wanted to first immerse myself in the problem space. I researched and tried using existing mobile websites for some of the largest airports in the U.S. to find pain points that I could address. The majority of these websites were surpisingly hard to navigate and showed little consideration for the users interacting with the information.
In tackling this project, I wanted to first immerse myself in the problem space. I researched and tried using existing mobile websites for some of the largest airports in the U.S. to find pain points that I could address. The majority of these websites were surpisingly hard to navigate and showed little consideration for the users interacting with the information.
Key Issues
︎Poor legibility
︎Not enough whitespace
︎Poor legibility
︎Not enough whitespace
︎Information overload
︎Redundancy
︎Visually dull
︎Confusing navigation
Content Hierarchy
Armed with my research, the first thing I addressed was the content structure. Above all else, I wanted this website to be as intuitive and straightforward as possible. As I structured the information hierarchy and navigation, I included only the most vital details on each screen, paired with simple, actionable steps to simplify the user experience and aid comprehension.
Armed with my research, the first thing I addressed was the content structure. Above all else, I wanted this website to be as intuitive and straightforward as possible. As I structured the information hierarchy and navigation, I included only the most vital details on each screen, paired with simple, actionable steps to simplify the user experience and aid comprehension.
Intent
With my content structured, I planned my direction moving forward. I wanted to replace the difficult and overwhelming spreadsheet format with a bold visual experience that captured the excitement of travel in a simple and enjoyable format. Through revisions and testing, I then streamlined the user experience and addressed accessibility and usability issues as they arose.
With my content structured, I planned my direction moving forward. I wanted to replace the difficult and overwhelming spreadsheet format with a bold visual experience that captured the excitement of travel in a simple and enjoyable format. Through revisions and testing, I then streamlined the user experience and addressed accessibility and usability issues as they arose.
Goal Attributes
︎Enjoyable
︎Legible
︎Relaxing
︎Simple
︎Easy to use
︎Not boring
︎Enjoyable
︎Legible
︎Relaxing
︎Simple
︎Easy to use
︎Not boring
Iteration 1
In this first direction, I used light and airy shapes and colors to give a sense of ease and clarity. This direction was a good start, but ended up missing the mark with a slightly childish undertone and some legibility issues.
In this first direction, I used light and airy shapes and colors to give a sense of ease and clarity. This direction was a good start, but ended up missing the mark with a slightly childish undertone and some legibility issues.
Iteration 2
Moving on, I refined the overall visual tone of the app, switching to a dark format and testing a more mature color palette better suited to the general flying audience. I also incorporated display type that better reflected a sense of adventure and excitement.
Moving on, I refined the overall visual tone of the app, switching to a dark format and testing a more mature color palette better suited to the general flying audience. I also incorporated display type that better reflected a sense of adventure and excitement.
The dark text on dark background, thin button margins and tight tracking, however, presented some legibility issues that needed resolved. This version was getting closer, but felt a bit muddy overall.
Final Design
In the final design, I refined the layout, honing in on legibility factors. Greater visual contrast, reinforced type hierarchy, increased padding around text and buttons, and additional negative space decluttered the design and allowed for quick navigation and comprehension of information.
In the final design, I refined the layout, honing in on legibility factors. Greater visual contrast, reinforced type hierarchy, increased padding around text and buttons, and additional negative space decluttered the design and allowed for quick navigation and comprehension of information.
I also replaced the high-key blue accent with a warm, relaxing yellow and incorporated icons that mirrored the visual language of the letterforms, building cohesion. Balancing simplicity with a strong sense of personality, it manages to deliver a fresh, non-intimidating experience.
Typography & Color
Icons
To visually describe each flight’s status, I created an adaptable icon system of a plane in varying degrees of flight.
To visually describe each flight’s status, I created an adaptable icon system of a plane in varying degrees of flight.
Final Prototype
Walkthrough of final app.
Walkthrough of final app.
Final Site
Back︎︎︎