Case study · Peer-to-peer courier marketplace - mobile app UX/UI design
Your parcel, on someone's trip.
We designed a mobile app where people send parcels with travellers already heading the same way. Travellers bid to carry them, and senders and recipients track every step. We took it from role mapping and wireframes to a complete design system and dev-ready screens.
PRODUCT RENAMED "CARRYGO" FOR THIS CASE STUDY · CLIENT UNDER NDA
{01} - THE CHALLENGE
Spare space, zero trust.
The idea was simple: match people sending parcels with people already travelling. The hard part was making a stranger-to-stranger handover feel as safe and predictable as a courier company, in an app three different kinds of user would share.
01Couriers are slow and costly between citiesSending a small parcel to another city meant fixed courier rates and long waits, even though thousands of people make that same trip every day with space to spare.
02Strangers have to trust each otherA sender hands a parcel to someone they have never met. Without ratings, conversation and clear accountability, nobody would use it.
03Three roles, one appThe same person can be a sender today and a traveller tomorrow, and a recipient needs to follow along too. Each role has its own home, orders and actions.
04The messy edge casesCancellations, reschedules, returns, disputes and hand-offs between travellers ("extended arm") all had to work without making the happy path heavy.
{02} - OUR ROLE
From a blank page to every state.
We owned the product design end to end: shaping how the marketplace works, wireframing every flow with the founders, and delivering a full visual design and component system for development.
- 01Product discovery & role mapping
- 02Order lifecycle & bidding model
- 03Information architecture
- 04Low-fidelity wireframes
- 05Visual design (iOS & Android)
- 06Design system & components
- 07Interactive prototype
- 08Developer handoff & specs
{03} - PROCESS
ROLES → LIFECYCLE → WIREFRAMES → SYSTEM → UI
What we looked into, and why.
01Map the three rolesListed what the sender, traveller and recipient each need to see and do, and where their journeys touch: posting, bidding, pickup, delivery, payment.WHYOne shared order record had to make sense from three points of view.
02Model the order lifecycleDefined every state an order moves through (new, bid received, approved, picked up, in transit, delivered) plus cancel, return, reschedule and dispute branches.WHYStates drive every badge, button and notification, so they had to be settled before any screen.
03Wireframe every flowBuilt low-fidelity flows for onboarding, account setup, sending single and multiple packages, bidding, tracking, chat, carrier sign-up and admin approval, with the edge cases alongside.WHYCheap to change. The client reviewed real flows, not ideas, and we cut or merged screens before any visual work.
04Review and simplifyWalked the client through the wireframes and folded their feedback in: a home with notifications, dispute and refund flows, the extended-arm hand-off and return requests.WHYLate-stage changes were absorbed in grey boxes rather than in polished UI.
05Design the system, then the screensSet colour, type (Plus Jakarta Sans), inputs, buttons, status chips and icons first, then applied them across 80+ high-fidelity screens.WHYOne component set kept three roles and dozens of states consistent.
WIREFRAMES → VISUAL DESIGN
Flows first, pixels second.
Every journey was agreed in low fidelity before any colour went in, including the carrier sign-up: vehicle, licence, bank details, contract and admin approval.
HomeA single "send" prompt became two role cards with live counters.
Pickup detailsThe stepper gained icons, and date and time got pickers.
Traveller ordersBids, On progress and Complete tabs, with an empty state that prompts the first bid.
SENDER · SEND A PACKAGE
Four short steps, one clear summary.
Address → Package → Estimate → Review. The pickup can come from your current location or a map pin.
{04} - DECISIONS & TRADE-OFFS
What we changed, and what it cost.
DECISION 01One app, two modesThe home shows a Sender card and a Traveller card side by side, each with live counters (on going, for bidding, returns / approved, new orders).TRADE-OFFA busier home screen. Clear cards and counters keep it scannable, and anyone can become a carrier from the same place.
DECISION 02Let travellers bidInstead of a fixed price, travellers see the package and bid an amount and delivery time. Senders compare bids with ratings and pick one.TRADE-OFFSenders wait for offers. An estimated delivery time, a bid counter ("+4") and notifications make the wait visible.
DECISION 03A four-step send flowAddress → Package → Estimate → Review, with a stepper, current-location and map pin pickup, and a summary card that carries forward.TRADE-OFFMore taps than one long form, but each step is short and errors are caught where they happen.
DECISION 04Describe the package properlyCategory chips, weight and size with unit toggles, volumetric weight, declared value and photos, so travellers can bid accurately.TRADE-OFFA longer step. A size reference guide and sensible defaults keep it quick.
DECISION 05One colour per order stateBid received, On progress, Completed, Dispute and Returned each have a pastel chip used the same way everywhere.TRADE-OFFFive extra colours to manage, defined once as tokens.
DECISION 06Trust built into every stepRatings next to every bidder, in-app chat, cancellation with a reason, carrier verification (vehicle, licence, bank details, contract) and admin approval.TRADE-OFFCarrier sign-up takes longer, which is the point: senders need to know who is carrying their parcel.
TRAVELLER BIDS · SENDER CHOOSES
A fair price, set by the trip.
Travellers see the full package before they bid. Senders compare offers by price and rating, then pay once with tax shown up front.
ORDERS · TRACKING · SUPPORT
Always know where it is.
Colour-coded order states, a live package view, cancellation with a reason, chat between sender, traveller and recipient, and a rating at the end.
DESIGN SYSTEM · STYLE GUIDE
Friendly enough for strangers to trust.
One small, strict system: a colour palette, a type scale, form inputs, buttons, status chips and a 250+ icon set. It was shared by all three roles and every state.
COLOURFresh green says "go" on every primary action. Deep navy carries the brand and secondary buttons. Pastels are kept for status chips only.
Green · primary#0BCB76
Navy · Blue-01#15104D
Indigo · Blue-04#382ACC
Ink · Blue#101828
Error · Red#B22323
Grey-200#344054
Grey-100#667085
Grey-20#D0D5DD
Grey-10#EAECF0
White#FFFFFF
Pastel red#FADCD9
Yellow#FAF6CF
Pistachio#C7EBD1
Aqua#C9E7F5
Purple#EADCFC
TYPOGRAPHY · PLUS JAKARTA SANSFriendly, round and very legible on small screens, from big titles down to 12px chips. Four weights: Regular, Medium, SemiBold and Bold.
Send packageDisplay md / Bold
36/44 · 700
36/44 · 700
Bid StatusDisplay xs / SemiBold
24/32 · 600
24/32 · 600
Pick up or send anythingText xl / SemiBold
20/30 · 600
20/30 · 600
Estimated delivery in 3 hrsText md / Medium
16/24 · 500
16/24 · 500
123 Riyadh Street, Al Olaya DistrictText sm / Regular
14/20 · 400
14/20 · 400
BID RECEIVED · +4Text xs / Medium
12/18 · 500
12/18 · 500
ORDER STATUS CHIPS
Bid ReceivedOn ProgressIn TransitCompletedDisputeReturned+4
BUTTONS & CONTROLS
INPUTS
{05} - OUTCOME
[STATUS: IN DEVELOPMENT / LIVE]
A marketplace, ready to build.
80+screens designed across 3 roles
12flows wireframed & approved
10 wksfrom wireframes to dev-ready UI
1component library handed to developers