Designing the core delivery flow

Loggi started out as an on-demand driver pickup service. The classic use case was: you’re at the airport, right about to board. But you’ve just realized you left the passport at home. That’s okay; call a Loggi driver, and they’ll pick up your place’s keys with you, go there, and bring the passport back.

You can obviously tell how challenging of a product this is to pull off, right? So, by 2019, Loggi had already explored multiple routes to pivot the product significantly. E-commerce deliveries were right at the door and definitely signaled a concrete and stable way into the future. So, that year saw Loggi heavily invest in multiple distribution centers and an extensive network of transportation partners across continental Brazil.

Rightfully so, that prompted a major re-org, which made me move from the team to which I had been originally assigned. My focus would now be generalizing the driver experience for this new reality.

From the old to the new

While somewhat already generic, the app up until that point was still mostly tailored to the old product reality. When I joined the team, there already was a rewrite in progress, where folks were ditching React Native and going to a native shell with a PWA approach. This new app version was called Loggi Leve, which resonated with the idea that it’d be a much lighter, simpler version of the whole model.

My contribution was mainly to help design a version of the app generic enough that we’d be able to deploy it to multiple delivery-related contexts, including various types of route anatomy and supported vehicles.

Loggi's legacy Driver App.

Some of the UIs from the legacy app. We migrated from React Native to a PWA powered by Material UI.

Research & development

The team and I really put effort into understanding how the entire last-mile operations existed. Having precise knowledge about all of that would help us immensely understand what the primary flows we’d need to prioritize for the first refreshed version were. We eventually scoped down to potentially the obvious part: onboarding, pick-up, and delivery. These were the bits of the app we had to nail down incredibly well, where everything else would follow.

It’s hard to list how many teams were involved during the research process. We had constant check-ins with operations, CX, commercial folks, and others to ensure we were designing with all of the requirements and constraints in mind. Lots of back and forth, frequent trips to distribution centers, prototypes, and focusing on the details. We also wanted to take this opportunity to take Loggi to a new design quality.

Iteration Figma screen shot

Extreme zoom-out of a portion of the designs.

Wrap up

The design process and research took about 4 months and the rollout alone lasted for 3 months with so many back and forth to get everything out. We couldn’t afford a minute of downtime, really sensible stuff.

It was truly a lesson around working iteratively and making little incremental progress, one at a time until we completed the migration. The pandemic happened in the middle, so that was a huge bummer as we couldn’t be down there on the streets following eye-to-eye with the drivers about how the experience was turning out to be. The numbers did tell a good story, though, and it was super nice to see Loggi going to a new chapter in terms of driver infrastructure.

Designs deep dive

These were the main pieces of UI we delivered. That’s the driver’s cockpit, where they can see all the packages available for delivery in a given route, as well as go into each package’s detail and confirm the delivery. It’s one of those designs that look a bit too simple but are incredibly hard to pull off.

Flecha UI

We tackled long-standing problems that bugged everyone out but no one had just the time to work on them. Of the things we optimized: how drivers reported problems during delivery (which helped a lot with data analytics), how drivers updated the status of a delivery, removing geofencing, and making the product reliable and workable even without connection, and how drivers got help when in emergencies, which was something brand new I'm proud to have contributed for.

Flecha UI

Big text elements, not a lot of fluff, and really straight to the point. We wanted to hone in and be incredibly simple, but still informative and modern.

Flecha UI