← Work

Flight Planning

A planner for three aircraft, from a December 2019 take-home task: today's plans beside one map, every crossing shown, only the close ones in time a conflict.

Year
2019
Track
design
Category
case-study

Tools

  • Adobe XD
  • Adobe InDesign
  • Claude Design

Three aircraft, one plan each, one day at a time. This is a planner for the fleet manager who supervises them: today's three plans in a list beside one map, every place two routes cross marked on it, and only a crossing the two aircraft reach within 15 min of each other called a conflict. A conflict is counted in the top bar, named in a banner and ringed on the map, and nothing stops the screen to say so. It began as a take-home design task for a flight-planning app in December 2019. Nothing shipped. The screens on this page are the planner as a working desktop and tablet prototype, made in a Claude Design canvas. I directed it and Claude built it.

  1. The planner on Wednesday 14 October, today. A top bar with Day and Schedule tabs, the date between two arrows, and a red pill reading 2 conflicts. On the left, Flight plans for 3 aircraft: a red banner reading 1 conflict on this day, Atlas and Cirrus cross near Paris, 7 min apart, with a Review conflict button, then an hour scale from 06 to 21 and three rows. Atlas, A321neo, AMS to BCN to FCO, 07:40 to 11:55, marked Conflict. Borealis, 737-8, LHR to MUC to ATH, 11:30 to 16:10. Cirrus, A220-300, CDG to PRG to WAW, 08:10 to 11:30, marked Conflict. On the right, a dark map of Europe with the three routes in blue, violet and green, and a red ring where Atlas and Cirrus cross near Paris. A legend at the foot: Atlas, Borealis, Cirrus, Crossing, Conflict under 15 min.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

Open the planner

See it running, at the foot of this page, opens the planner at its own size in a new tab.

The brief

The brief asked for "a simple application for planning flight paths" for in-office, multi-tasking fleet managers. The user has three aircraft and cannot add or remove one, and each aircraft flies one plan a day. Then came seven things the app had to do, and one line I kept in front of me: "Don't design more than you feel is needed to appropriately convey your ideas." The seven are below, each linking to the part of the planner that answers it.

Three aircraft, one flight plan each per day. None can be added or removed. The app had to:

  1. Show each flight on a map, with its distance in km and where it starts and ends.

    Crossing or conflict

  2. List every flight for one aircraft in a table: date, distance, start and destination.

    Past and future

  3. List all three aircraft's flights for one day in a table.

    Crossing or conflict

  4. Link every row in a table to that flight on the map.

    Past and future

  5. Show past flights and future ones.

    Past and future

  6. Let future flights be changed.

    Editing a route

  7. Say when two aircraft's paths cross on the same day, on the map, in the tables, or somewhere more global.

    Crossing or conflict

Reading it

I read the brief into one priority before I drew anything. My note from December 2019, as I wrote it: "Briefing dictates that the user of the app is going to get three flight plans and there will be one flight path for each aircraft. I have interpreted this as everyday user opens up the app s/he will supervise three flights for the day. The app is going to allow managing future and past plans, yet I thought it might be separated from home screen since supervising three flights each day is no. one priority."

The sheet is the brief redrawn in pen, one doodle per requirement: only three flights, one plan a day, a table and a map with a question mark between them, three paths crossing under "Collision Warning?" in red, a car for past and future, a pencil for editing. It is here as I drew it.

A hand-drawn sheet in coloured pen, read top to bottom. ONLY 3 FLIGHTS per user, over an airliner and a person, with can't add beside a plus and can't remove beside a no-entry sign. A large 1, one flight plan for each day, over three planes each marked 1. LINK between two headings, DISPLAY on a table, over a grid with a few cells filled, and DISPLAY on a map, over a globe, a question mark between them. Under the table a checklist: date of flight, departure field, arrival field, distance. Under the map: distance (metric), departure field, arrival field. Three planes on dotted paths that cross, and in red, Collision Warning? Show the Paths for a given day, in a tabular format. ABILITY TO SEE over a time-travelling car, past and future flights. A dotted path with an airliner, a pencil over a red dot on it, and EDIT FLIGHT PATHS?

Today first

The architecture follows from the note. Two roots, in my 2019 definitions: "Flight Plans: The app is going to welcome the user with this screen, that will consist of three plans both in tabular and map views integrated to the same screen." And "Schedule: This will be accessed with a button in the first screen to access all flight plans in the future and past and will allow metadata search." In the planner, Flight Plans is the Day tab and Schedule is the tab beside it.

A hand-drawn diagram on pale blue paper. At the top, two boxes, Table and Map, joined by a line. Dotted lines fan from both to three small circles, Plan 1, Plan 2 and Plan 3, and from those to three tinted ovals, Flight 1, Flight 2 and Flight 3, which all lead to a large circle, Flight Plan. A solid line with a pink dot on it runs down to a second large circle, Schedule, which leads to Future Flights, Past Flights and Search. Two long dotted curves run from Table down the left side to Future Flights and Past Flights.

  1. Flight Plans

    The home. Today's three plans, in a table and on a map, on one screen.

    Table Map

    Plan 1 Plan 2 Plan 3

  2. Schedule

    Behind a button on the home. Every plan, future and past, with a search.

    Future Flights Past Flights Search

The information architecture as I drew it in December 2019, and its two roots set as a contents page.

Wireframes

Pen again, in four sets, each strip under the note I wrote for it. The first set puts three colour-coded cards over a map that grows and shrinks. In the planner the three plans are a list beside a map that always fills the rest, so there is one reading direction and the map never competes with the cards for room. The second set asks for two things at once: that the system restrict the user, and that it keep after them until the issue is resolved. The planner keeps the second and not the first. A fleet manager is doing several things at once, and a signal that stays put is worth more than a screen that stops. The last two sets, editing inside the planning view and a table for the past and the future, are what the planner does further down.

  1. Three sketched landscape frames. In the first, three cards across the top, the third filled red with lines of detail, over a large map with one red dotted path. In the second, the cards are tinted teal, violet and red, and the map below shows three dotted paths crossing. In the third, the cards are shorter and the map below them larger.
    The Flight Plan UI. This UI system shows both tabular information in color coded cards and corresponding flight paths on the map. Map can be expanded or minimized to reveal flight destinations of each aircraft.
  2. Two sketched frames, the cards and map faded behind a red warning sign with an exclamation mark. In the first, lines of text and one teal button sit over the map. In the second, the text sits over the cards and two buttons, red and teal, sit under the sign.
    The Collision Issue. When a collision issue arises, system restricts user actions and persistently try to get user's attention to make the issue resolved as soon as possible.
  3. Three sketched frames. In the first, one violet dotted path is drawn bold over the faded others, with undo and redo marks and a Done Editing button in the corner. In the second, a search field reading Enter Destination sits at the end of that path. The third is a Confirm step with two fields, Prev. and New, an arrow between them, and a red and a teal button.
    Editing Flight Paths. System allows path editing in the flight plan UI in any case user is in. Map can be expanded, minimized, all flights selected, it works within the map structure, the change actions can be undone and has to be confirmed upon exit.
  4. One sketched frame: a circle and three small dots at the top, then three groups of three long teal rows, each group led by a tab with an arrow.
    Tabular UI. In order to scan flights from the future or past, user can opt in to all tabular system that is connected to the planning UI. In addition, system provides metadata search.

Crossing or conflict

The brief asked for feedback whenever two paths intersect. Geometry alone is not the risk: two routes can cross hours apart. Time is what makes a crossing dangerous, so the planner shows every crossing and calls only the close ones a conflict. On Wednesday 14 October, the prototype's today, the three routes cross three times. Atlas and Borealis near Brussels, four hours apart. Borealis and Cirrus near Frankfurt, more than three hours apart. Atlas and Cirrus near Paris, 7 min apart. One conflict. The routes are drawn as gentle curves between airports and the time at a crossing is taken along the leg, so this is a planning picture and not flight dynamics.

  1. Near Brussels

    Atlas 07:55, Borealis 12:03

    4 h 08 min apart, a crossing.

  2. Near Paris

    Atlas 08:13, Cirrus 08:20

    7 min apart, a conflict.

  3. Near Frankfurt

    Borealis 12:29, Cirrus 08:50

    3 h 39 min apart, a crossing.

Wednesday 14 October. A crossing two aircraft reach within 15 min of each other is a conflict. The rule is this concept's, not an aviation standard: real deconfliction also uses altitude, lateral separation and air traffic control. Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

A conflict is said in four places and blocks none of them: a count in the top bar on every screen, a banner for the day, a chip on each affected row, and a ring on the map with the gap as its label. Review opens both aircraft on one time line and offers the smallest changes that clear it, a delay for one or an earlier departure for the other, each previewed on hover before Apply and each with Undo after. Or edit the route.

A conflict

Atlas selected. Its row opens to two legs: AMS to BCN, Amsterdam to Barcelona, 07:40 to 09:40, 1,241 km, and BCN to FCO, Barcelona to Rome, 10:25 to 11:55, 846 km. Under them, Crosses Borealis near Brussels, 4 h 08 min apart, no action needed, and a red row, Conflict with Cirrus near Paris, 7 min apart, with Review. An Edit route button. The map shows Atlas's route numbered 1 to 3 with each leg's distance, a small cross where it meets Borealis, and a red ring labelled 7 min where it meets Cirrus. The other two routes are dimmed.
Two crossings on one plan. Brussels is hours apart and stays quiet. Paris is 7 min apart and is the conflict.
The conflict panel, Atlas and Cirrus. Their routes cross near Paris 7 min apart. Plans flag any crossing closer than 15 min. A card headed At the crossing puts the two aircraft on a time line between 08:00 and 08:30, 7 min apart: Atlas, leg 1, AMS to BCN, 08:13, and Cirrus, leg 1, CDG to PRG, 08:20. Two suggested fixes, each with Apply: Delay Cirrus 10 min, departs CDG at 08:20, the closest crossing becomes 17 min apart, no new conflicts; and Move Atlas earlier by 10 min, departs AMS at 07:30, the same. Then Edit Atlas route and Edit Cirrus route. The map shows the red ring near Paris, labelled 7 min.
The same panel with the pointer on Delay Cirrus 10 min. The time line now reads 17 min, Cirrus at 08:30, and the card's bracket is grey instead of red. Nothing is applied yet.
A fix is previewed before it is applied: 17 min apart.
After Apply. The panel reads Cirrus now departs at 08:20: the routes still cross, now 17 min apart, which clears the 15 min rule, with a Back to flight plans button. On the map the red ring near Paris is now a small grey cross. The pill at the top reads 1 conflict, and a toast at the foot reads Cirrus now departs CDG at 08:20, with Undo.
Applied. The routes still cross, now with time between them, and Undo stays on screen.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

The brief allowed something more global than the map and the tables. The count in the top bar is that: it adds up conflicts from today onward, lists them, and each row jumps to its day. The calendar marks the same days with a dot.

  1. The conflicts pill opened as a panel, Upcoming conflicts: crossings closer than 15 min, today and later. One row: Atlas and Borealis near Lyon, 11 min apart, Fri 16 Oct. Behind it, today's plans read No conflicts on this day.
  2. The date opened as a calendar for October 2026, today, the 14th, selected, and a small red dot under Friday the 16th, marked Conflict in the calendar's key. Days from the 7th to the 21st are in full ink, the rest dimmed.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

Editing a route

Editing happens beside the map, in a panel. The origin is locked, because an aircraft starts the day where it ended the one before. Stops can be changed, added or removed, and the departure stepped by minutes. Every airport in the search is previewed on the map before it is chosen. Checks run as the route changes: which crossings it makes, which conflict it resolves or causes, and whether it still ends where tomorrow's plan starts, since a route that strands the aircraft is a planning error too. Review puts planned against edited in one table. Save, and a toast offers Undo.

Edit, review, save

Edit route for Atlas, A321neo, Wednesday 14 October, with Undo. Departs AMS at 07:40, between a minus and a plus, and arrives FCO 10:55. The route, 1,377 km, 710 km less than planned: 1, AMS, Amsterdam Schiphol, locked, Aircraft starts here; 682 km, 1 h 15 min; 2, GVA, Geneva Cointrin; 695 km, 1 h 15 min; 3, FCO, Rome Fiumicino. Change and remove beside each of the last two, and Add stop. Checks: Resolves the conflict with Cirrus, was 7 min apart; Crosses Borealis near Brussels, 4 h 11 min apart; Crosses Cirrus near Brussels, 21 min apart; Ends at FCO, where tomorrow starts. Discard and Review changes at the foot. The map shows the new route through Geneva in blue and the planned route through Barcelona dashed.
Checks run while editing: the conflict clears, and the route still ends at FCO, where tomorrow starts.
The same editor with a search field open under stop 2, m typed in it, and six airports listed with their codes and distance: MXP Milan Malpensa 214 km, MUC Munich Franz Josef Strauss 488 km, highlighted, MAD Madrid Barajas 1,008 km, VCE Venice Marco Polo 490 km, BRU Brussels Zaventem 532 km, AMS Amsterdam Schiphol 682 km. The map previews Munich as stop 3, dashed, 488 km from Geneva.
Every airport in the list is previewed on the map before it is chosen.
Review changes for Atlas. A table of planned against edited. Route: AMS, BCN, FCO against AMS, GVA, FCO. Distance: 2,087 km against 1,377 km. Departs: 07:40 against 07:40. Arrives: 11:55 against 10:55. Conflicts: 1 conflict against None. Back to editing and Save route at the foot. The map shows the edited route over the planned one, dashed.
Planned against edited, in one table, before anything is saved.
Flight plans again, reading No conflicts on this day. Atlas is marked Edited: AMS to GVA to FCO, 07:40 to 10:55, its legs 682 km and 695 km, and two crossings near Brussels, Borealis 4 h 11 min apart and Cirrus 21 min apart, each no action needed. The pill at the top reads 1 conflict. A toast at the foot reads Route saved for Atlas, with Undo.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

Past and future

Days before today have been flown and are read-only, each plan marked Flown. The arrows and the calendar move between days. The Schedule is every plan for the fleet in one table, grouped by day, with a range of upcoming, past or all, a filter to one aircraft, which is the brief's table per plane, and a search across airport, city, aircraft and date. Every row opens its day on the map with the plan in focus.

Flown and planned

Tuesday 13 October, yesterday. A line with a lock reads This day has been flown. Plans are read-only. Atlas, VCE to GVA to AMS, 08:40 to 11:40, Borealis, VCE to BER to LHR, 10:10 to 13:50, and Cirrus, VIE to DUB to CDG, 11:20 to 16:05, each marked Flown. The map shows the three routes with no edit controls.
A flown day is read-only.
The Schedule tab. Every flight plan for the fleet. Open one to see it on the map. A search field for airport, city, aircraft or date, filters for Upcoming, selected, Past and All, and for All aircraft, selected, Atlas, Borealis and Cirrus, and a count of 24 flight plans. A table with columns for aircraft, from, to, departs, arrives, distance and status, grouped by day: Wednesday 14 October, today, Thursday 15, tomorrow, and Friday 16, in 2 days. Today's Atlas and Cirrus rows and Friday's Atlas and Borealis rows are marked Conflict, the rest Planned. Each row ends in an arrow.
The schedule filtered to All dates and to Cirrus alone, 15 flight plans. One row a day from Wednesday 7 October, each marked Flown: Munich to Warsaw via Budapest and Berlin, Warsaw to Amsterdam via Venice and Nice, Amsterdam to Lyon via Dublin, and on down the page.
One aircraft, every date: the brief's table per plane.
The schedule with Oslo typed in the search field and 0 flight plans. In the middle of the page: No flight plans match “Oslo”, and a Clear search button.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

The walkthrough is silent: forty-nine seconds from today's conflict to a saved route, Friday's conflict and the schedule.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

On a tablet

The planner is laid out for a desk first. The same parts sit at touch density on a tablet: controls grow from 36 px to 44 px, and text fields to 16 px so Safari does not zoom in on them. The tablet prototype opens in its own tab too.

Tablet

The planner on a tablet, Wednesday 14 October: the same banner, 1 conflict on this day, and the three plans on the left, the map with the three routes and the red ring near Paris on the right. Controls and type are larger.
The same parts at touch density.
The conflict panel on a tablet: Atlas and Cirrus, 7 min apart near Paris, the time line with Atlas at 08:13 and Cirrus at 08:20, and the two suggested fixes, each with Apply.
The route editor on a tablet with m typed in the airport search. Milan Malpensa, 214 km, is highlighted, and the map previews it as stop 3, dashed, after Geneva.
The schedule on a tablet: Upcoming and All aircraft selected, 24 flight plans, today's Atlas and Cirrus rows marked Conflict, then Thursday's three rows, Planned.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

Clearway

The prototype runs on a small token layer made for this project, Clearway. It is not any company's design system. Blue-black neutrals, Geist and Geist Mono, a colour for each aircraft and one alarm colour, so red means one thing. Dark only. The ratios below are worked out from the hex values, not typed in, and every pair clears its floor.

  • surface.canvas#090C11The ground of the whole app, and the sea on the map.
  • surface.panel#0E1217The plan list and the panels beside the map.
  • map.land#151B23Land on the map, under the routes.
  • alert.tint#2A1D21The conflict banner and alert rows.
  • text.primary#E4E8EDNames, times and headings. Also the focus ring.15.27:1 on surface.panel, AA14.07:1 on map.land, AA for a mark
  • text.secondary#A3ACB6Supporting lines, and distances on the map.8.17:1 on surface.panel, AA
  • text.tertiary#848D98The quietest level of text.5.59:1 on surface.panel, AA
  • line.strong#616A75The outline of a text field.3.42:1 on surface.panel, AA for a mark
  • aircraft.atlas#3899E2Atlas's route, badge and time bar.5.63:1 on map.land, AA for a mark
  • aircraft.borealis#B199F4Borealis's route, badge and time bar.7.20:1 on map.land, AA for a mark
  • aircraft.cirrus#5BDFB7Cirrus's route, badge and time bar.10.46:1 on map.land, AA for a mark
  • alert.base#F66D67The conflict ring on the map, and the tick on a time bar.6.02:1 on map.land, AA for a mark
  • alert.text#FB9890Words on the conflict banner and alert rows.7.71:1 on alert.tint, AA

Prototype.

The components, from the same board: a plan row closed and open, the day banner, the crossing card, a suggested fix, the checks, the airport search, the chips, the issues pill and the toast.

A plan row, collapsed: Atlas, A321neo, marked Conflict, AMS to BCN to FCO, 07:40 to 11:55, and a time bar with its two legs in blue and a red tick where the conflict falls.
The same row, open: the two legs with their cities, times and distances, Crosses Borealis near Brussels, 4 h 08 min apart, no action needed, a red row reading Conflict with Cirrus near Paris, 7 min apart, with Review, and Edit route.
The day banner, on a dark red ground: 1 conflict on this day. Atlas and Cirrus cross near Paris, 7 min apart. A Review conflict button.
At the crossing: a time line from 08:00 to 08:30 with a blue and a green dot bracketed 7 min in red, then Atlas, leg 1, AMS to BCN, 08:13, and Cirrus, leg 1, CDG to PRG, 08:20.
A suggested fix: Delay Cirrus 10 min. Departs CDG at 08:20. The closest crossing becomes 17 min apart. No new conflicts. An Apply button.
Four checks. A tick, Resolves the conflict with Cirrus, was 7 min apart. A cross, Crosses Borealis near Brussels, 4 h 11 min apart. A cross, Crosses Cirrus near Brussels, 21 min apart. A tick, Ends at FCO, where tomorrow starts.
The airport search with m typed, and six options, each a code, a city, an airport and a distance: MXP Milan Malpensa 214 km, highlighted, MUC Munich 488 km, MAD Madrid 1,008 km, VCE Venice 490 km, BRU Brussels 532 km, AMS Amsterdam 682 km.
Four status chips: Conflict, in red with a dot, Edited, Flown and Planned.
The issues pill in its two states: 2 conflicts, red, with a chevron, and No conflicts, grey, with a tick.
A toast: a tick, Route saved for Atlas, and Undo.

Prototype. The fleet, its schedule and its times are invented. Only the airports are real.

See it running

More case studies

See all 27