01
Customer
Request & track
Requests a pickup on demand or subscribes to a company's collection plan, pays through the platform, and follows the pickup to completion.
Case study / Waste management
Designing a smarter way to collect waste.
Collect HUB is a connected waste-collection platform that brings customers, collectors, companies, and administrators into one streamlined digital ecosystem.
One pickup. Four roles. One connected journey.
- Role
- Product Design · Architecture · Full-Stack Development
- Product
- Collect HUB
- Industry
- Waste Management
- Platforms
- iOS & Android (React Native) + Web
- Users
- Customers / Collectors / Companies / Admins
- Scope
- UX StrategyDesign SystemSystem ArchitectureMobile & Web DevelopmentBackend
Engineering & tech stack
One backend, four consistent clients.
01Mobile appsReact Native — customer & collector
02Web panelsNext.js — company & admin
03Backend APINestJS on the Fastify HTTP adapter
04DataPostgreSQL · Prisma ORM
05Auth & messagingAWS Cognito · Twilio
06InfrastructureAWS EC2 · API Gateway
React Native
Next.js
NestJS
PostgreSQL
Prisma
AWS Cognito
Twilio
AWS EC2
API GatewayService-area matching, not a marketplace free-for-all
Companies define a service radius around their location. Requests only reach the companies whose radius actually covers the pickup address — matching happens server-side before a request is ever visible to a company.
Payment gates request creation
A pickup request is only created after the Makuta payment gateway confirms the charge — there's no “pending payment” request state to reconcile later, which keeps the request lifecycle and the transaction ledger inherently in sync.
One backend, four clients
The same NestJS/Fastify API and Prisma/PostgreSQL data layer serves the React Native customer and collector apps and the Next.js company and admin panels — one source of truth for request state across every role.
The problem
One pickup. Multiple people. One complex system.
A customer creates a request. A company, matched by service area, manages the operation. A collector receives and completes the pickup. Behind it, the system has to track payment, status, location, timing, and completion.
The challenge was never a set of individual screens. It was a connected ecosystem where every role knows what needs to happen, what already happened, what happens next — and who owns the next action.
- What needs to happenNext action per role
- What already happenedShared history
- What happens nextPredictable states
- Who owns itClear handoffs
- 01Customercreates
- 02Requestpriced & paid
- 03Companymatched by service area
- 04Collectorassigned & accepts
- 05Pickupin progress
- 06Transactionrecorded
- 07Completionreceipt sent
The ecosystem
One platform. Four perspectives.
02
Collector
View & complete
Goes online, views pickups assigned by their company, navigates to the location, and marks the job done.
03
Company
Manage operations
Defines a service area and radius, receives matched requests, assigns collectors, and manages its own collection plans — without touching admin-level configuration.
04
Admin
Manage the entire system
Approves and oversees companies, sees every request and transaction platform-wide, and manages global content.
UX principle
Give every role only what they need.
The core strategy was role-based simplification. Instead of exposing the whole system to everyone, each experience is structured around one primary responsibility — and all four feed the same pickup lifecycle.
01
Customer
- Request
- → Pay
- → Track
02
Collector
- View
- → Navigate
- → Pickup
- → Complete
03
Company
- Match
- → Assign
- → Monitor
04
Admin
- Approve
- → Configure
- → Monitor
Customer request flow
From request to receipt.
Requesting a pickup should feel effortless. A payment-gated request is broken into small, visible steps — with the price shown before payment.
- 01 — Request
Step-by-step request flow
Pick a standard bin size and quantity, confirm the pickup address, and see the price summary — bin, delivery fee, and total — before moving on.
- 02 — Payment
Pay with what people already use
Phone number plus a mobile-money or bank method, processed through the Makuta payment gateway. One screen, one decision.
- 03 — Confirm
Clear price visibility
Address, price summary, and payment method are restated on one confirmation screen before “Pay now.”
- 04 — Submitted
A quiet moment of confirmation
The request is created only after payment succeeds. The customer can jump straight to tracking or return to their profile.
- 05 — Track
Transparent pickup status
Pending → Accepted → Completed (or Rejected), alongside request details, the assigned collector, and a direct support action.
Pickup tracking
Make the pickup status visible.
The same lifecycle every role sees, rendered for the customer as a simple journey — with the collector and a call action one tap away.
- Pending
- Accepted
- In progress
- Completed / Rejected
- Collector informationName and direct call once assigned
- Request detailsLocation, date, time, weight, waste type
- Direct supportContact support or cancel the request
- Live locationMap view once the collector departs
Collector execution
Built around the next pickup.
Collectors need action, not exploration. Assigned pickups sit on one screen; each opens into a detail view with the map, the customer, and a clear next step.
- AVAILABLE
Toggle online. Assigned pickups for today appear.
- ASSIGNED
Requests are listed with location, time, and weight.
- START
Distance, ETA, customer, and details before starting.
- IN PROGRESS
Navigate to the pickup location on the map.
- COMPLETE
Completed pickups roll into the collector's payments.
Company operations
Turning matched requests into operations.
Companies manage their own operational layer — collectors, requests, transactions, and subscription plans — scoped to the service area they've defined.
Admin control center
One control center for the entire ecosystem.
The admin sees every layer — customers, companies, collectors, requests, and transactions. The same table, filter, and detail patterns repeat, so learning one module means knowing them all.
admin.collecthub
01Start from an empty state with one clear action
Request lifecycle
Keep every transaction connected to the pickup.
- Request
- Match
- Payment
- Pickup
- Transaction
- Receipt
Design system
A system designed to scale across roles.
One green, one ink, warm neutrals, and a small set of components — reused from a 375px phone to a 1440px operations table.
color.brand.primary
#6C9B4F
#6C9B4F
color.brand.strong
#4F7F37
#4F7F37
color.surface.base
#FAFAF6
#FAFAF6
color.surface.subtle
#F4F1DE
#F4F1DE
color.text.primary
#1C1C1A
#1C1C1A
color.text.secondary
#8A8A82
#8A8A82
color.border.default
#E6E4DC
#E6E4DC
Buttons
Status chips
CompletedIn-ProgressSuccessFailed
Inputs
Search by address, name or location…
17 Park Avenue, Block B
Cards
Recyclable WasteIn-Progress
17 Park Avenue, Block BMar 0810:00 AM20 kg
The complete system
One request travels through the entire ecosystem.
COLLECT
HUB
HUB
CUSTOMER
ADMIN
COMPANY
COLLECTOR
- REQUEST
- MATCHING
- ASSIGNMENT
- PICKUP
- PAYMENT
- COMPLETION
Outcome
From fragmented operations to one connected journey.
- Clearer on-demand pickup experience
- Service-radius matching instead of manual dispatch
- Role-based apps and panels, each scoped to one job
- Payment-gated request lifecycle
- Centralized company & collector oversight
- One backend, four consistent clients
One pickup connects an entire ecosystem.
Collect HUB brings the customer, collector, company, and administrator into one connected operational experience — making waste collection easier to request, manage, track, and complete.
Ready to connect your own ecosystem of users?
Multiple roles, one backend, real-time state across mobile and web — we've delivered systems like this end to end.
Start a conversation →