Onfido Design Exercise
April 2019, Time Spent ~12h
Checkout the full Figma file here
Imagine a desktop app that enables security guards at the airport to review X-ray images and catch suspicious items in luggage. Consider the following suspicious objects: guns, liquid, scissors and large amounts of money,
Design a desktop app that enables security guards at the airport to review X-ray images and catch suspicious items in luggage.
examine luggage content
stop/resume conveyor belt
look out for suspicious items
hold suspected luggage for a security check
release all other luggage back to passenger
Uphold airport and flight security.
Identify and report any dangerous/illegal items in passengers’ luggage.
x-ray scan image not clear enough
small items that can be easily mistaken in a large piece of luggage
luggage trays are sometimes very messy
x-rays make mistakes
tiring on the eyes
to easily identify and inspect suspicious items
to have accessible controls of the interface
to have enough information about the content of the luggage and the passenger to make a decision.
Although John is the one using the app, his experience and actions directly affect passengers and the guards responsible for security scans.
This means finding balance where a simple & easy experience for John does not compromise everyone else involved.
After getting the luggage into the scanner,
I want to be able to clearly see it’s content
So I can decide whether to release or hold it for security check.
While examining the content
I want to have access to multiple controls
So I can examine the content in detail.
If I find an object that is a potential threat
I want to know whose bag it is
And put it on hold for a security check.
Findings & Observations
items are coloured differently, based on if they are: organic(usually orange), inorganic(blue) or metal.
the denser the object, the more opaque it appears on the scan
3D renders lower quality image
the UI is usually very cluttered - too many bars everywhere, no clear hierarchy, outdated style
popular UI components:
conveyor controls, release/hold buttons, scan display (2D/3D), image controls (zoom, pan, invert, select material etc.), bag ID, guard name, date/time
some of the UI has a lot of functionalities I don’t understand and have no explanation online -> do we need them for a MVP?
X-Ray Luggage Scanner = Hand Luggage Scanner
This is not the first time John is using this app
The app is already running when John starts his shift
An extended list of predefined dangerous objects is part of the recognition database.
The computer running the app has a specialised keyboard + trackpad to make interactions easier .
There are luggage trays with compartments for liquids, electronic & other luggage.
Based on the discussed goals and needs, the app should be:
Reliable: displays accurate data and information
Usable:timely and straightforward. E.g. helps the user get from A to B efficiently
In order for John to focus on his goal, the following trade offs were made:
John does not need to clear/suspect individual objects.
case 1: the bag contains 1 high danger item (i.e. gun) and 1 undefined item, which is not a threat. Even if John clears the undefined item, the bag will still be marked for a security check.
case 2: all objects marked as potential threats are a false alarm. He can clear the bag all together.
case 3: no suspicious items at all means John just clears the bag itself.
In order for this project to allow for the focus on the achievement of one particular goal, the following constraints were introduced:
the app does not support an image management flow, meaning John cannot save an image, which has a dangerous object detected or browse previous scans.
The app does not support changing X-Ray view from top to side.
The app does not support 360° rotation.
A new tray enters the scanner
John is looking at the screen, in case of something suspicious.
If he sees something or the alarm sets off, he stops the conveyor belt.
He uses different controls (pan, zoom, inverse etc.) to take a better look at the items.
John also looks at the list of danger/suspicious items provided to double check whether his judgement is correct.
If he decides it is a false alarm, he can clear the bag.
If not, he can pass it on to security check.
Initial UI Explorations: Standalone app
The first few wireframes explored the layout in general - columns, control grouping, sizing and positioning.
Initial UI Explorations: App with Special Keyboard
I decided to try and think of a broader solution by exploring options for a control deck/keyboard to go with the app and make the main screen less cluttered.
Potential Problem: Separating controls & decision buttons from main image requires attention on the screen & on the keyboard, so maybe it’s more prone to mistakes? -> leave some controls only accessible on screen?
Using the traditional bento box as an inspiration for a compartmentalized luggage tray with labels to make the scanning process easier & quicker for both sides.
show a panel for alarm & suspicious items, which correspond with a visual outline on the scan.
option to hide each on the image scan - helps with clarity in the case of too many objects
Using a predefined library of dangerous objects to help identify objects better
Using red as a high danger, orange as medium/prohibited item and yellow as suspicious/undefined colour to outline and label different types of threats and alarms.
image processing controls on the left: everything that John might need to do the the image to reach the decision is on the left panel
the decision making happens on the right: check bag id, list of potential threats & make final call
conveyor controls bottom center for easy access as the belt moves.
meta info on top
Grouping controls with similar ones to achieve better hierarchy and increase usability.
the app has an option to use a custom keyboard in conjunction with the interface.
all buttons from the left panel + conveyor controls translate
zoom and pan are now controlled from a trackpad
main buttons stay on app to keep John’s attention and focus.
Custom Keyboard (Nice to Have)
Using a custom keyboard to handle image processing functionality & simplify the interface