Keenan Pereira Portfolio

Intoglo is a digital freight forwarding and cross-border logistics platform offering shipping solutions for exporters moving goods from India to the USA.

Project type: Professional Work
Team: Sudharshan (PM), Bharani (CTO), Lugman & Saradhi (SWE), Me
Role: UX Designer
Duration: 3 months: Sep 24 - Dec 24

As a sole designer, I led the design of the entire desktop experience for a shipment monitoring tool and improved how shipment status information was communicated to users, resulting in a 37% drop in customer support inquiries and complaints related to shipment tracking

Project Type

Professional Work

Role

UX Designer

Duration

3 Months

3 Months: Sep 24-Dec 24

Team

Sudharshan (PM), Bharani (CTO), Lugman & Saradhi (SWE), Me

Final Solution

THE PROBLEM

An increasing number of shipments per client made tracking and managing them increasingly difficult

This led to users missing important milestones during the shipment journey and experiencing friction when trying to understand shipment statuses on the existing mobile interface. To address this, I worked with stakeholders to break down the problem and define clear requirements that would allow users to quickly assess shipment statuses, track time to delivery, organize different shipments more efficiently, and take appropriate action when issues occur.

Intoglo's rapid growth and increasing shipments per client made it challenging to manage and track the statuses of all the shipments and their details on the existing mobile interface.

As a sole UX Designer, I was tasked with creating the desktop experience from scratch, incorporating new features to improve visibility across the supply chain, from shipment creation to delivery, and delivering a design that achieved the following:

Intoglo's rapid growth and increasing shipments per client made it challenging to manage and track the statuses of all the shipments and their details on the existing mobile interface.

Breaking down the problem statement into core components and defining the corresponding requirements.

UNDERSTANDING SHIPMENT TRACKING

Vizion API to ensure users receive consistent and standardized updates, regardless of the carrier handling their shipment

Improving visibility in the UX first required understanding the frameworks behind how shipment status information is delivered to users.

Intoglo uses Vizion API for container tracking that provides tracking data in the form of milestones.Vizion consolidates 90,000 milestones into a unified format, ensuring that end users receive consistent and standardized milestones regardless of the carriers handling their shipments.

High-level diagram showing how Intoglo receives shipment status updates through Vizion

CONCEPTS 1&2

The most straightforward solution might not always be the best

A straightforward and practical solution was to identify key milestones found in s shipment's journey and map them to the shipment cards on the All Shipments page (image below), which led to Concepts 1 and 2. However, evaluating these concepts against user goals revealed some drawbacks.

Intoglo's rapid growth and increasing shipments per client made it challenging to manage and track the statuses of all the shipments and their details on the existing mobile interface.

Mapping a shipment’s key milestone to its corresponding card on the All Shipments page.

CONCEPTS 1&2: ANALYSIS

The overemphasis on route, need for a layout that accommodates more shipments and enables easier scanning of specific attributes when filtering led us to explore alternatives

Concept 1

Concept 2

CONCEPT 3

Let's keep it simple... or at least try to

In order to address the previously identified issues, I proposed an alternative. This time, based on the existing knowledge of users and their familiarity with Excel, which resulted in a data table that mirrors this experience.

As a starting point, this concept was highly valued by the PM and the CTO for its simplicity, capacity to display more shipments and the convenience it offered in filtering and sorting based on individual needs.

Concept 3

What initially seemed like a straightforward solution proved to be more complex than anticipated. Some carriers provided more milestones than others, making milestones a misleading indicator of progress on the 'All Shipments' page

Milestones as a misleading indicator of progress

A more clear depiction of the time left until final delivery

To address this, we decided to use the final estimated delivery date as the endpoint for the progress bar, with the current date representing the point on the bar. While this wasn’t a flawless solution, since shipment durations varied, these variations weren’t significant, as all shipments were from India to the USA, with the difference between the longest and shortest delivery times being just a couple of days. Therefore, this method provided a more accurate representation of the remaining time until arrival compared to our previous approach.

From a milestone-based progress indicator to a pickup and delivery date-based indicator

Shipment Details

At the same time we began defining how the shipment detail page for a particular shipment would look like, but early on, it was made clear that we were running out of time and needed a quick solution without overthinking the options.

Option A created by the Product Manager

Option B created by me

A Desktop Pane designed to fit the mobile screen will save us a lot of time and effort, while ensuring a consistent UX across different platforms

Why not use my version: a side pane, but design it in a way that it could also function as a full-screen pane on mobile? This approach would not only maintain a consistent user experience for shipment details across devices but also streamline development by reusing the same design for both desktop and mobile interfaces.

Initial concept revised to be reusable on mobile

And thats a wrap... or maybe not

Ultimately, this approach allowed us to hand over the work to engineering ahead of schedule. We then finalized the interactions, variants, and were prepared for the dev handoff. Below are the screens I produced.

The solution arrived at (for now)
Left to right: All Shipments page, Shipment Plan, Documents, Shipment Details

A NEW PROBLEM SURFACED

Due to logistical complexities, additional coordination with trucking companies, and ongoing refinements in final destination delivery date predictions, estimates were often inaccurate, leading to client frustration and claims of Intoglo's lack of accountability

Until now, when a user booked a shipment, Intoglo would estimate the final delivery date to the last-mile location using a specific logic. However, the confirmation of pick-up by trucking companies and final delivery was typically decided much later, once the vessel's arrival at the destination port was imminent or confirmed.

THE SOLUTION

Replacing unreliable final delivery dates with accurate, carrier-provided intermediary milestones until a reliable final estimate was available made a significant impact, leading to a 37% reduction in customer support inquiries and complaints related to shipment tracking

This also validated our hypothesis that the problem was primarily an expectation management issue. Users weren’t making major business decisions based on the initial final delivery date; they were mainly frustrated that we provided a date that the shipment consistently failed to meet.

Final Design changes to the All shipments and Shipment Detail pages

User Research 1

User Research 2

Design Opportunity

Ideation

Wireframing

Looking to chat?

Get in touch with me on keenan11@uw.edu

As a sole designer, I led the design of the entire desktop experience for a shipment monitoring tool and improved how shipment status information was communicated to users, resulting in a 37% drop in customer support inquiries and complaints related to shipment tracking