Independent product reconstruction · Product strategy · Design systems · Component architecture · Frontend
MachIFE
One passenger experience. Many airline identities.
MachIFE is a brand-neutral reconstruction of a white-label in-flight entertainment and connectivity system I helped shape in commercial aviation. It brings Wi-Fi, flight tools, entertainment, advertising opportunities, and destination content into one configurable passenger shell—then lets each airline inherit the product as its own.
This portfolio reconstruction makes the systems thinking behind the work visible: reusable component contracts, configurable capabilities, and token-driven brand expression working together as one coherent product.
The problem
Different aircraft and airline brands needed different services—without becoming different products.
Airline customers needed to sell Wi-Fi plans to passengers. As connectivity and entertainment capabilities came together, the same portal also needed to deliver media to personal devices on aircraft without seatback screens—and create room for advertising and sponsored content.
The required service mix varied by airline and aircraft: connectivity only, connectivity with advertising, a fuller entertainment offer, or some combination of them. Building a separate portal for every deployment would multiply frontend work, fragment the passenger experience, and make every rebrand expensive. The product problem was to make capabilities and identity configurable while keeping one coherent passenger system.
What I led
Build the shared system, not another airline skin.
I led the design-system and component-architecture work: defining the reusable UI contracts, separating shared behavior from airline presentation, and creating the theming foundation that allowed the product to be reconfigured and rebranded without rebuilding it screen by screen.
The result was a shared widget library and SCSS system that teammates could assemble into production experiences with dependable interaction, responsive behavior, and styling already built in.
- 01
Reusable UI library
Shared widgets encoded interaction behavior, responsive rules, and common passenger patterns once for reuse across service modules.
- 02
SCSS theming system
Brand variables, shared foundations, and component styles separated airline identity from the underlying product behavior.
- 03
Capability composition
Connectivity, entertainment, advertising, and flight tools could be furnished in different combinations without forking the passenger shell.
- 04
Team enablement
Clear component contracts gave teammates who had previously focused on backend engineering a dependable path into end-to-end product delivery.
White-label architecture
Keep the journey stable. Let the airline change.
The portal is composed in three layers. The first two protect passenger familiarity; the third carries each carrier’s identity.
- 01Navigation · flight context · account · search · connectivity state
Passenger shell
The familiar structure that keeps every task legible.
- 02Connect · Watch · Listen · Read · Play · Shop · News · Weather
Service modules
Independent product surfaces composed from the same system.
- 03Tokens · typography · imagery · voice · radius · capabilities
Airline identity
The variable layer that lets a carrier own the experience.
Passenger task map
The flight is the context. The task can change at any moment.
LAXEn route · 62% completeMCO
- Connect
- Watch
- Listen
- Read
- Play
- Shop
- News
- Weather
Product principles
A broad portal still needs one point of view.
Flight context stays present
Route, progress, time remaining, connectivity, and account state remain available without competing with the passenger’s current task.
One shell, many depths
A glanceable dashboard, a transactional Wi-Fi purchase, a dense media catalog, and live flight telemetry share the same navigation and interaction grammar.
Brand is configuration
Semantic tokens and asset inputs carry the airline identity so the shared components do not need to be restyled one screen at a time.
Built for constrained attention
Large targets, compact labels, clear hierarchy, restrained motion, and responsive reflow make the portal usable from seatback displays to passenger phones.
Inspect the reconstruction
The original principles, rebuilt as public proof.
MachIFE is not the former commercial product. It is an independent implementation that makes the same architectural ideas inspectable in code and Storybook.
- Portfolio reconstruction
- Vite and React portal with route-level product surfaces and shared state for connectivity, favorites, language, and passenger preferences
- Reconstructed design system
- Canonical React component package, semantic CSS tokens, CSS Modules, brand assets, and a separately deployed Storybook
- Composition
- Reusable TileGrid and named-area BentoGrid primitives govern service grids across desktop, tablet, and phone tiers
- White-label model
- Theme, accent, type, shape, imagery, navigation treatment, content, and enabled capabilities are expressed as replaceable system inputs
- Passenger state
- Sample route progress, Wi-Fi plans, purchase flow, media favorites, weather, destination, account, and localization experiences
- Accessibility
- Semantic landmarks, keyboard-operable controls, visible focus states, labeled navigation, theme-aware contrast, and RTL-ready logical layout rules