Bolt UI design & app screens

The map is the home screen, not a screen you open

Bolt opens straight onto a full-bleed map centered on your blue dot, with a single 'Where to?' search field docked at the bottom in a rounded sheet. There is no landing menu, no dashboard, no interstitial — the product assumes the only reason you launched it is to go somewhere. Nearby cars render as small vehicle glyphs scattered across the streets, so the map does double duty as both a location picker and a live proof of supply before you have typed anything.

That bottom sheet is the spine of the whole experience. It expands upward as you commit to a trip — collapsed it shows the search field and saved places (Home, Work), dragged up it reveals recent destinations. The pattern designers should note is how one persistent surface morphs through the entire booking funnel rather than pushing you through separate full screens, keeping the map visible and the sense of place unbroken the entire time.

Ride-type selection as a scrollable price ladder

Once a destination is set, the sheet fills with a vertical list of ride categories — Economy, Comfort, XL, and the green micromobility options where available — each row pairing an icon, an ETA, and a bold fare on the right edge. The list is deliberately scannable top to bottom as a price ladder: cheapest and most available at the top, premium below. The selected row gets a subtle filled background and a leading accent, and a single full-width green 'Select Bolt' button pins to the bottom so the commit action never moves.

Bolt's brand green does real work here. It is reserved almost entirely for the primary action button and the electric scooter/e-bike tier, so the eye is trained to read green as 'go' and as 'the sustainable choice' simultaneously. Everything else — surfaces, secondary text, dividers — stays in restrained neutral grays, which is why a screenshot of this screen reads instantly even without labels.

Live tracking and the scooter unlock detour

After booking, the sheet flips into a tracking state: driver photo, car model and plate on a card, a moving car icon on the map, and a live ETA that recalculates as they approach. Trip actions (share status, contact, cancel) sit as icon buttons in a row, and the route line animates between pickup and drop-off. It is a textbook example of turning anxious waiting time into a legible, continuously-updating status object.

The micromobility flow is a genuinely different interaction model bolted onto the same map. Tapping a scooter or e-bike surfaces a mini-sheet with battery level, per-minute pricing, and a large 'Scan to ride' button that opens the camera for the QR code on the handlebar. Unlock, in-ride timer, and 'end ride' with a mandatory parking photo form a tight loop — worth studying as an example of how one app carries two fundamentally different rental mental models (a driver comes to you vs. you walk to the vehicle) without a jarring context switch.

Frequently asked questions