Interface design · Functional prototype

Sky-Serve.

In-flight food and drink ordering prototype for passengers and cabin crew.

Context: MSc low-code module
My focus: Interface design & functional prototyping
Tools & methods: FlutterFlow · Firebase Firestore
Deliverable: Passenger app & crew dashboard prototype

Sky-Serve passenger interface with a search field and large illustrated food and drink categories. — The passenger interface I designed for browsing food and drink by category or search.View full size

01 · The brief

Project brief and my role

I designed and built Sky-Serve for my MSc low-code module using FlutterFlow and Firebase Firestore. It is a prototype for ordering food and drink during a flight: passengers order from their seat, while cabin crew manage incoming orders and stock.

My work covered the passenger screens, crew dashboard and the data and interaction logic connecting them. I linked each order to a seat so crew could identify the passenger, fulfil the order and update its status.

02 · Passenger experience

Passenger browsing and checkout

I designed food and drink category cards for browsing and added search for specific items, with results updating as the query changes. Both use the same item collection, so the prototype does not need separate copies of the catalogue.

I kept the seat number and cart visible in the navigation. The seat number stays associated with the cart and order as the passenger moves through the interface.

Food and drink categories: Cards combine images and category names to organise the catalogue.
Cart quantities: Adding an item already in the cart increases its quantity instead of creating another line.
Availability and action feedback: Stock checks, disabled actions and short messages indicate whether an item can be ordered or checkout can continue.

Sky-Serve prototype screen for entering a passenger seat. — The seat-entry screen. The prototype associates this seat number with the passenger’s cart and order.View full size

03 · Crew experience

Crew order and stock management

I built a crew dashboard with separate views for pending and completed orders. Each order shows the seat, items, quantities, timestamp and priority. Crew can mark an order as complete, void it or adjust the available inventory. Item management also includes a form for adding catalogue entries.

I connected the passenger and crew interfaces through Firestore. Checkout creates an order record, the dashboard displays current orders, and crew actions update those records. Stock changes are also reflected in the passenger catalogue.

Sky-Serve crew dashboard showing order management and inventory controls. — The crew dashboard, with order details, fulfilment actions and stock controls.View full size

04 · Implementation

Order logic and interface states

I added logic to prevent checkout from an empty cart, check stock, update inventory and clear the cart after an order. These behaviours support the full prototype flow from passenger browsing to crew fulfilment.

The result was an academic prototype with working passenger and crew interfaces connected through a shared backend.

05 · What I would test next

Planned usability and reliability testing

The next step would be moderated sessions with passengers and crew, covering finding an item, changing a cart and resolving an order. I would pay particular attention to interruptions, mistakes in seat entry and how clearly the interface communicates an unavailable item.

I would also examine concurrent orders and disrupted connectivity, evaluating the prototype’s reliability under real cabin constraints.