Merrie's Portfolio

Onfido Design Exercise

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,



Primary Goal

Design a desktop app that enables security guards at the airport to review X-ray images and catch suspicious items in luggage.


User Talks

  • 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

User Goals

  • Uphold airport and flight security.

  • Identify and report any dangerous/illegal items in passengers’ luggage.


Pain Points

  • 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.

User Story

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.

App Requirements

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


Trade Offs

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.  


App Flow

  1. A new tray enters the scanner

  2. John is looking at the screen, in case of something suspicious.

  3. If he sees something or the alarm sets off, he stops the conveyor belt.

  4. He uses different controls (pan, zoom, inverse etc.) to take a better look at the items.

  5. John also looks at the list of danger/suspicious items provided to double check whether his judgement is correct.

  6. If he decides it is a false alarm, he can clear the bag.

  7. 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?


Low-Fi Wireframes


Product Solutions

Screenshot 2019-05-04 at 00.55.54.png

Luggage Tray

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

Colour System

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

Interface Controls

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


High Fidelity Mockups

Prototype (3).gif