Ride ordering flow, redrawn in glass
A what-if nobody asked for: the ride flow in glass and near-black.
- Role
- Personal project, solo
- Product
- Personal concept, not affiliated with Uber
- Scope
- Mobile app concept
Results
- 4 screenshome, planning a ride, setting the destination on the map, choosing the car
- 18 secondsof working prototype, from the home screen to Apple Pay
- 3 waysto name a destination on one card: type it, pick a recent, or drop a pin
- No briefa personal project with no client and no deadline, to find the limits of a style
This is a personal concept with no brief and no client, not affiliated with Uber. I wanted a real product to try glassmorphism on, so I redrew the mobile flow I use most, ordering a car, end to end. The result is four screens wired into an 18-second prototype, so the style can be judged in motion.
Introduction
A style looking for something real to sit on.
Glassmorphism is easy to make pretty on a Dribbble shot and hard to make work in a moving car, at night, with one hand. I took a product with real constraints to find where the style holds up and where it breaks. Nobody asked for this redesign: the only brief was my own.
Constraints
- A flow people run without looking: nothing may get slower to look better
- Glass over a live map: the panel stays readable, the route stays visible through it
- Near black everywhere, so state is told with light rather than colour
Home
Show the thing, not an icon of the thing.
The home screen carries a shop: rides, food, couriers, groceries, flowers, scooters. In the app those are flat pictograms that all look like the same product. Here each is a small rendered object, so the eye sorts them before it reads a word. Eight renders are also the part that would cost the most to ship and maintain.
- Rides and Eats are two tabs, not two apps
- The bottom bar floats as a glass pill, not on solid ground
Destination
Three doors to the same answer.
People arrive at a destination in different states: some know the address, some recognise it in a list, some only know the place on a map. So the screen offers all three at once, on one card, instead of making the map a second screen to discover.
The ride
The sheet takes half, the route stays visible.
By the time the car is being chosen the map has done its job, so the sheet takes the bottom half, and the route stays visible above it with both addresses and the time on it.
- Seats and Faster sit beside the class name, because those are the two questions asked
- Apple Pay sits under the button, not behind another screen
Key decisions and their cost
Only what you touch is allowed to glow
The whole interface is near black, and the only things allowed to glow are the ones you are meant to touch: a coloured rim on the primary button, the route as the brightest line on the map, the active tab lit rather than filled.
Trade-off A palette this dark leaves no room for a second accent: anything else that wants attention competes with the button or goes without.
One button changes its label with the state
Setting a destination on the map uses a single primary button whose label follows the state: Search Destination while the pin is loose, Confirm Destination once it is placed.
Trade-off One target with two meanings only works while the map makes the state obvious. If the pin is ambiguous, so is the button.
The price sits inside the confirm button
The amount is set in the confirm button rather than above it, so the number and the decision share one target and one glance.
Trade-off It makes the button wide and text heavy, and it stops working the moment the price needs a breakdown next to it.
All four screens wired up to judge motion
I wired all four screens into a prototype, including the home screen's loading state, because a glass panel sliding over a map is a different thing from one in a static frame.
Trade-off Prototyping a personal project eats the time that would otherwise go into more screens. It is also the only reason the transitions are defensible.
Outcome
Outcome
A personal exercise that came out as a small finished thing: one flow, drawn end to end and wired up to be used. Most of the work went into the look, and the path picked up a few changes on the way. Glass works only over a quiet map: on a busy junction the same panel needs a solid fill.
What I learned
- Glass needs a quiet map underneath, and that limits where the style can go.
- Rendered objects read faster than pictograms and cost far more to keep alive: a fair trade for a personal piece, a whole art pipeline for a real product.
