Flightpad - App & Web Design
Flightpad is a digital aviation assistant designed to help pilots access essential flight information in one place. It brings together weather, airport and runway data, communication frequencies, NOTAMs, and flight notes, helping pilots review conditions without switching between multiple sources.
Category
Aviation
Date
Goal: Bringing fragmented flight information into one clear workspace
The project started from a problem identified by the client, an active pilot, who had also discussed existing workflows and pain points with other pilots. These insights, combined with the project brief and an analysis of similar aviation tools, showed that pilots often need to move between multiple sources to check weather, airport and runway information, frequencies, NOTAMs, and flight notes.
The goal was to bring this information into one clear workspace while keeping the interface easy to scan in demanding cockpit conditions. A key constraint was balancing information density with readability, so pilots could quickly find what they needed without navigating between multiple tools or views.
Design Challenge: Making complex data readable in flight
One of the main challenges was designing an interface that could display a large amount of aviation data without becoming visually overwhelming.
The initial visual direction relied more heavily on gradients and decorative elements to give the product a distinctive identity. As the interface evolved, we questioned whether this approach would remain readable in less stable cockpit conditions.
To explore this, I created a prototype in Figma Make that simulated screen movement similar to what a pilot might experience during turbulence. This was not a substitute for testing in real flight conditions, but it helped us evaluate the visual stability of the interface and identify elements that could make information harder to scan.
Based on this exploration, we simplified the visual language. Gradients were removed in favour of a clean, light background, while colour was reserved for functional purposes such as communicating weather conditions, runway information, and warnings.
This shifted the interface from a more expressive visual direction toward one focused on clarity, hierarchy, and fast information retrieval.
Information Architecture: Structuring complex aviation information
The initial information architecture was shaped by the project brief, insights shared by the client after conversations with other pilots, and an analysis of existing aviation tools.
I first identified the information and features that were essential to the pilot’s workflow, then compared how similar products organised weather, airport data, runway information, frequencies, NOTAMs, and flight notes. This helped me understand established patterns as well as areas where information could be presented more clearly.
Because aviation was a new domain for me, I also spent time learning the terminology and understanding how different types of flight information relate to one another. I used AI tools to clarify domain-specific concepts and terminology before translating that knowledge into interface decisions.
The structure evolved significantly during the design process. Rather than treating the initial architecture as fixed, I continuously adjusted the hierarchy and grouping of information as the screens became more detailed.
The main challenge was deciding what pilots needed to see immediately and what could be progressively revealed in more detailed views. This became the foundation for the final navigation, card structure, and information hierarchy.
Making complex data readable in flight
One of the main challenges was designing an interface that could display a large amount of aviation data without becoming visually overwhelming.
The initial visual direction relied more heavily on gradients and decorative elements to give the product a distinctive identity. As the interface evolved, we questioned whether this approach would remain readable in less stable cockpit conditions.
To explore this, I created a prototype in Figma Make that simulated screen movement similar to what a pilot might experience during turbulence. This was not a substitute for testing in real flight conditions, but it helped us evaluate the visual stability of the interface and identify elements that could make information harder to scan.
Based on this exploration, we simplified the visual language. Gradients were removed in favour of a clean, light background, while colour was reserved for functional purposes such as communicating weather conditions, runway information, and warnings.
This shifted the interface from a more expressive visual direction toward one focused on clarity, hierarchy, and fast information retrieval.
Final Solution: Building a scalable interface around clarity and hierarchy
The final interface is built around three principles: clarity, hierarchy, and speed of access.
A consistent card-based structure helps organise dense aviation data, while the functional colour system highlights information such as weather conditions, runway status, and warnings without adding unnecessary visual noise.
I also created a reusable design system covering core components, typography, colours, states, and interface patterns. This helped maintain consistency across the product and created a foundation for future features and screens.
Detailed information is progressively revealed through dedicated flight and airport views, allowing the main interface to remain scannable while still giving pilots access to more complex data when needed.
Alongside the product interface, I designed and built the Flightpad marketing website in Framer. The live website is available at flightpad.org.
