DriveEase

Car Rental System — High-Fidelity Wireframes

5 ScreensStaff Flowv1.0
1

Splash Screen

Logo Icon

App Name — "DriveEase"

Tagline — "Car Rental Management System"

Loading spinner — auto-redirects after 3.5s

2

Staff Login

Logo

"Staff Login"

"Sign in to manage rentals"

Username *
username
Password *
password

Error message (shown on invalid login)

SIGN IN

Hint text

3

Dashboard

+ NEW BOOKING
LOGOUT

3 KPI cards: Active Rentals count, Total Revenue ($), Average Duration (days)

"Rented Cars" table heading

Table columns: Customer name, Car type badge, Fuel type, Duration, Total cost, Rental date

4

Booking Form (3-Step Wizard)

1
Customer Details
←

Back button + "NEW BOOKING" title + "Step 1 of 3"

Customer Details
First Name *
John
Surname *
Doe
Address *
123 Main St, City
Age *
25

Minimum age: 21. Numeric input only.

"Valid driving license confirmed" checkbox (required)

← BACK
CONTINUE →
2
Car & Options Selection
Car Type

4 selectable cards: City ($35), Family ($55), Sports ($85), SUV ($70). Active = solid border.

Fuel Type

4 options: Petrol (no surcharge), Diesel (+$5), Hybrid (+$10), Electric (+$15)

Rental Duration
1 day28 days

Slider: 1–28 days. Shows selected days count.

Extras

Unlimited Mileage (+$12/day), Breakdown Cover (+$8/day). Checkbox toggles.

← BACK
CONTINUE →
3
Review & Confirm
Booking Summary
Customer
Vehicle
Pricing

Line items: base rate, fuel surcharge, extras. Bottom: bold TOTAL with calculated price.

← BACK
✓ CONFIRM BOOKING
5

Booking Confirmation

✓

"BOOKING CONFIRMED"

"[Name]'s rental recorded."

Summary: Vehicle type (fuel) + Duration

BACK TO DASHBOARD →