// 004

URBS
Totem de Recarga de Cartão

Service Design Interaction Design Automação Gestão de Projetos Prototipação com IA

Transformando um serviço de recarga de cartão de ônibus dependente de operadores humanos em autonomia digital 24/7 em toda a rede de transporte público de Curitiba. Um totem de autoatendimento que substituiu filas de 5–10 minutos por transações de menos de 50 segundos — ampliando a cobertura de 22 terminais para aproximadamente 333 estações.

Função UX Designer & PM
Cronograma Abr — Out 2019
Cliente URBS · Curitiba
Escopo Transporte Público
Totem de Recarga de Cartão URBS — quiosque completo mostrando a tela de boas-vindas com a fenda de inserção do cartão e o terminal de pagamento
Totem — Curitiba, 2019

Desafio

A URBS operava um serviço de recarga dependente de operadores humanos: aberto das 7h às 18h, disponível em apenas 22 terminais de ônibus, com pagamentos pela web que levavam até 48 horas úteis para creditar no cartão. Os passageiros enfrentavam filas de 5 a 10 minutos em média, e qualquer viagem noturna significava chegar com o saldo errado.

Solução

Um totem de autoatendimento sem supervisão, projetado para operação 24/7 em toda a rede — tanto em estações-tubo quanto em terminais de ônibus. Pagamentos com finalização instantânea — dinheiro e cartão validados no protótipo MVP, PIX especificado para o lançamento comercial — dentro de um fluxo de 11 telas construído em torno de um handoff físico-digital, ajustado para transações abaixo de 50 segundos em um espaço público de alto tráfego.

Impacto

A cobertura cresceu de 22 terminais para aproximadamente 333 estações. A disponibilidade passou do horário comercial para 24/7/365. A latência de crédito caiu de 48 horas para instantânea. O tempo médio de espera ficou abaixo de 50 segundos, reduzindo o custo operacional em uma estimativa de 60% por meio da automação.

Totem Legado vs Novo Totem

Medindo a mudança de um serviço restrito e dependente de operador para um canal totalmente automatizado. Cada métrica foi reformulada: de horário de funcionamento para sempre ativo, de tempo de fila para throughput, de custo de mão de obra para eficiência operacional.

Métrica Serviço Legado Novo Totem Ganho Estratégico
Cobertura 22 terminais de ônibus ~333 estações + terminais Ampla Área
Disponibilidade 7h – 18h 24/7 (365 dias) Escalabilidade de Canal
Latência de Crédito 48 horas úteis Finalização instantânea Confiança do Usuário
Tempo Médio de Espera 5 – 10 min < 50 segundos Alto Throughput
Custo Operacional Alto (Mão de obra) Baixo (Automatizado) ~60% de Redução de Custo
~60%
Redução estimada no custo operacional a partir da automação — o totem eliminou o custo recorrente de mão de obra dos operadores enquanto ampliava a disponibilidade do serviço de 11 horas por dia para operação contínua em toda a rede.
// 01

UX Designer & Gerente de Projetos

Uma função dupla entre pesquisa, design de interação e entrega. Liderando o trabalho de UX de ponta a ponta enquanto conduzia o cronograma, os hand-offs e os loops com stakeholders que mantinham uma implantação de serviço público nos trilhos.

// 01
Service Design
Mapeando a jornada de recarga de ponta a ponta pelos pontos de contato físicos e digitais — da fila ao cartão na mão.
// 02
Interaction Design
Um fluxo de totem com 11 telas ajustado para alvos de toque grandes, copy curto e zero becos-sem-saída cognitivos.
// 03
Automação de Sistema
Substituindo etapas dependentes de operador por fluxos de pagamento com finalização instantânea — dinheiro e cartão validados no MVP, PIX especificado para o lançamento comercial.
// 04
Gestão de Projetos
Entrega de seis meses entre pesquisa, design, coordenação de fornecedores e aprovações do setor público.

O protótipo de 11 telas atingiu fidelidade de produção com uma equipe pequena — 2 UX designers (eu também absorvi a Gestão de Projetos) e 1 motion designer — combinando direção de UX prática com loops de codificação com apoio de IA. O Claude atuou como pair programmer na implementação em React, enquanto eu era responsável pelo modelo de interação, pela estratégia de conteúdo multilíngue (PT / EN / ES), pelas decisões de acessibilidade e pela ergonomia do totem no mundo físico (tamanho dos alvos de toque, ângulos de visão, reflexo de luz). Sem esse fluxo de trabalho, um protótipo com essa fidelidade exigiria horas de engenharia externa que não estavam no orçamento — a parceria com IA foi o que tornou possível um protótipo pronto para produção dentro do nosso cronograma.

// 02

Onze Telas, Uma Transação

O fluxo foi desenhado em torno de uma única regra: cada tela dispara a próxima ação física ou encerra a anterior. Sem estados órfãos, sem tutoriais obrigatórios, sem opções escondidas.

Primeiros wireframes em papel mapeando o fluxo completo da transação no totem — da tela de boas-vindas ao pagamento até a remoção do cartão Esboços iniciais — mapeando o fluxo da transação no papel
// 01
Protetor de Tela
Loop ambiente de atração — sinaliza que a máquina está ativa e pronta, atraindo usuários a partir do ambiente da estação.
// 02
Onboarding
Guia novos usuários pelas funcionalidades do totem — seleção de idioma, instruções de inserção do cartão e visão geral das opções de pagamento.
// 03
Saldo Inicial
Cartão detectado, saldo exibido imediatamente (ex.: R$ 47,50). Dois CTAs: “Nova recarga” e “Repetir última” para usuários recorrentes.
// 04
Seleção de Valor
Quatro alvos de seleção rápida (>48 px) cobrindo ~80% das transações, além de “Outro valor” como saída secundária.
// 05
Forma de Pagamento
Dinheiro ou cartão — uma única bifurcação, mesmo peso visual na tela (PIX reservado para o lançamento comercial).
// 06
Instruções para Dinheiro
Orientação passo a passo para inserir as cédulas — localização da fenda, denominações aceitas e feedback em tempo real.
// 07
Depósito de Cédulas
Rastreador de depósito ao vivo — conta as cédulas inseridas em tempo real e mostra o saldo restante para atingir o valor selecionado.
// 08
Pagamento com Cartão
Instruções de handoff para o terminal — orienta o usuário a aproximar ou inserir o cartão na leitora lateral.
// 09
Processamento
Feedback visual enquanto a transação é validada — indicação de progresso e copy de reafirmação.
// 10
Confirmação
Estado de sucesso com saldo atualizado, resumo da transação e opção de recibo. Encerramento claro antes da saída.
// 11
Saída · Remover Cartão
Aviso obrigatório de remoção do cartão fecha o ciclo — nenhum cartão esquecido, nenhum estado ambíguo.
// 03

Duas Decisões de Design Que Moldaram o Ritmo

Duas escolhas iniciais definiram o ritmo da transação — uma cuida do handoff entre o mundo físico e a tela, a outra decide como os usuários escolhem um valor sob pressão de tempo.

Fase 01
01

O Handoff do Físico para o Digital

Don Norman · Affordances no Mundo Físico

O momento mais frágil em qualquer UX de totem é a transição da ação física para o estado na tela. Padrões clássicos de caixa eletrônico pedem que o usuário aperte “Iniciar”, depois insira o cartão — duas etapas sequenciais para uma única intenção. Removemos a primeira por completo.

  • A inserção do cartão é a ação de início — sem botão “Iniciar”
  • Elimina um toque, economiza ~5 segundos por transação
  • O saldo aparece no momento em que o cartão é detectado — validação instantânea
  • O affordance físico de uma fenda de cartão já é uma instrução; a UI apenas confirma
Princípio

“O handoff físico-digital é o momento mais frágil na UX de um totem. Cada segundo de incerteza aqui se acumula em tempo de fila mais adiante.”

Fase 02
02

Lei de Hick & Seleção Rápida

William Hick · O Tempo de Decisão Escala com as Opções

Os dados analíticos da URBS mostraram que cerca de 80% dos usuários recarregam os mesmos três valores. Oferecer um teclado numérico completo de saída penalizaria a maioria para atender um caso extremo. Em vez disso, construímos uma arquitetura de seleção rápida que coloca o caminho comum a um toque de distância e relega os valores personalizados a uma tela secundária.

  • Quatro alvos de toque grandes (>48px) na tela principal de seleção de valor
  • Cobre ~80% das transações sem nenhuma entrada por teclado
  • “Outro valor” fica na parte inferior como opção secundária — nunca competindo com o fluxo principal
  • Reduz o tempo de decisão em um ambiente de alto tráfego onde cada segundo importa
Decisão de Design

Em um contexto onde as filas se formam em menos de um minuto e o ambiente é barulhento, minimizar a carga cognitiva não é um luxo — é estratégia de throughput. A seleção rápida não era um atalho; era o caminho principal.

// 04

Protótipo do Totem ao Vivo

Uma implementação em React do fluxo completo de 11 telas — multilíngue (PT / EN / ES), layout de totem em tela dividida, projetado para operação sem supervisão. Melhor experiência em tela cheia num display vertical.

// Entregável 01 — Ao Vivo

Inicie o Totem

Tela de boas-vindas do protótipo do Totem URBS — layout multilíngue em tela dividida com fundo de Curitiba Protótipo — tela de boas-vindas (PT/EN/ES)

Protótipo interativo completo com todas as 11 telas, três formas de pagamento, e teclado de acessibilidade. Construído para espelhar o totem de produção — sem atalhos, sem placeholders no fluxo.

React PT / EN / ES 11 Telas Tela Dividida
Iniciar Protótipo Indisponível no Celular

Protótipo somente para desktop — projetado para uma tela touchscreen vertical de 1920×1080.

// Entregável 02 — Documentação

Design System do Totem

Documentação do Design System de Recarga de Cartão URBS — landing page cobrindo fundações, tipografia, componentes e motion para o quiosque touchscreen 1920×1080 Design System v2.0 — das fundações aos componentes

Um design system separado e dedicado, cobrindo a linguagem visual do totem, componentes, princípios de motion e padrões de acessibilidade. Publicado como artefato próprio para que as equipes possam consumir as fundações sem precisar do app completo.

Tokens Componentes Motion A11y
Ver Design System
// Entregável 03 — Arquivo de Trabalho

Arquivo Figma

Área Restrita Apenas Pessoas Autorizadas Figma · Protótipo · NDA
Figma — acesso restrito

O arquivo Figma de trabalho reúne o fluxo completo de 11 telas, variantes de componentes e estados de interação usados para validar o totem com os stakeholders. Coberto por NDA do cliente — compartilhado de forma privada sob solicitação, com walkthrough disponível durante entrevista.

11 Telas Variantes Fluxos
Acesso Restrito
// 05

O trabalho nunca foi a tela. Foi a fila atrás dela.

Uma recarga que levava de cinco a dez minutos num guichê com atendente foi redesenhada para levar menos de cinquenta segundos num totem sem atendente. O trabalho não era um verniz sobre uma transação; ele era a transação — onze telas sequenciadas para que a parte lenta e ansiosa, decidir, terminasse antes que a parte complexa, pagar, sequer começasse.

Valide a intenção cedo, simplifique a decisão, e a camada de pagamento parece inevitável em vez de intimidadora. Projetado para 333 estações planejadas, cinquenta segundos economizados por passageiro não é verniz de quiosque — é throughput, uma cidade se movendo um pouco mais rápido porque alguém encurtou a fila.