Global Traceability Platform

Shell faced a three-month deadline to achieve full traceability for their lubricant products across bottles, cartons, and pallets in multiple locations worldwide. As the lead user interface designer, I collaborated with a user experience designer to map out essential business movements and streamline workflows.
2019
Product design
Figma, Adobe CC

‍

Shell had a contractual obligation with a GKA (global key account) to deliver end-to-end (E2E) traceability for lubricants across plants in Hong Kong, Germany, and Spain. With a tight deadline of four months, my role was to lead user interface design, develop a reliable solution, and ensure a smooth implementation.

Scenes from the war room during kick-off.

The challenge

  • Objective: Ensure traceability of lubricants to minimise counterfeits, supply chain inefficiencies, and faulty products, and enable pallet, carton, and bottle-level traceability.
  • Constraints: Limited time, integration with third-party vendors, barcode implementation, and adaptation to various hardware and environments.

Field trips and user research

Conducting field trips to Spain and Hong Kong allowed us to gather valuable insights, understand real-world challenges, and validate our assumptions. Engaging with warehouse supervisors and staff helped us identify gaps and refine our approach.

A comprehensive traceability suite

To create an effective solution, I designed multiple products to cater to various user groups across the business.

  1. Scanner (iOS app): Custom iOS app for iPhone-mounted handheld scanners, used to trace lubricants in plants and warehouses. Integrated with SAP for live data exchange.
  2. Traceability Lookup (web app): Enables users to check the traceability of lubricants throughout the supply chain.
  3. Material Planner (web app): Streamlines planning and management of lubricants.
  4. ‍Local Printing (web app): Manages barcode generation and printing for seamless integration with the traceability platform.
  5. Scan Reports (web app): Provides warehouse supervisors with a dashboard view of their team's performance, highlighting efficiency, trends, and areas for improvement.
The entire iOS app inside Figma.

Challenges

Adapting to the unique user needs of the warehouse environment was crucial for the project's success. We used "just enough research" and quick, iterative design methods to overcome ambiguity and constantly push forward. On-site visits to warehouses in Spain and Hong Kong proved vital to understanding the unique challenges faced by warehouse teams and the environment in which the app would be used.

Usability issues around the small iPhone 8 screen and safety glove requirements needed more thought. By sourcing touch-screen safety gloves and enlarging tap targets and text sizes after feedback from warehouse staff, we'd overcome our most troublesome challenges.

The scanner gun we had to use. iPhone 8 only.
First pass at a simple interface, getting ideas down.

As the lead user interface (digital) designer, I worked closely with service and user experience designers, front and back-end developers, and product team members. We managed relationships with third-party suppliers and vendors to ensure seamless integration of our solutions with mandatory tools and processes.

To keep everyone on the same page, I made sure I was frequently sharing the open links to Figma projects so anyone could come in and see the latest version of the screens—we had special approval from Shell IT to allow vendors access to our Figma workspaces. To go the extra mile, I ran short 10 minutes onboarding calls with anyone unfamiliar with design tools so they could confidently navigate my files inside Figma.

This flow I made in Whimsical became a source of truth for the whole team.

Results

The Global Traceability Platform was successfully launched, meeting the tight deadline and delivering on Shell's contractual obligation with a key account. The platform has since proven effective in minimising counterfeits, supply chain inefficiencies, and faulty products while enabling pallet, carton, and bottle-level traceability. This project showcases my ability to lead UI design, collaborate with multidisciplinary teams, and deliver results under pressure.

Final screens on the iPhone 8.
Alerts, adjusted for warehouse conditions.
Traceability Lookup, to view details about a bottle, carton or pallet.
Troubleshooting — understand why something went wrong.
Access the detailed view and dig into the data.

‍

Ink Design System

Stepping up from an IC, I found the biggest impact I could have on Design Ops and the maturity of the design organisation was by applying my skills in design systems to lift the company’s quality bar

An Award-Winning Design Team

I transformed GoodNotes' design team into an engaged, connected, high-performing remote team of 11 world-class designers from 8 countries across 5 time zones.

Theft Insurance Flow Redesign

During some recent free time, I explored how the rental or hire industry could increase the sign-ups for theft or other insurance during checkout flows. Here's some of my thinking from a couple of hours.