← Back to Blog

No Bookings Yet — A Clean Start to Your Charging Journey

Every app has a first-time user experience problem: what do you show when there is nothing to show? The bookings page at /bookings is your central hub for managing charging reservations. But until today, when you had no bookings — whether you were a new user or just hadn't charged in a while — you saw an empty list. No guidance, no next step, no clear call to action.

That changes now. The empty state on the bookings page has been redesigned from the ground up as a welcoming, action-oriented screen that turns "nothing here" into "here is what to do next."

At the center of the new layout sits a glowing Calendar icon wrapped in a subtle cyan ring — a visual anchor that draws the eye without competing with the content. Below it, the headline reads "No bookings yet" — direct, honest, and framed as a moment of possibility rather than absence. A short supporting line explains what to do next: open the map, find a charger near you, and start your first session.

The real star of the redesign is the "Start Charging" button. A large, gradient-filled cyan pill with a Zap icon, it links directly to the radar map at /app — the fastest path from zero bookings to your first charging session. The button has a hover lift effect and a soft glow shadow that makes it feel tactile and inviting, even on a static page.

This is more than a cosmetic change. Every screen in an app is a conversation with the user, and an empty state that just says "no results" is a conversation ender. A well-designed empty state is a conversation starter: it acknowledges the absence, explains why it is okay, and shows exactly what to do about it.

Under the hood, the empty state is rendered through the existing Svelte template's `{:else if bookings.length === 0}` branch. The card uses the same design tokens as the rest of the ChargePeer design system: `var(--text)`, `var(--text-secondary)`, `var(--primary)` gradients, and the monospace font for headings. The icon wrapper has a subtle cyan border and box-shadow glow that matches the neon-cyberpunk aesthetic without going overboard.

For signed-out users, the existing "Sign in to view your bookings" prompt remains unchanged. For signed-in users with data, the full booking card list renders as before. The empty state only appears when you are signed in but have zero bookings — a specific state that deserves specific treatment.

This is a small change with an outsized first-impression impact. Whether you are a new user exploring the platform or a returning user who has let their bookings expire, the path forward is now clear: one click, and you are on the map, finding your next charge.