RideGo — Car & Motorbike Rental
Helping travelers choose vehicles and request rental quotes in one clear workflow.
Landing page concept for car and motorbike rental services. Combines service introduction, fleet categories, and a structured quote request form connected directly to WhatsApp.
UI/UX Designer & Web Developer
2 Weeks
Figma, Next.js, Tailwind CSS
Concept Exploration
The Challenge
Prospective renters need to choose a vehicle type, specify pickup dates and locations, and contact the team to discover available rental options.
Travelers planning holiday excursions or business trips require swift, transparent vehicle booking without navigating confusing rental tiers. Most inquiries occur while customers are in transit — arriving at an airport terminal, checking into accommodations, or coordinating schedules on mobile devices. Misunderstandings regarding driver availability, fuel policies, and pickup coordinates frequently create friction.
The design challenge was to create an uncluttered, confidence-inspiring interface that presents clear vehicle choices, establishes rental requirements upfront, and gathers inquiry details into a single frictionless quote flow.
Design Objectives
Introduce car and motorbike rental services rapidly upon arrival.
Collect essential details upfront to prepare accurate rental quotes.
Help travelers effortlessly compare vehicle categories.
Explain booking steps clearly before renters initiate contact.
Visual Concept
“Explore more, travel easier”
Travel and vehicle visuals build contextual excitement, while vivid emerald accents highlight booking actions.
Scenic Landscape Hero Backdrop
Landscape photography creates an immediate emotional connection between vehicle rental and scenic travel exploration.
Hero-Integrated 'Get a Quote' Form
The quote request form is strategically positioned next to the hero as the primary conversion path.
Distinct Car & Motorbike Categories
Cars and motorbikes are presented as two distinct, easily selectable categories matching traveler group sizes.
Trust Drivers & Fleet Transparency
Highlighting well-maintained vehicles, upfront transparent pricing, and flexible pickup resolves common renter hesitations.
Page Breakdown
01 / Navigation
Rapid access to vehicle fleet, rental workflow, company background, and support channels.
02 / Hero Section
Introduces rental services with immediate WhatsApp CTA and direct links to explore fleet options.
03 / Unified Quote Form
Gathers rental type (car/bike), dates, pickup location, vehicle model, traveler name, WhatsApp number, and custom notes.
04 / Fleet Categories
Clear comparison between car and motorbike rental options with essential attributes (seating, transmission, fuel efficiency).
05 / How It Works
Explains four transparent booking stages: submit request, receive tailored quote, confirm booking, and pickup vehicle.
06 / Extended Details & Policies
Detailed fleet specifications, upfront rate transparency, rental policy FAQ, insurance terms, and airport/hotel delivery coverage.
Mobile Adaptation
Responsive layout adaptations ensure travelers on the move absorb service context before completing the quote inquiry form:
Compact Hamburger Navigation
Desktop menu compresses into a space-efficient drawer while preserving a persistent WhatsApp action trigger.
Contextual Post-Hero Form Placement
Desktop side-by-side form shifts beneath the hero on mobile, allowing travelers to absorb value propositions first.
Adaptive Form Grid Architecture
Form inputs arrange in a clean 2-column layout on wide mobile screens and transition gracefully into a single-column flow with >=44px tap targets.
Stacked Vehicle Category Cards
Car and motorbike cards stack vertically with prominent spec badges that are effortless to scan during one-handed scrolling.
- Hamburger Navigation: Condenses navigation links into a clean drawer while keeping WhatsApp floating contact accessible.
- Sequential Form Positioning: Moves quote form beneath the hero so mobile travelers grasp service benefits before entering rental parameters.
- Mobile Touch Ergonomics: Input elements calibrated to >=44px height with accessible date pickers and tap spacing.
- Stacked Fleet Comparison: Vehicle categories stack vertically with clear badges for fuel economy, transmission, and passenger capacity.
Visual System & Style
RideGo's visual design combines open-road adventure aesthetics with fresh emerald green accents for clear, trustworthy booking clarity.
Color Palette & Strategic Roles
Emerald Green
#059669
Primary Conversion & WhatsApp ActionFresh emerald tone for primary quote buttons, rate highlights, and WhatsApp actions driving conversion.
Deep Forest
#064E3B
Brand Identity & Trust AnchorDeep evergreen shade for section headers, concept badges, and operational stability cues.
Slate Charcoal
#0F172A
High-Contrast Heading & StructureUltra-dark charcoal for primary headings and body typography ensuring crisp readability under sunlight.
Pure White & Crisp Canvas
#FFFFFF
Clean Fleet SurfaceBright, clean canvas highlighting fleet photography and form inputs without visual distraction.
Amber Gold
#F59E0B
Vehicle Ratings & Key GuaranteesWarm accent for customer satisfaction stars, fuel-saver badges, and verified maintenance callouts.
Headline Font
Cal Sans / Outfit
Cal Sans & Outfit for dynamic display headings conveying mobility, travel momentum, and exploration.
Interface & Body Font
Inter / Plus Jakarta
Inter & Plus Jakarta Sans for high-density vehicle specs, form inputs, and rental terms.
Art Direction & Imagery
High-definition travel landscapes and pristine vehicle imagery establishing immediate holiday enthusiasm and mechanical confidence.
UI Elements & Components
44px–48px ergonomic touch targets, spec comparison cards with transmission/seat badges, and transparent quote forms with explicit labels.
Order Workflow
1. Enter Rental Details
Select vehicle type (car or motorbike), travel dates, pickup location, and optional requests like driver or self-drive.
2. Send Inquiry via WhatsApp
The form compiles structured rental requirements into a pre-formatted WhatsApp consultation draft.
3. Receive Options & Quote
RideGo's fleet team checks vehicle pool availability, calculates official rates, and shares available options.
4. Confirm & Pickup
The renter confirms vehicle selection, completes basic identity verification, and picks up the vehicle at airport or hotel.
Important note: The form on this landing page functions as a quote request (Get a Quote), not an instant checkout or automated booking engine. Fleet availability and rental schedules are personally verified by the team via WhatsApp prior to reservation locking.
Outcomes & Validation
Observable & Evidence-Backed Design Outcomes
Unified Single-Flow Quote Collection
All essential rental criteria (dates, pickup spot, vehicle category, contact) collected in one form without friction.
Prominent WhatsApp Action Path
Aligns with traveler habits in Southeast Asia favoring instant messaging consultations for same-day availability.
Transparent 4-Step Booking Workflow
Educates travelers on rental procedures beforehand, significantly reducing repetitive customer service questions.
Clear Car vs Motorbike Categorization
Directs users immediately toward suitable vehicles matching their budget and traveling party size.
Verified Mobile Touch Ergonomics
Touch targets >=44px, effortless single-thumb form inputs, and WCAG AA contrast compliance across all text.
Note: As a design concept project (Website Concept), commercial business metrics such as conversion rates or booking counts are intentionally omitted until validated through actual market operations.
START YOUR PROJECT
Ready to build a high-converting website for your rental fleet?
Let's structure your vehicle categories, clarify self-drive terms, and connect travelers directly to WhatsApp.