Driver Availability UI/UX Overhaul for Darter

Caesar Rizky Kurniawan

Caesar Rizky Kurniawan

Final Result

Context

Connecting Available Drivers to On-Demand Trips

Darter is a trusted, specialized B2B route optimization platform managing the complex transport for partner companies, ensuring radical efficiency in life-critical scheduling. Our professional drivers must communicate their real-time availability status when they are between scheduled trips. This signal is crucial: it instantly integrates the driver into Darter's powerful engine, guaranteeing they are matched with highly optimized on-demand assignments, directly upholding Darter's mission of peak efficiency.

Problem

The current system, which may rely on background checks, logging in/out, or automatic assignment logic, presents several Problem:

Lack of Driver Control

Drivers currently lack a simple, explicit, and visible way to signal their immediate readiness (or unavailability) to accept trips. This leads to confusion and frustration.

Ambiguity

Drivers are often assigned trips when genuinely unavailable, leading to systemic inefficiency and customer dissatisfaction. High Rejection Rates, Longer wait times

Psychological Frictions

The ambiguity of availability creates a stressful experience for drivers, who feel they must constantly monitor the app. for ignoring trips they couldn't possibly accept.

Desk Research

The Evidence

To conquer our UI/UX obstacles, we conducted focused desk research to establish the fundamental truths necessary for the design. This evidence will directly inform the solution.

Principles

The research confirms that an instantaneous toggle is the correct interaction pattern. To eliminate all ambiguity

Clarity

Our analysis of high-visibility mobile interfaces confirmed 3 placement prioritizing maximum accessibility: Top Bar, Bottom Bar, or Floating Action Button

Interaction

The interaction must be both effortless and safe: Tap Area Size, Immediate Feedback, Strategic Friction (To prevent accidental action)

Design Exploration: Control Placement

Explore where on the Driver App Home Page this control should live. It's need to be accessible and visible on all the possible cases.
Placement Exploration
Placement Exploration

Idea: Navigation Overhoul

The current navigation isn’t intuitive, with icons that don’t clearly represent their functions, leading to confusion and slower decision-making. A redesigned, more descriptive navigation can greatly improve clarity, usability, and overall task efficiency.
Navigation improvement process
Navigation improvement process

Design Exploration: Utilizing Color

I will strategically utilize color to define every state of the availability switch, transforming it from a simple indicator into a high-confidence communication tool. This approach ensures instant clarity and minimal cognitive load for the Drivers
Exploration: Utilizing color
Exploration: Utilizing color

Interaction Exploration

Create every state and build a fully interactive prototype that mirrors real user flows. This helps validate assumptions early, uncover usability gaps, and gather meaningful feedback from both the team and users before moving into refinement.
Option 1
Option 2
Option 3

Move Forward with Option 3

After discussing the options and gathering feedback, the team decided to move forward with Option 3. It stood out because the placement stays out of the way, the interaction is clear, and drivers can recognize the status instantly at a glance. It’s the option that keeps everything clean, readable, and practical in real use.
Opyion 3

Idea: How to make the CTA literally "Call"

I wanted the main action—calling the driver—to feel unmistakably clear without disrupting the rest of the interface. So I explored a subtle but attention-grabbing approach: an animated gradient. I built a Lottie version to test the motion and integrated it into a new prototype. The result is a button that naturally draws the eye, signals its importance, and still stays harmonious with all other components.
CTA Enhancement

Final Touch: End to End Interaction

In the final prototype, I mapped out the complete flow of a driver going online and then returning offline. I wanted the transitions to feel smooth and predictable, so the team could clearly see how each state changes in real time. This walkthrough gives a simple, end-to-end view of how the interaction will look and feel once implemented.
Final Interaction

Result

The new design successfully transformed the availability control into a high-confidence tool, delivering two key impacts:

Eliminating Ambiguity

The enhanced dedicated toggle (providing a simple, explicit control) combined with strict Color and instant feedback ensures the Clarity of Driver status.
For Driver: Full confidence and control over their status with instant clarity at a glance. This eliminates the frustration of being assigned trips when genuinely unavailable..
For Business: A critical reduction in systemic inefficiency, minimizing trip rejections and providing high-fidelity data that leads to more reliable, faster service times.

Fostering Driver Trust

The design provides clarity on driverstatus (Online/Offline) and optimal placement for accessibility without clutter. Crucially, the interaction requires a intentional tap (supported by distinct haptic/visual feedback) to effectively prevent unintentional status changes.
For Driver: Eliminates the need for constant monitoring; drivers feel psychologically freed when Offline. The deliberate tap ensures they trust the system and reduces accidental trip assignments.
For Business: Better driver retention and a more focused workforce, as the system minimizes frustration caused by unexpected assignments.
Like this project

Posted Dec 9, 2025

I optimized driver availability control. This intuitive, user-centric design boosts efficiency, enhances clarity, and enables better, faster service delivery.