Turning a human-dependent bus-card service into 24/7 digital autonomy across Curitiba's entire public transport network. A self-service totem kiosk that replaced 5–10 minute queues with under 50-second transactions — scaling coverage from 22 terminals to roughly 333 stations.
URBS operated a recharge service tied to human operators: open 7 AM–6 PM, available at only 22 bus terminals, with web payments that took up to 48 business hours to credit the card. Riders queued 5–10 minutes on average, and any evening trip meant arriving with the wrong balance.
An unsupervised totem kiosk designed for 24/7 operation across the entire network — tube stations and bus terminals alike. Instant-finality payments — cash and card validated in the MVP prototype, PIX specified for the commercial rollout — inside an 11-screen flow built around a physical-to-digital handoff, tuned to sub-50-second transactions in high-traffic public space.
Coverage grew from 22 terminals to roughly 333 stations. Availability went from office hours to 24/7/365. Credit latency collapsed from 48 hours to instant. Average wait time dropped below 50 seconds, cutting operating cost by an estimated 60% through automation.
Measuring the shift from a constrained, operator-bound service to a fully automated channel. Every metric was reframed: from opening hours to always-on, from queue time to throughput, from labour cost to return on investment.
| Metric | Legacy Service | New Totem | Strategic Win |
|---|---|---|---|
| Coverage | 22 bus terminals | ~333 stations + terminals | High Area |
| Availability | 7 AM – 6 PM | 24/7 (365 days) | Channel Scalability |
| Credit Latency | 48 business hours | Instant finality | User Trust |
| Avg. Wait Time | 5 – 10 min | < 50 seconds | High Throughput |
| Operating Cost | High (Labour) | Low (Automated) | ~60% ROI |
A dual role across research, interaction design and delivery. Leading the UX work end-to-end while running the schedule, hand-offs and stakeholder loops that kept a public-service deployment on track.
The 11-screen prototype reached production fidelity through a small team — 2 UX designers (I absorbed Project Management as well) and 1 motion designer — combining hands-on UX direction with AI-augmented coding loops. Claude served as pair-programmer for the React implementation, while I owned the interaction model, the multilingual content strategy (PT / EN / ES), accessibility decisions, and the totem’s physical-world ergonomics (touch-target sizes, viewing angles, glare). Without that workflow, a prototype at this fidelity would have required external engineering hours that weren’t on the budget — the AI partnership is what made the production-ready prototype possible inside our timeline.
The flow was designed around a single rule: every screen either triggers the next physical action or closes out the previous one. No orphan states, no mandatory tutorials, no hidden options.
Early sketches — mapping the transaction flow on paper
Two early choices set the rhythm of the transaction — one handles the handoff between the physical world and the screen, the other decides how users pick a value under time pressure.
The most fragile moment in any totem UX is the transition from physical action to on-screen state. Classic ATM patterns ask the user to press “Start”, then insert the card — two sequential steps for a single intent. We removed the first one entirely.
“The physical-to-digital handoff is the most fragile moment in totem UX. Every second of uncertainty here compounds into queue time downstream.”
Analytics from URBS showed that roughly 80% of users recharge the same three amounts. Offering a full keypad up front would penalise the majority to serve an edge case. Instead, we built a quick-select architecture that puts the common path one tap away and relegates custom values to a secondary screen.
In a context where queues form in under a minute and the environment is noisy, minimising cognitive load isn’t a nicety — it’s throughput strategy. Quick-select wasn’t a shortcut; it was the primary path.
A React implementation of the full 11-screen flow — multilingual (PT / EN / ES), split-screen totem layout, designed for unattended operation. Best experienced full-screen on a vertical display.
Prototype — welcome screen (PT/EN/ES)
Full interactive prototype with all 11 screens, three payment methods, and accessibility keypad. Built to mirror the production totem — no shortcuts, no placeholders in the flow.
Desktop-only prototype — designed for a vertical 1920×1080 touchscreen.
Design System v2.0 — foundations to components
A separate, dedicated design system covering the totem’s visual language, components, motion principles and accessibility standards. Shipped as its own artefact so teams can consume foundations without pulling in the full app.
The working Figma file captures the full 11-screen flow, component variants and interaction states used to validate the totem with stakeholders. Covered by client NDA — shared privately on request, walkthrough available during interview.
Phase 1 and 2 establish the pace of the transaction. By validating the user’s intent early and simplifying the decision-making process, we ensured that the transition to the complex payment layer felt inevitable, safe, and efficient.