Skip to content

Get in touch

Send me a message, or book a time to talk.

tengariya@gmail.com

Warp Tracking

A tracking page that tells you in one sentence where your shipment is

The Warp tracking page on a desktop in its dark theme: a route map filling the left side with a start point and a green dot for the driver, and a card on the right for a shipment from Cascade Goods. The card says In transit, On the way to Hialeah, FL, then the arrival day, three figures for picked up, arriving and distance, a progress line from Orlando to Hialeah, and an arrival alerts row set to Off.
The tracking page for a sample shipment. The map is a stand-in in this prototype.
The top of the tracking card for the sample shipment: Cascade Goods and the number P-57127-2619, an In transit label, On the way to Hialeah, FL, and the arrival day.
Detail. The top of the card.
The same page on a phone: the map across the top, then the card with On the way to Hialeah, FL, the three figures, and the line from Orlando to Hialeah.
Detail. The page on a phone.

The page a customer opens from a delivery email to see where their shipment is. I redesigned it so the first thing you read is one sentence saying where it is.

Role
Product design. I did the research, the screens and the movement, and I was the only designer on it.
Team
Troy Lester, Warp's co-founder and CRO, set the scope: the front end and the design. Rahul, on Warp's engineering team, owns the page and its map.
Outcome
A redesign with a working prototype, handed to Warp's engineers.

Where the shipment is

At Warp, when a shipment was booked, the person waiting on it got a tracking link. It could be the shipper or the shipper’s customer. Often it was the only part of Warp they saw.

In freight, people want to see where their shipment is and how it’s moving. Whoever opened that link should be able to tell right away.

The old page didn’t do that well. It was dressed like a terminal, and it wasn’t clear.

It was one of the smaller products I designed at Warp, alongside the Shopify app. A simple tracking page, but with a lot of little details in it.

The old page and the new one

The old tracking page: a green monospace banner reading Your order has been delivered, then How was your experience, with five tiles numbered 1 to 5, and under it the word Status and Order created.
The old page, on a cancelled order.
The new tracking card for a cancelled order: Cascade Goods and the number P-57127-2619, a red Cancelled label, the headline Order cancelled, the line Reach out to support for next steps, and a line from Orlando to Hialeah with no progress on it.
The new page, on the same kind of order.

This is the same kind of order on both pages, one that was cancelled.

The old page was green type on black, in a terminal style. On this order it said "Your order has been delivered" and asked how your experience was, with a 1 to 5 rating under it.

The new page says the order was cancelled and tells you to reach out to support. It doesn’t ask for a rating, because nothing was delivered. The rating only shows on a delivered order.

One sentence

I wanted the page to say where a shipment is in one sentence. The moment you land on it, that line is the first thing you read. For a shipment on its way it says "On the way to Hialeah, FL", and once it’s there it says "Delivered to Hialeah, FL".

There’s one for every point in a shipment’s life, from a pickup that hasn’t happened yet to a return, a cancellation, or a delivery where some items were disposed of.

Warp’s own status label said In Transit even on a shipment that had come back or a pickup that failed. So the page doesn’t use it. It looks at what actually happened and writes the sentence from that.

  1. A card top with a grey Order created label and the sentence Pickup scheduled in Orlando, FL.
    Pickup scheduled.
  2. A yellow At pickup label and Picking up in Orlando, FL.
    Picking up.
  3. A green In transit label with a live ring beside it and On the way to Hialeah, FL.
    On the way.
  4. A yellow At destination label and Arriving in Hialeah, FL now.
    Arriving.
  5. A green Delivered label and Delivered to Hialeah, FL.
    Delivered.

When it doesn’t go well

The page also has states for a pickup that failed, a shipment on its way back or already back, a cancelled order, and a delivery where some items were disposed of.

They use the same layout as the others, with the sentence at the top.

On a cancelled order, a failed pickup or a return, there’s a button to call support. On a cancelled order or a failed pickup there’s no row of figures, because there’s nothing to put in it.

  • A card top with a red Pickup failed label and the sentence Pickup failed in Orlando, FL.
    Pickup failed. The pickup didn’t happen.
  • A yellow Returning label with a live ring and Returning to Orlando, FL.
    Returning. On its way back.
  • A red Cancelled label and Order cancelled.
    Cancelled. Nothing was delivered.
  • A yellow Disposed label and Delivered to Hialeah, FL, Some items disposed.
    Disposed. Delivered, with some items disposed of.

Reading the card

The tracking card for the sample shipment: Cascade Goods and the number P-57127-2619, an In transit label, On the way to Hialeah, FL, Wednesday 5/13/26 in 9 hours, picked up May 12 at 8:32 PM, arriving in 9 hours, 26 miles, a line from Orlando to Hialeah with the driver partway along, and an arrival alerts row set to Off.
The card, top to bottom.
  1. Header
  2. Status and sentence
  3. Figures
  4. Journey line

  1. At the top of the card are the shipper’s name, the tracking number and a button that copies the tracking link. Under that is the status with the sentence below it, and the arrival day and time under that.

  2. Under the sentence you get when it’s arriving, how far it has to go, and everything that’s happened so far, with the list already open.

  3. The map in this prototype is a stand-in. Warp’s engineers already had their own map.

The alerts row took three tries

The page lets you ask for arrival alerts by text or email. The control for that took me three tries.

  1. One, a toggle that opened a window.

    First it was a toggle. It didn’t switch anything on. It opened a set-up window. The toggle said one thing and did another.

  2. Two, a toggle with nothing behind it.

    Then I made it switch on for real. There was no email or number behind it yet, though, so it said on with nothing to send to.

  3. Three, the version that stayed.

    The version that stayed has no toggle. Before anything is set up it says Off, with a link to set up alerts. Once you’ve told it where to send them, it says alerts are on and shows where they’re going.

    The alerts row before set-up: a bell, Get arrival alerts, and Off with a green link, Set up alerts.
    The alerts row after saving: a bell, Arrival alerts on, Email to admin@cascadegoods.com, with Customize and Disable.
    The row before and after you save.
    The Customize arrival alerts window: a Type menu and a Recipient field reading Phone or email, nine checkboxes under Receive notifications for, two ticked (Shipment picked up successfully, Shipment delivered successfully), and Cancel and Save alerts buttons.
    The set-up window.

The small movements

If I had to point at one thing on this page, it’s the small movements.

  1. Copy the link and the icon turns into a tick for a moment.

    The copy button’s icon turning into a tick, then back.
    Copying the link.

  2. The list of updates opens and closes smoothly, without a jump.

    The list of updates closing, then opening again.
    The update list.

  3. Press Track with nothing typed in and the field gives a little shake.

    The tracking field shaking and turning red after Track is pressed with nothing typed.
    Pressing Track with nothing typed.

  4. Buttons dip slightly when you press them.

    The Track button dipping slightly while it is pressed, then coming back.
    A button press.

  5. The green line from where the shipment started to where it is now fills in at a steady speed. A longer trip takes a little longer.

    The green line filling in from Orlando to the driver’s position.
    The line filling in.

  6. The pulsing ring on the status dot and the driver only shows while a shipment is moving. Once it’s delivered or cancelled, the dot stays still.

    An In transit label with a ring swelling around its dot, beside a Delivered label whose dot stays still.
    The ring only while it moves.

Handing it over

I designed the page and made a working prototype of it, and handed that to Warp’s engineers.

All work