Global Traceability Platform

End-to-end traceability for bottles, cartons and pallets for a global key account.

Role

User Interface Designer

Date

2019

Timeline

4 months

Tools

Figma, Adobe CC

The challenge

The clock was ticking for Shell as they had only three months to establish full traceability for lubricants across bottles, cartons, and pallets via oil blending plants in Hong Kong, Germany, and Spain.

I was selected to spearhead the user interface design, collaborating with a user experience designer to map out key journeys and streamline workflow based on essential business movements.

Discovery

Shell produces bottles that are packaged in cartons and stacked on pallets. The objective was to have the ability to track the movement of each bottle, carton, and pallet through scanning. Every step in the process was to be recorded and monitored.

Adhering to industry standards, we had to familiarise ourselves with various logistics movements such as goods issues, returns, re-palletisation, etc. To gain a deeper understanding, we enlisted the help of a subject-matter expert within Shell who educated us on these movements. We took diligent notes and got to work implementing the system.

This A4 became our guiding document.

What we knew

  • We needed traceability on all bottles, cartons and pallets
  • Every standard (there were 6) movement required supporting in the final solution
  • We could only use iPhone 8 for the app, because it fits on the scanner guns we were using already in warehouses
  • We needed some web apps to view traceability (the history of movements) and to help re-print the barcodes for pallets if they were damaged
Only an iPhone 8 could fit in these COGNEX handheld barcode scanners.

Our priority was to get the app live, then improve it based on feedback from users.

Design

Unlike tracking, traceability gives a historical view. Traceability can help Shell find where stock has been or come from to identify inefficiencies, pirated product or missing goods — so long as warehouse teams scan a package at every movement.

We knew we needed a way to access all movements, then prompts to guide the warehouse team member through the appropriate scans. For example for re-pallet: scan the new pallet, then all cartons you want to move.

Version 1.0 for the app and our re-pallet movement.

It was purely functional. We had it coded up in less than a week and in another week we had a working version that used the scanner gun.

Immediately we found issues. When you're scanning with the gun (holding it like a pistol), you aren't able to see the screen comfortably. I needed a better way to visualise the status and where you are in the flows. There can be hundreds of rows of data (if it's a big shipment).

Time for an iteration.

A screenshot of my 'components' and icons as they were at this point.

If you look closely in the image above, you'll see a blue snake-like device. Lovingly, I called this the snake and it was my solution to tracking where you were.

The snake would follow the user down a movement and help them spot at a glance what was happening next or what they'd just done. Also, the big green 'Ready to scan' pop ups are new. These "speak" to the scanner gun and signify when you're ready to scan.

V2.0 with 'the snake' in blue.

With this iteration, I'd changed the home screen to a grid for better tappability because the scanner has a safety screen over the phone and it was a bit hit a miss. Also, there's a keyboard next to 'Ready to scan'. If you are ready but can't scan - maybe a broken barcode? - you can type in the code and it'll register in the app.

Speaking of broken barcodes, it's about time I learn how to set up a Zebra printer and try our app's 'reprint' movement.

Huge success.

I think we're in a good position here.

Usability testing

Arriving in Spain, we headed straight to the warehouse from the airport. I vividly remembering how noisy and bright it was in the warehouse and feeling very far from out air-conditioned office back home.

We were lucky the warehouse team were very eager to work with us - despite us potentially making their roles more cumbersome with the involvement of our app.

Here you can see us testing with their gloves, trying to scan from a forklift and comparing with other internal solutions.

Visiting a factory in Spain to test the app on a scanner gun.

Following this trip, we returned to Spain a second time and made a trip to Hong Kong for testing there, too.

Here's some of team GTP: ux designer, plant manager, product owner, ui designer (that's me) and iOS engineer.

Team GTP enjoying Spain.

Development

I worked closely with an iOS developer to bring the app to life, and we also had 2.5 backend developers working on the project.

We employed an agile development process, using 2-week sprints and running ceremonies asynchronously whenever possible. We also worked after hours in Spain to make up for any lost time.

We maximised the on-site time in both Spain and Hong Kong, leaving around 4 pm most days and returning at 8 am the next with all feedback consumed and implemented in the latest TestFlight build on the scanner guns.

On top of the iOS app, I designed 3 web apps to assist teams local to the warehouses where we rolled out the app:

  1. Traceability lookup (to view where a product has been)
  2. Material planner (to print barcodes)
  3. Local printer (to print barcodes when one already exists but is damaged)

For traceability lookup, registered users can enter any bottle, carton or pallet barcode number and see the related items, where they'd been and when.

The web-app for traceability look up.

Challenges

The speed of the project was one of the biggest challenges, but we could manage the quick timelines by employing "just enough research" and using quick and dirty research methods. It also helps that we were a team that thrived under pressure and enjoyed the deadlines. We were driven by the chance to pull it off in time.

Visiting the warehouses in Spain and Hong Kong was critical for the team. Only when we were on the factory floor, with the noise, heat, safety protocol and lighting, did we understand how to best design the app.

Also, I hadn't factored in that safety gloves were used with the iPhones. We were struggling to fit all information on the small iPhone 8 screen, while enlarging tap target sizes and supplying larger text.

Eventually, I sourced touch-screen gloves online that matched the required safety spec and had them approved, with budget unlocked for their purchase and roll-out globally.

Final screens

Here are some of the final screens. Note how much larger I made the type, and how big tap targets are. I also employ colour very carefully.

The primary screens: home, a movement, and confirmation.
Modality to highlight states of the app, and scanner gun.

Also, with the app I prepared a how to guide PDF in English, Spanish, Cantonese and Mandarin for the warehouse and operational teams to best get started with the app.

Here's how one of the cover pages looks. You can see the scanner gun with iPhone too.

How to document for GTP.

Current results

We were able to meet the January 1 deadline and launch the app, but the project is currently on hold due to agreements between Shell and the global key account. The pause occurred just before COVID-19 struck and its unclear when the project will resume.

But wait, there's more...

Read another case study

Shell MarketHub

$19B e-commerce platform redesign
UI, UX, Design System, B2B

Shell Lubricants

Site assessment tool for field advisors
UI, UX, B2B

Hive Home

Design system for a smart home co
UI, UX, Design System