Gallery
See what others have created
pushybuilder
@pushybuilder
Parking Meter Screen
Design a mobile parking meter screen for starting and paying for a street parking session. The core job is simple: pick a duration, see the total update, pay, and know exactly when the session ends.
Make the top of the screen do the heavy lifting. Show the parking zone or stall number, current rate, max stay, and the selected end time in one place. The user should be able to tell at a glance whether they are in the right zone and whether the chosen duration fits the rules.
The time picker should be fast, not fiddly. Use preset durations plus a custom option, and update the total cost as the selection changes. If there are fees, taxes, or discounts, surface them before payment so the final amount never surprises the user.
After payment, switch the screen into an active session state with a live countdown, expiration time, and a clear receipt or confirmation number. If payment fails, the screen should keep the selected time and meter details visible, then offer a direct retry path or another payment method.
What to deliver
- Design the main parking session screen with zone, rate, time, and total cost.
- Add a time selector that updates price as the user changes duration.
- Include payment method selection and a clear primary pay action.
- Show confirmation with session start time, expiration, and receipt.
- Design empty, error, and payment-failed states with recovery actions.
Incorporate visual cues like color and iconography to differentiate between actions, such as extending time or finalizing payment.