The fleet page of Skydio Cloud is the web dashboard that admins of organizations use to see the status of their vehicles, view their flight history, enable OTA and more. I lead its design evolution over 2 years.
My role was:
-
Designed the entirety of the fleet page - user interactions, information architecture, visual design
-
Created high fidelity prototypes in Figma
-
Drove weekly stakeholder meetings to align engineering and product stakeholders on functional specs given deadlines
-
Created a Skydio Cloud design system
For organizations with multiple locations with drones, I created this split map and list view to easily see the status of drones along with the locations of the drone.
Enterprise drone users can then easily geolocate their drone either by the map or on the list.
Drilling down into a specific drone shows the vehicle drone page. I created the information architecture, creating 3 distinct sections
-
vehicle header - containing high level fleet stats: name, status, battery, CTAs
-
metadata - all the stats
-
flight history - all flight logs
The vehicle page was designed so that engineers can easily add new features to the page with minimal input from design.
When we added over the air software updates, the information architecture of the fleet page easily scaled by adding in another collapse section.
Vehicle State
Since the fleet page captures all the important status of the vehicles, I created a top level decision tree that details the hierarchy of how to prioritize different states.
Flight Review
I designed this interaction where clicking on a flight card, drills you to a specific flight. Users can then toggle between the LRV as well as the flight telemetry in real time as the flight is being played back.
Media Sync
When a user plugs their vehicle into power, physically the vehicle will change LEDs to display an uploading state.
I designed this tooltip interaction so that users will be able to see the status of the upload upon hover.
Design System:
