Fleet App from Postmates

The heart of Postmates lies with the couriers. The Fleet app historically hadn’t received a lot of design love. I worked with one other designer on redesigning the Fleet app to improve the experience and incorporate supporting optimizations in delivery to scale the business faster.

DEFINING SUCCESS

It’s often difficult to quantify the success of a redesign in the short-term. Our criteria for success was percent of jobs accepted by couriers holding consistent to historical data. Percent of jobs accepted increased 😊

MY ROLE

product strategy, interaction design, research, prototyping (Origami)

PLATFORMS

iOS and Android

Introduction

There were two primary objectives of the Fleet redesign: 1. support delivery optimizations, such as batching orders, to scale and support faster delivery of orders 2. and improve the user experience for couriers to eliminate confusion on what to do next. The project was the largest tackled by the Fleet Team. Designing on Team Fleet meant living in a world of edge cases. The problems were intellectually difficult but incredibly rewarding. I owned design on the Android platform (majority of the couriers use Android) and on a few key features that were cross-platform. 

Exploring Offers

I owned the most important feature in the Fleet app: the Offer Experience. This is where couriers receive an offer for a delivery. Designing this was tricky because we want to optimize for accepting customer requests for delivery, but provide enough key pieces of information to make a decision without introducing bias in the system. The experience needed to work for couriers that were walking, on a scooter or bike, or in an automobile. 

Here’s a small sample of rough explorations I did on this feature:

I determined the above explorations wouldn’t work because Accept and Skip/Decline are too close (problematic for scooter, bike, and car couriers), information hierarchy didn’t feel right given what I knew from interviewing couriers, and the experience felt too much like every other experience in the app. It needed to feel special since wanted couriers to notice it and accept offers for deliveries.

Explorations above were getting closer but it still didn’t feel right. Map on map felt odd when I prototyped the interaction to get a feel for it. Timer in button wouldn’t work since the timer starts the moment the offer hits the servers, not the moment it reaches the client. And the modal experience didn’t emphasize the importane of the Offer Experience enough.

The Final Offer Experience

After the numerous explorations, I settled on a solution that had the right hierarchy, worked within the technical constraints, and accounted for all of our courier types’ needs and balanced it with our business goals. Here are a few select screens and states from the offer experience:

OfferCard.gif

Offers Prototype

I used my work from Offers on iOS when building this prototype but the motion was designed for both iOS and Android using Origami. The location pin drops while the crow's path line dots its path to the Offer's pickup pin. The offer card replaces the existing card. Offers is intentionally blue to make it abundantly clear it's an offer and to differentiate it from the rest of the app. More prototypes for this project can be viewed at the end of this case study.

The Redesign

In addition to owning the cross-platform design of the Offer Experience, I also owned the Offline screen, and worked on the worksheet for both iOS and Android. Below are a few select screens and states of the redesign on Android. 

Interactions: A Story Told Through Motion

I love prototyping. I love seeing the experiences I’ve crafted come to life. Someone once said that prototyping is like the conversation you have with your ideas. Motion and subtle animations in interactions are powerful in communicating with users without adding clutter. It's a way to get a feel for the experience in the shoes of the user.

Some of the motion I defined were implemented and some were crazy explorations that I did for fun when I had some bandwidth. Below are a select few prototypes that I built in Origami for this project:

Offline Prototype

I explored a few interactions to go from the Offline state to the Online state. The motion design of this final deliverable met user needs of viewing map hot spots prior to going online while making the Newsroom cards easily accessible. This motion addressed business needs of having couriers access viewing blitz areas on the map easily in the Offline state and creating an experience that doesn't distract users from going online. 

Marking Unavailable

This is a prototype of an exploration of a user interaction when marking an item as "Unavailable." The motion is perhaps a bit too crazy, but it was fun creating an array to get the letters to go from lowercase to uppercase. The analogous inspiration were old-time time charts at a train station.

pickedup.gif

Order Pickups

The final motion deliverable for marking a pickup turns the button into the green checkmark indicating that the order has been picked up. If a user needs to undo a marking, tapping on the table view cell would expand the card and undo the interaction.