Airbox

Automated Drones Delivery & Inventory Management System. providing the infrastructure and delivery drones to retailers.

Overview

Airbox is the future. It is a company that, on the one hand, provides delivery services via Drones. On the other hand, provides an inventory and sales management system.

Project Goal

Allowing users to investigate failed deliveries, explore all aspects of failure and act accordingly.

Biggest Challenge

Dealing with a complex scenario in which the user must react to a failed delivery of a product that is now out of stock.

what i did

UX Research & strategy Wireframing
UI Design
Mobile solution

Role

Product Designer
in this personal project.

The Problem

Drones are very challenging to handle. They need to be regulated and there are many dangers that occur during a drone’s flight: bad weather, technical problems, or even accidents are just a small list of the challenges encountered. But how will users know if something goes wrong, and will they have an explanation? How can the system reflect that for its users? This is exactly what I came to solve.

Research & Discovery

First, in order to better understand how to show a failed delivery, I researched the best practices of systems that do it well. I took some inspirations from those following systems.

Anomaly Detection

Google Analytics

Analytics provide insights for various metrics to keep track of the delivery on their site. There's a really good visualization of anomalies, and various trends that can be potential threats that need to be addressed.

Root Cause

Microsoft Azure

Azure provides incident reports and root cause analyses. It helps users to stay informed and take action when issues like incidents and planned maintenance affect the delivery.

Managing Alerts

Anodot

Anodot optimizes the mandatory alert trigger settings from defined data streams. They allow users to manage alerts logic and to get alerts when the anomaly spikes.

Approach

Making sure users can investigate the reasoning of the failure as well as recover it properly by making the right actions.

keep scrolling to view flow's breakdown

Ideation

One of my most consistent UX methods is data categorization. I made a list of all the information in the Investigation screen and divided the information to categories. I set the data priority (high, med & low) to help myself later on when I am wireframing.

High
Medium
Low
Event info
Event Name
Product Photo
Notification Time
Event Description
Delivery Status
Severity
Timeline
Description Of Delivery From Beginning Till Present Time
Relaxing Info About Dronefly Taking Care Of The Matter
Relaxing Info About Customer Notification
Delivery info
Product Info
Tracking Number
Destination Address
Scroll Between Notifications
Call to action
Ability To Create Fast Order
Flow
Scroll Between Notifications
High
Medium
Low

Exploring
Solutions

There are several ways to give this screen a proper solution. It can be solved with a full screen or expand and collapse on a list of alerts.
I went for sliding lightbox which is  multi-functional element. Eventually, the solution depends on more parameters such as consistency etc.

Full screen
Collapse & expand
Sliding lightbox

Wireframing
Evolution

As I progressed with my wireframes, it made clear that the main component in the investigate screen is going to be the timeline. It tells the story the best way.

Version 1

Gave too much unessential particulars on the order info page and too limited of a timeline component

Version 2

Was trying to show the user how the systemgot to this suggestion. At the end, system needs to havefrictionless effort and there is too much info shown here.

Version 3

Got rid of all the unimportant details. Keeping it clean with the most relevant info about the event, balanced reasoning and clear CTA.

Solution
Breakdown

From list to a polished UI design. This is the final result of the investigation screen after carefully making sure that all the most necessary information is in there.

Mini dashboard.
explains the event at a glimpse

The timeline is the star in this feature. allowing full understanding of event

The timeline is the star in this feature. allowing full understanding of event

Navigation between different alerts.

System letting the user know about anomaly detection that this event is only part of it.

Suggestion to set new rule that avoid this situation - automated new orders (when stock is low).

Suggestion to set new rule that avoid this situation - automated new orders (when stock is low).

Mobile
UI Design

The system is designed for desktop first but there are still a variety of actions that users can do from the Airbox mobile app.

Takeaways