A blocked option says why
With low battery, the direct plan is disabled and reads “Does not reach the minimum arrival reserve”. The fastest stop that works is suggested, and selection is shown with text, outline and a symbol.
Independent concept · Mobility, interface
RUTA
A trip planner where each charging stop shows whether it is viable, how long it takes and what it costs. It draws on my automotive interface experience, with fictional data and vehicle.
The challenge
The problem it tries to solve.
With an electric car, arriving depends on more than distance: on the battery you leave with, where you charge, how long you wait and how much margin each person wants on arrival.
The design question: how do you make the reason for a restriction obvious, so nobody has to guess why an option is unavailable?
Design decisions
Four decisions, in view.
Each one can be checked in the demo.
Every stop, on a timeline
The summary shows the chosen departure time, each stop with its kilometre, charging minutes, cost and battery in and out, and the arrival. On long routes every stop is visible, not just the first.
The driver sets the margin
The arrival reserve can be 10, 15, 20 or 25%. Raising it adds charge to the plan and says so. Each station shows its price, and the plan compares: “costs €6 less, but takes 6 min longer”.
Plan for things going wrong
“Simulate first station busy” recalculates the plan without losing context. Errors are specific too: if a city is not in the catalogue, the interface says which one.
What you can try
A four-step walkthrough.
To see the decisions at work, in this order.
Choose Barcelona–Madrid and look at the stops on the timeline.
Raise the arrival reserve to 25% and compare the total.
Change the departure time.
Simulate the first station being busy and confirm the plan.
Behind the interface
Fictional vehicle and prices
58 kWh, 18 kWh/100 km, 120 kW maximum power and 3 minutes to connect. Sample prices: €0.59/kWh at service areas and €0.45/kWh in town. Charging power is a simplified average.
- HTML, CSS and JavaScript, no external dependencies.
- Checked for console errors and horizontal overflow at 1440 and 390 px.
- Brand, imagery and data are fictional. No figure comes from real users.
With more time
What I would check with people.
These are hypotheses for a test I have not run yet, not results.
- Do people understand why a station is disabled?
- What reserve do they choose, and do they change it after seeing the cost?
Shall we talk about the role?
I can walk you through how I reached each decision in this concept.