Product Scope
Nuvdel is a mobile application for B2B and B2C last-mile delivery, built around a single principle: a delivery executive should never need training to use it.
The ticket model
Every pick-up and delivery is a discrete, colour-coded "ticket." Status is read through colour before it's read through text green for completed, amber for pending, red for cancelled, blue for active/next so an executive can triage their day at a glance instead of reading through a list.
Consistent status language
That colour system isn't confined to the task list it carries through the dashboard, task detail screens, and the route map. At any moment, an executive knows two things without hunting for them: how many tasks remain, and how far they have to travel to close them out. Routes are pre-planned and rendered on the map using the same semantics as the tickets completed legs solid, remaining legs dashed so the map reads as an extension of the task list, not a separate mental model.
One scan action, not three
Rather than separate search, camera, and scan buttons competing for space in the taskbar, the app centres on a single floating scan action reachable from anywhere. It opens straight into a barcode/QR scanner that matches a package to its order and routes the executive to the right next step. Photo capture for proof-of-pickup and proof-of-delivery lives contextually inside that task's own flow the camera only appears when there's actually something to photograph, rather than sitting permanently in the taskbar as a third, mostly-idle icon.
No training required
Every screen carries one unmistakable primary action, status is always colour-coded the same way, and navigation never asks the executive to remember where something lives it's always where the colour and the icon suggest it should be.
Nuvdel, redesigned.
A contemporary reinterpretation of the Nuvdel delivery-executive app. The original "ticket" concept is kept colour-coded pick-up and delivery tasks, but rebuilt on a modern design system: semantic colour tokens, tonal surfaces, glanceable hierarchy, and a clear primary action on every screen.
Original app concept & screens by Vijesh TP • Redesign concept built as an HTML/CSS prototype
Semantic status colours
Tonal, not saturated
One primary action per screen
Glanceable hierarchy
Labelled navigation
Log in flow
Getting a courier from cold open to their first task
Four screens, same system as the dashboard rebuild: Semantic colour tokens, tonal surfaces, one unmissable primary action per screen and the route line as a recurring motif, since it’s the one image every courier already reads at a glance
1
Welcome
The route line solid for what’s done, dashed for what’s left is lifted straight from the Rout Map screen and used here as the hero, so the very first thing a courier sees already speaks the app’s language.
Updated
Generic centered logo splash to route-motif hero.
Stacked phone/email choice instead
of a single buried link.
Terms folded in to fine print, note a
blocking checkbox.
2
Phone entry
One field,one job. The country chip and number sit in a single tonal input rather than two visually separate boxes, and the active-blue border tells you it’s ready before you even reach the bottom.
Updated
Split country/number inputs to one merged field.
Vague privacy blurb to concrete
‘why we need this’ line.
Button always visible, no scroll-
to-submit.
3
OTP verify
Boxes carry three explicit states filled, active with a focus ring, and empty so progress is legible at a glance, the same fills / next / pending logic as the task timeline in the dashboard.
Updated
Ambiguous uniform boxes to filled / active / empty states.
Silent countdown to visible
mm:ss with an escape hatch to
change number.
Added an explicit anti-phishing
note.
4
All set
Confirmation is named (“Arun”, not “user”) and immediately useful - it previews the exact KPIs waiting on the dashboard, so sign-in reads as the shift, not a dead-end checkpoint.
Updated
Generic “success!” toast to personalized state with today’s numbers.
Static checkmark to progressline implying real
loading.
Rout line now solid, completing the mitif from
screen 1.
Dashboard
Same flows, new system
Scroll horizontally to walk through the dashboard, task timeline, pick-up, delivery and route screens. Each screen is annotated with what changed and why.
1
Dashboard
The Executive day at a glance: Progress bar first, Then four KPI’s with one consistent semantic colour each, then quick action.
Updated
Random pastel card colours to Semantic tokens.
Equal-weight numbers to one dominant metric
per card.
Unlabelled icons to labeled icons.
2
My Tasks
The “ticket” Concept becomes a vertical timeline: done tasks sink visually, the test task is highlighted with a bordered card, ETA and distance.
Updated
Full-width coloured banners to compact status chips.
8+ colour blocks per screens to 4 semantic
states.
Added ‘What’s next’ focus.
3
Pick-up detail
Order facts grouped in one card, a pick-up checklist that mirrors the physical workflow, and one unmissable primary action.
Updated
Buried task list to focused single-order view.
No actions to Call / Navigate / Confirm.
Invoice shown as ‘$560” > ₹ with paid state.
4
Delivery detail
The original write-up’s photo-verification idea is surfaced as a first-class step: proof of delivery is required before the order can close.
Updated
Camera hidden in the tab bar to explicit proof-of-delivery stops.
Added e-signature option.
“Complete delivery” is the only filled buttons.
5
Route Map
Muted map tiles keep attention on the route. Completed legs go solid green, remaining legs dashed blue, and a bottom sheet answers “what’s next?”
Updated
Full-saturation Google basemap to muted custom style.
Route-only view to courier position + ETA sheet.
Ambuguous dots to numbered, stated stops.
Profile Settings
One screen for identity, availability and every setting a pertner needs
Read against the flow you shared, three patterns carry over directly: Tonal lavender for identity movement, colour-coded status chips, and grouped list-rows for anything the tab bar doesn't already own.
Availability leads: For a delivery partner, “am I online” outranks every setting it gets its own card with a live toggle, not buried in a list.
Stats echo the dashboard’s KPI tiles: Same dot-label-value shape as “My Tasks/Deliveries”, so Profile still feels like part of the same app.
Settings are grouped by consequence: Account (who you are, can block work if incomplete), Preferences (how it feels), Support, legal with sign-out isolated so it can’t be tapped by accident.
Profile
Availability isn’t a setting
It’s pulled out of the list entirely into its own card with a live toggle, right under identity, because going offline is the one action here a partner needs mid -shift, not buried three taps deep.
Status chips do double duty
”1 expiring” and “Verified” reuse the exact chip language from the Pending/Canceled/Picked-up chips on the Tasks screen, so a partner already knows what an amber vs. green chip means before reading a word.
Grouping by consequence, not alphabet
Account first (things that can block a delivery if incomplete), Then Preferences (comfort). then Support and Legal (Rarely touched) and Log out sites alone in its own card so it’s never one accidental tap away from Privacy policy.
Two toggle sizes, one system
The availability toggle is larger and green-on-white for visibility from arm’s length; push notifications get the dame component at list scale, same shape, same states, different emphasis.
Personal Details
The three screens behind “Account” - identity, vehicle and money
Each keeps the parent Profile screen’s grouped-card language, but the content shape changes with what’s at stake: Personal details is editable fields, Vehicle & documents is compliance status, Bank & payouts is verification plus a running history
1
Personal details
Every field carries its own pencil rather than one global “Edit” mode - a partner can fix just their DOB without entering an edit sate that risks touching everithing else. Email sits in amber “Unverified” the same way an expiring document would, foreshadowing the next screen’s language.
Updated
Single edit-all mode to per field pencil
Phone/email verification shown inline as chips, not a separate settings toggle.
2
Vehicle & documents
This is a compliance screen first, a form second - the hero chip (“Active”) tells you the vehicle itself is road-ready, and every document gets its own status chip plus expiry subtext, so a lapsing insurance surfaces here it ever blocks a delivery.
Updated
Flat document list to status-first rows with expiry dates surfaced, not hidden behind a tab
Amber “renew” chip acts as both status and a call to action, same amber used for “Pending” on the Tasks Screen.
3
Bank & payouts
Money leads with money: “next payout” sits in the hero slot where Vehicle had its plate number, with a status chip showing exactly where it is in the pipeline. Sensitive fields, account number are masked and edited via pencil rather than shown in full or hidden in a sub-menu.
Updated
Settings -only view to added a payout history list so a partner never has to ask “did I get paid” ; account number masked by default
“Processing” chipre uses the same amber semantics as an expiring document.
Partner scan
The floating scan button, end to end
Camera opens with the same bracket shape as the button itself, a match slides up as a familiar order cart, and a miss gets an honest reason instead of a dead end.
1
Scanner opens
Same brackets shape as the nav button carries straight into the the viewfinder - the icon isn’t just decorative , it’s a preview of the screen it opens.
2
Match found
The order rises as a sheet over the live camera rather than a full-screen swap, the courier never loses the sense of where they physically are.
3
Confirmed
Conformation immediately points to what’s next rather than dropping the courier back at a menu, the scan closes one task and opens the next in a single motion.
4
No match
Red corners give an instant read before you even reach the text, and the reason is specific, “not assigned to you”, instead of a generic “scan failed”.