App Design
AeroTrack
Live Flight & Satellite Tracking Platform
Overview
A dual-mode live tracking platform for monitoring commercial flights and orbital satellites in real time — across desktop and mobile.
AeroTrack combines two powerful tracking modes into a single, cohesive dark interface. The Flights mode renders live aircraft positions on an interactive map with full flight detail panels, while Orbit mode tracks satellites and space stations using real-time telemetry data including velocity, altitude, and latitude/longitude. Designed for both enthusiast and professional audiences, the app scales gracefully from mobile to widescreen.
Role
Lead UX/UI Designer
Platform
Desktop & Mobile App
Duration
6 months
Tools
Figma, FigJam, Protopie
Team
PM, Designer, Engineer
Impact
50+
Active Flights Tracked
2
Tracking Modes
13+
Satellite Categories
Live
Real-Time Data Feed
01 — Flights Mode
Live aircraft on an interactive dark map
Live aircraft positions
Colour-coded triangular icons represent Commercial, Private, and Cargo flights — updating in real time with directional orientation.
Network statistics
Active Flights count (50) and Avg. Network Speed (495 kts) are surfaced as scannable stat cards in the top-right panel.
Search & filter
A prominent search bar accepts flight number, city, or airline — enabling instant lookup without leaving the map context.
02 — Flight Detail Panel
A full day's racing at a glance
Global orbit map
Satellites are plotted as glowing markers across a dark world map — categorised as Space Station, Communication, or Telescope with a colour legend.
Telemetry panel
Selecting a satellite surfaces its NORAD ID, velocity (km/s), altitude (km), latitude, and longitude — alongside an orbital image from the satellite's perspective.
Network stats
Tracked Objects count and Avg. Orbital Velocity (27,428 km/s) give operators a live overview of the monitored constellation.
04 — Mobile Experience
Full-featured tracking on any screen size
The mobile layout preserves every core interaction — live map, detail panels, search, and both tracking modes — within a compact portrait interface. The sidebar navigation collapses to icon-only, the map fills the full viewport, and panels slide up from the bottom, keeping the map visible at all times.
Summary
Overview
A dual-mode flight and satellite tracking platform enabling aviation enthusiasts to monitor real-time aircraft and orbital data with advanced filtering and live notifications.
Challenge
Flight tracking enthusiasts lacked a unified interface combining live flight data, satellite orbits, and historical tracking without overwhelming complexity or information overload.
Solution
Designed an intuitive dual-mode interface (Flights/Orbit) with real-time updates, advanced filtering by aircraft type and flight history, live notifications, and a clean dashboard—reducing learning curve by 70%.
Key Results
05 — User Testing
Aviation enthusiast testing — validating real-time data density and dual-mode clarity
AeroTrack serves two audiences with different needs: casual planespotters who want to identify aircraft overhead, and aviation professionals monitoring specific routes or fleet movements. Testing recruited both groups to validate whether a single interface could serve both without compromising either — and whether the dual-mode Flights/Orbit toggle was intuitive for first-time users.
Map interaction and data density testing
Participants were shown the live flights map and asked to find a specific flight, identify its speed and altitude, and track it to its destination. Sessions measured whether the colour-coded aircraft markers were understood without a legend, and whether the telemetry panel surfaced the right data at the right moment.
Dual-mode discoverability testing
First-time users were given the app without any introduction and asked to find the satellite tracking mode. Sessions revealed that the Flights/Orbit toggle in the top nav was missed by 40% of participants on first use — leading to a more prominent mode switcher design and a brief first-launch tooltip.
Mobile vs desktop parity testing
The same tasks were completed on both mobile and desktop to validate whether the bottom sheet panel on mobile conveyed the same information as the desktop drawer. Sessions confirmed parity in data completeness but revealed that the mobile map markers were too small at standard zoom — requiring a minimum size increase for touch accuracy.
Key Outcomes
70%
faster onboarding — dual-mode tooltip reduced first-session confusion significantly
4.6★
user rating — data density and real-time accuracy were the top-cited satisfaction drivers
Mode toggle
redesigned from text-only to icon+text after 40% of first-time users missed it entirely
Map markers
increased by 20% on mobile after touch accuracy testing showed consistent miss-taps at default size
Orbit mode
satellite category legend added after 65% of participants couldn't distinguish spacecraft types without it
Methodology
Design System
AeroTrack — dark cartographic interface system
A unified dark design language built for live data density — map-centric layout, glowing data markers, and a colour taxonomy separating aircraft types and satellite categories at a glance.
Colour Palette
Map Black
#0A0E17
Primary map background, full-bleed interface surface
Panel Dark
#141927
Sidebar panels, detail drawers, top nav
Card Surface
#1C2436
Stat cards, flight detail panels, telemetry blocks
Commercial Blue
#4FC3F7
Commercial flight markers, active selection glow
Private Amber
#FFB300
Private aircraft markers, type-filter label
Cargo Green
#69F0AE
Cargo flight markers, freight category indicator
Satellite Cyan
#00E5FF
Satellite orbit markers, ISS indicator, telemetry text
Orbit Purple
#CE93D8
Telescope and deep-space satellite category markers
Typography Scale
24px / 700w
App Title
AeroTrack wordmark in top nav, mode switcher labels
18px / 600w
Panel Heading
Flight detail panel title, satellite name, stat card labels
28px / 700w
Telemetry Data
Active flight count, velocity, altitude — primary KPI values
13px / 400w
Body / Meta
Flight descriptions, NORAD IDs, lat/lon coordinates
12px / 500w
Mono Figures
Live counters, speed readouts, orbital period data
Core Components
Map Marker
Triangular aircraft icon with directional orientation, coloured by flight type (blue = commercial, amber = private, green = cargo). Glows on hover.
Flight Detail Panel
Slide-in right drawer showing airline, flight number, origin/destination, altitude, speed, and a miniature route arc map.
Stat Card
Small dark tile with a label (Active Flights / Avg. Speed) above a large bold value — positioned as a top-right overlay on the map view.
Mode Toggle
Dual-mode switcher (Flights / Orbit) in the top nav — switches the entire map context and colour taxonomy without a page reload.
Satellite Marker
Glowing circular marker with a category colour ring — Space Station (cyan), Communication (blue), Telescope (purple). Pulsing animation indicates live tracking.
Bottom Sheet (Mobile)
Slide-up panel on mobile replacing the side drawer — shows full detail while keeping the map visible at the top of the viewport.
"Chris delivered a flight tracking platform that's intuitive for both casual users and aviation enthusiasts. The dual-mode design elegantly handles real-time aircraft data alongside satellite tracking—exactly what our user base needed."
David Thompson
Lead Product Manager, AeroTrack