Creating functional user flows on Kargoo's product design team.

‍

What I did

When I came into the project, the main screens existed but the flows between them hadn't been fully worked out. The core paths were there, but the states and decision points in between, empty states, error screens, mid-flow exits, validation steps, hadn't been designed. That's where most of my work went.

I designed four flows end to end: Envios (shipping), Encomendas (orders), Transportes (transport), and Armazenamento (storage). For each one, I mapped not just the main path but every branch off it, what the user sees when something goes wrong, when a list is empty, when they need to go back, when a status has changed.

‍

Iterating the Start Screen

The home screen also went through a round of changes based on stakeholder feedback. The original used a hamburger menu and a heavy green palette across the whole interface. I repositioned the profile icon and app logo to sit in line with where users typically expect them on mobile, replaced the hamburger menu with a bottom dock so the main actions were visible without an extra tap, added a Spotlight section at the top after stakeholders wanted promotions more prominent, and pulled back the green so it worked as an accent rather than a base colour. None of these were dramatic changes individually, but together they made the home screen considerably easier to navigate at a glance.

‍

‍

Redesigning Shipping User Flows

The shipping flow required designing multiple list states: empty, populated, and each shipment status (awaiting payment, collected, in transit, finalised). Each needed its own visual treatment so the difference between states was clear to the user at a glance, and unambiguous for the developers building from my screens.

‍

‍

Password and Log-In validation flows

The account and verification flows were where the gap between what existed and what was needed was most obvious. The password recovery screens were there, but the logic around failed or delayed verification codes hadn't been designed at all.

I designed a resend flow that allows the user to request the code up to three times. On the fourth attempt, rather than showing the same screen again, the user is redirected to a support screen where they can confirm their CPF and phone number and request direct assistance. I annotated each step with the condition that triggered it and wrote those annotations directly into the Figma file so the logic was clear to whoever picked it up next.

‍

‍