Get a free consultationConsultation
Menu

Logistics

TrucKaro

An on-demand delivery app for fuel and water, with express or scheduled delivery, order tracking and separate customer and driver journeys.

Industry
Logistics
Platform
Mobile app
Our role
UI/UX Design + Development
TrucKaro presentation banner: the TrucKaro logo and the words Fueltech and Watech, with phones showing the yellow and white app over a dark city map.

Project overview

TrucKaro is an on-demand delivery mobile app for fuel and water, under the Fueltech and Watech names, with separate customer and driver journeys.

What the app does

A customer signs in by phone, chooses Fueltech or Watech from the home screen and picks how the order arrives: Express Delivery, Schedule Later or Instant Fuel. Ordering sets the quantity and price and a saved address, and a live map then follows the order with the delivery time, address and driver.

From the project presentation

Collage of TrucKaro screens: role selection, sign-in, home, delivery options, fuel and water ordering, vehicle make and order tracking.
The core screen set from the presentation.
A phone showing the TrucKaro splash screen between screens for delivery, ordering and the home page.
Splash screen and the core journey.
Two phones showing the TrucKaro driver app.
The driver app.

Key screens and user flows

  1. TrucKaro Select User screen with Customer and Driver cards under the logo.

    Choose a role

    After the splash screen, Customer and Driver appear as two large yellow cards with simple line illustrations.

  2. TrucKaro home screen showing Islamabad, a promotional carousel, Watech and Fueltech tiles and price cards.

    Home

    The selected city and a carousel of offers sit above Watech and Fueltech, then cards with current fuel and water prices.

  3. Delivery screen with Express Delivery, Schedule Later and Instant Fuel options.

    Choose a delivery

    Express Delivery, Schedule Later and Instant Fuel are listed with an icon and a short description of each.

Visible features

  • Customer and driver roles
  • Phone number sign-in
  • City shown on the home screen
  • Fuel and water price cards
  • Express, scheduled and instant delivery
  • Fuel type and water tanker size selection
  • Quantity and price controls
  • Saved Home and Work addresses
  • Vehicle make selection
  • Live order map with delivery time
  • Driver name and rating on the order
  • Order confirmation message

Design approach

  • Two services, one home screen

    Fueltech and Watech sit side by side under a promotional carousel, with current prices in cards beneath them.

  • Delivery choices in plain terms

    The delivery screen gives each of the three options an icon, a name and one line of explanation.

  • Quantity and price together

    A single bar shows the amount and the price together, with plus and minus controls on each side.

  • Yellow for action

    Warm yellow marks the brand, the selected option and the main button, with deep navy for Watech and supporting text.

Design system

Colour palette

  • Yellow#F3C017
  • Deep navy#02283F
  • Light canvas#F5F5F5

Typography

Poppins

Used across headings, price cards and forms, as specified on the board. Shown here in this site's system typeface.

This case study is based on the original project presentation. Personal details, third-party names, prices, offers and QR codes are obscured in the images where they appeared; it makes no claims about results, launch status or the technology used.

More projects

Tell us what you want to build.

Share your goals and we will recommend where to start.

Get a free consultationView packages