TERRA

OVERVIEW

UI/UX | BRANDING

As urban life speeds up, traditional fuel stations fall short of modern needs for quick and convenient service. Terra fills this gap by delivering fuel and EV charging directly to your doorstep—24/7. With a focus on reliability, safety, and ease, Terra brings power where and when it’s needed most.

Full Case Study

Get started

PROBLEM STATEMENT

SOLUTION

In today’s fast-paced world, refueling and EV charging are time-consuming tasks involving long detours, queues, and unnecessary delays that disrupt daily routines. The increasing adoption of electric vehicles further intensifies the issue, as limited charging infrastructure restricts access and adds to consumer frustration. This growing gap between user needs and existing fueling options continues to hinder convenience, efficiency, and mobility.

To eliminate the hassle of detours, queues, and limited charging infrastructure, we’ve developed a user-friendly mobile app that enables 24/7 doorstep delivery of fuel and EV charging. With just a few taps, users can schedule refueling or charging services anytime, anywhere. The app offers real-time tracking, secure payments, and reliable service—designed to seamlessly fit into fast-paced urban lifestyles and make powering vehicles as simple as ordering food.

The UX with UI

Let’s see what’s been done so far.

Loading Screen

To maintain a sense of brand continuity, the loading screen incorporates a fuel gauge visual metaphor. This creates anticipation and subtly connects the user to the service theme even before interacting with the app.

Goal: Turn wait time into brand engagement.

Onboarding Flow

The onboarding journey introduces users to Terra's core offerings—fuel delivery, EV charging, and convenience. The visuals are minimal yet informative, with illustrations that quickly communicate the app’s value proposition..

Goal: Build immediate understanding and trust in the service.

The login screen follows a clean and familiar layout, using minimalist UI components to ensure users instantly recognize how to interact with it. According to Jakob’s Law, users prefer experiences that feel familiar based on their past interactions with other apps. By maintaining standard patterns—like clearly labeled fields, visible password toggles, and third-party login options—we reduce cognitive load and improve speed of access.

Goal: Allow returning users to log in quickly and confidently, using familiar design conventions.

Signup Screen

The signup screen is designed to be welcoming and effortless, guiding new users through a simple process without overwhelming them. Staying true to Jakob’s Law, this screen mimics the expected patterns seen in modern apps—step-by-step form fields, logical input flow, and social sign-up options. This enhances the user’s comfort, especially during first-time use.

Goal: Enable first-time users to register smoothly with minimal friction by aligning with familiar sign-up experiences.

Home Screen

The heart of the app, this dashboard presents the main features—Petrol, Diesel, and EV charging—in a clear, icon-based interface. The floating action button (FAB) for emergency refuel makes the app feel responsive and ready for real-time needs.

Goal: Make navigation effortless and task-focused.

Add Location Screen

A key step in ensuring accurate delivery, this screen allows users to search, pin, and save their address. Designed for both convenience and repeat usage, it also enables easy updates or additions.

Goal: Precision in service delivery through intuitive location setup..

Petrol Cart Screen

This screen displays a seamless breakdown of the order: fuel type, quantity, vehicle details, and payment. The CTA is prominent, ensuring the user clearly understands the next action.

Goal: Provide clarity and control over the order before checkout.

Visual Backbone

The Design System

Colour

Primary

Secondary

General Consent

Shared Access

Restricted Access

Spacing

Body

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Mobile Grid