BACK TO HOME

Drop Drone Delivery Dashboard

A dashboard designed to be used by the operation manager of a fleet of delivery drones. Created to provide quick insights along with in-depth information.

SOLO · 4 WEEKS · CLASS PROJECT

The Drop home screen: a map of San Francisco with drones, fleet KPIs and the drone table

A drone screen: Drone 16’s delivery, flight map, what it’s carrying, its health and performance

Concept

This dashboard accompanies a self-automated drone delivery app.

The user focused app would be a drone-powered delivery platform that allows customers to place orders and track their packages as drones transport them.

The dashboard is the admin side of the app, designed for an operations manager to monitor the entire fleet of drones. It would allow the admin to track location of the drones, monitor deliveries, watch drone battery/maintenance, etc.

PROJECT GOAL

Create a clean, real-time dashboard that shows the most critical information quickly, with drill-down options for deeper insights.

The User

USER PERSONA

Drone fleet operations manager

Their questions and goals

How efficient is the drone fleet overall?
How many/which deliveries are on time, or delayed?
Where are all delivery drones right now, and what are they carrying?
Are there changes in drone performance over time?
Are any drones experiencing low battery or technical issues?

Persona card: Drone Fleet Operations Manager. They manage a fleet of delivery drones, ensuring deliveries stay on schedule, tracking drone health (battery and maintenance), and quickly responding to issues like delays or malfunctions. Quotes: “I can’t see the big picture of the current drone activity fast enough.” “It takes too long to find info on a specific drone.” “I wish I could quickly compare performance over time.”

Process

Low fidelity designs

Two low fidelity dashboards annotated with main KPIs, interactive maps, all fleet numbers, delivery stats, a drone information table, and drone specific and battery information

Low fidelity overview dashboard annotated with main KPIs, interactive maps, all fleet numbers and delivery stats

Low fidelity fleet management screen annotated with the drone information table and drone specific and battery information

Narrowing it down

NOTES FROM MY WIREFRAMES

“pages of different hubs rather than all?”
“or maybe just one drone at a time?”
“Screens focusing on one big thing: map / individual drone pages when you click on a dot / deliveries over time?”

An early wireframe with every chart and number on one page — First pass: everything on one page

A later wireframe built around a large map, with active drones, deliveries and the drone table — Then: one big thing per screen, starting with the map

Wireframe → screens

Wireframes turned into screens: the deliveries chart and map each became the focus of a page, and individual drone information was added

Rather than having one page with a lot of information, I divided it into 2, using these visualizations as the main focus for each: the deliveries chart and the map, each wireframe beside its finished version

I initially included only overall drone stats, but decided to include the option to look at individual drone information as well: the fleet overview leading to drone health and performance

Final screens

Home Screen

Provides critical metrics at a glance, gives easy access to drone location and other details, and shows drone status distribution clearly.

Drone Screen

Shows specific flight and delivery information, highlights time sensitive details, and shows performance and drone health in a scannable format.

Delivery Screen

Shows delivery and efficiency metrics, compares deliveries completed by each drone, and visualizes demand for deliveries over time.

Design decisions

Home screen

The live map is the center of the home screen. Each drone is a dot: position shows where it is and color shows its battery (green is good, red is low), so problems stand out at a glance. The KPIs (active drones, deliveries in progress, idle drones) sit on bold black tiles with yellow and white text against the light screen, so the critical numbers read first. A stacked bar shows the share of drones delivering, idle or returning to base, and the drone table lists each drone’s number, status, battery and time since maintenance.

Drone screen

Each drone’s page keeps a mini map with just that drone’s flight path. Delivery details (items, flight time, ETA, priority, weight) are set apart with contrast and position for fast reading, battery and maintenance show as progress bars, and four line charts track flights, speed, payload and distance over time.

Delivery screen

The charts match the data: a line chart shows how often deliveries happen across the day, week or month, bar charts compare drones, and line charts show change over time. Hover states reveal exact values, so the screen stays clean and quick to scan.

Interactions

A map dot with its hover label, Drone 1 — Hover a dot on the map to see which drone it is, then click it to open that drone’s page.

The 2 deliveries at risk of delay KPI with its hover list: Drone 10 and Drone 9 with their delivery numbers — Hover a KPI to see the drones or deliveries behind the number.

Today’s Performance details: line charts for flights, average speed, average payload weight and distance traveled — On a drone’s page, “See Details” opens the exact values, and Today / Week switches the performance charts.

Try it out

The interactive prototype: click through the home, drone and delivery screens.

What I would change

I had four weeks for research, design and prototyping, so this dashboard is intentionally simple. It’s more focused on the experience and getting information across than refined visual design. If I came back to it, I would:

Keep working on contrast and color. I think I brought too much color into the interface.
Rework the navigation bar. It isn’t fully clickable yet, and I don’t think it is set up in the ideal way.