Feature Design

Consumer Area
Account & Bookings Dashboard

A self-service consumer portal designed from scratch — enabling users to manage bookings, track rental history, handle cancellations, and control their account across both JLR and Volvo platforms.

Product Designer
KMS Mobility Solutions
JLR & HYRA (Volvo)
UX Research → UI Design
New Feature
The Problem

A platform with no post-booking experience

Our mobility platforms handled search, booking, and checkout well — but once a user completed a booking, they were left in the dark. There was no way to view past rentals, manage subscriptions, cancel a booking, or update account details. We needed to design a full consumer self-service area from scratch.

Research Starting Point

I studied best-in-class booking apps — Airbnb, Booking.com, and Miles — to understand how they structure account dashboards and booking histories. The key insight: cards with rich vehicle context beat tables, and a clear account hub (not a settings list) reduces navigation friction significantly.

JLR Platform
Mobile consumer area — My Bookings, My Account
HYRA (Volvo)
Web + mobile — My Bookings dashboard grid
Designed User Flow
1
🏠
Account Hub
Central grid of all account sections
2
📋
My Bookings
Active & past bookings in card list
3
🔍
Booking Detail
Full info, BOOK AGAIN, cancel option
4
Cancellation
Confirm modal → cancelled state
JLR Platform — Mobile

Account Hub & My Bookings

The account hub acts as a central dashboard — a 3×3 icon grid giving users immediate access to every self-service action. My Bookings shows active and historical rentals as rich media cards, consistent with the booking confirmation style.

Account Hub
01

Account Hub

A icon-grid dashboard gives instant access to Personal Data, Address, Password, Driving License, My Bookings, Payment, Invoices, Notifications, and Languages — all from one screen.

My Bookings
02

My Bookings — Active View

Bookings appear as full-width cards with a large vehicle image, booking type badge (RENT / ABO), status, dates, and dealer. An „All bookings“ filter lets users switch between active and past.

JLR Platform — Booking Management

Detail View & Cancellation Flow

Users can drill into any booking for full contract details and take action — re-book the same vehicle, or initiate a cancellation. The cancel flow uses a confirmation modal to prevent accidental actions, followed by a clear cancelled state with a recovery path.

Booking Detail
Booking Detail
BOOK AGAIN · CANCEL
Cancel Confirmation
Cancel Booking
Confirmation Modal
Cancelled State
Cancelled State
BOOK AGAIN CTA
Empty State
Empty State
No bookings yet

Vehicle-First Cards

Inspired by Airbnb’s booking history, each booking card leads with a full-width vehicle photo — making the list immediately scannable and emotionally resonant, not just informational.

Destructive Action Safety

Cancellation is intentionally gated behind a confirmation modal. Once cancelled, the state is communicated clearly with a visual „CANCELLED“ banner and a recovery „BOOK AGAIN“ CTA to reduce churn.

Empty State Design

An empty My Bookings screen surfaces an FAQ section and a „BOOK VEHICLE NOW“ CTA — converting a dead end into a re-engagement moment, keeping users within the funnel.

HYRA (Volvo) — Consumer Area

My Bookings Dashboard — Web & Mobile

The HYRA consumer area brings the same booking management to the Volvo platform — adapted to the web-first layout with a card grid view and a detailed mobile booking detail screen.

hyra.de/my-account/bookings
HYRA My Bookings Desktop
05

HYRA — My Bookings Grid (Desktop)

An 8-card vehicle grid surfaces all bookings at a glance — each card shows vehicle photo, name, booking type (MIETE / ABO), status, dates, and dealer. Filter controls allow switching between all bookings.

HYRA Booking Detail
HYRA — Booking Detail (Mobile)

Consistent Detail Pattern

The mobile booking detail page follows the same structure as JLR — vehicle hero, booking type badge, key dates, contract info — ensuring that design patterns learned on one platform transfer across the white-label system.

BOOK AGAIN & CANCEL

Both action CTAs are present across both platforms — enabling re-booking with a single tap and giving users full control over active contracts without needing to contact a dealer.

Design Thinking

Research, Patterns & Decisions

The consumer area started with a gap analysis and competitive benchmarking before a single screen was designed. Key decisions were driven by user mental models from existing booking apps.

Competitive Research

Analysed Airbnb, Booking.com, and Miles for booking history patterns. Key takeaways: card-first layouts outperform tables, photos drive recall, and filter tabs (active / past / all) reduce cognitive load.

Account Hub Architecture

Chose a 2×4 icon grid over a settings list — inspired by Airbnb’s profile page. Icons give each section equal visual weight and allow users to jump directly to any function without hunting through menus.

Cross-Platform Consistency

Designed the consumer area as a shared pattern — adapting to JLR’s dark-luxury aesthetic and HYRA’s teal-green identity while keeping information architecture, card structure, and action flows identical.

White-Label Scalability

Components were token-based to allow new OEM brands (Range Rover, Defender, etc.) to inherit the consumer area system with brand-appropriate styling — no redesign required for each deployment.

UX Research Competitive Analysis Airbnb Benchmarking Account Dashboard Booking Management Empty States Destructive Actions White-Label System JLR HYRA (Volvo)
Consumer Area — Account & Bookings Dashboard
Designed at KMS Mobility Solutions, Berlin · JLR & HYRA platforms
Product Designer
UX Research → UI Design