Nível: Intermediário
Área: UX Design + Frontend
Duração estimada: 4 a 8 horas
Entregável: Protótipo no Figma + implementação publicada no GitHub
Quem viaja com frequência sabe como é difícil controlar os gastos com transporte.
Você reserva mentalmente "R$ 80 pra Uber esse fim de semana", mas acaba gastando o dobro sem perceber.
E se o Uber tivesse um jeito de guardar dinheiro em "envelopes" para viagens específicas?
Criar uma funcionalidade de Envelopes de Uber Cash dentro da carteira do app.
Cada envelope funciona como um limite nomeado de gasto, tipo "São Paulo, Viagem de Negócios" ou "Casamento da Pri", com saldo próprio e método de pagamento definido.
O usuário acessa Carteira > Criar Envelope e define:
- Um nome para o envelope (ex: "Viagem SP")
- O valor limite que quer reservar
- O método de pagamento que será usado (crédito, débito, Uber Cash, etc.)
Na hora de pedir o Uber, o usuário vê os envelopes disponíveis na tela de Método de Pagamento, ao lado das opções normais.
Ele seleciona o envelope desejado e o saldo vai sendo consumido conforme as corridas.
Quando o saldo do envelope acaba, o app troca automaticamente para o método de pagamento mais utilizado pelo usuário, sem interromper a corrida.
Crie um protótipo navegável com as seguintes telas:
| Tela | Descrição |
|---|---|
| Carteira | Tela principal com os envelopes listados |
| Criar Envelope | Formulário para nome, valor e método de pagamento |
| Detalhe do Envelope | Saldo atual, histórico de corridas e opção de editar |
| Seleção de Pagamento | Tela de método de pagamento com os envelopes integrados |
| Alerta de Saldo Zerado | Notificação ou tela informando a troca automática |
Requisitos de design:
- Seguir a identidade visual do Uber (cores, tipografia, estilo de componentes)
- Ser responsivo para mobile (considere iOS e Android)
- Ter estados de interação: vazio, preenchido, erro, carregando
- Usar componentes reutilizáveis (cards de envelope, botões, inputs)
Programe as telas usando HTML/CSS/JS ou um framework de sua escolha (React, Vue, etc.).
O que deve funcionar:
- Criar um envelope com nome, valor e método de pagamento
- Listar os envelopes na tela de carteira
- Simular a seleção do envelope na tela de pagamento
- Mostrar o saldo sendo consumido (pode ser mockado)
- Exibir mensagem quando o saldo zera e o pagamento muda automaticamente
- Persistência básica dos dados (localStorage ou estado global)
- Figma: Compartilhe o link do protótipo no
README.mddo seu repositório - Código: Suba o projeto no GitHub com um
README.mdexplicando como rodar localmente - Deploy (bônus): Publique o projeto em Vercel, Netlify ou GitHub Pages
Estrutura sugerida do repositório:
uber-cash-envelopes/
├── README.md (link do figma + instruções)
├── index.html (ou src/ se usar framework)
├── styles/
└── scripts/
Design
- O fluxo é claro e intuitivo mesmo para quem nunca usou a feature?
- Os estados de UI foram considerados (vazio, erro, sucesso)?
- Segue ou dialoga com a identidade visual do Uber?
Código
- O código está organizado e legível?
- A interface é fiel ao design proposto?
- Funciona no celular (responsividade)?
Extras que impressionam
- Animações e micro-interações
- Acessibilidade (ARIA labels, contraste, navegação por teclado)
- Modo escuro
- Testes simples
- Uber Design System (referência visual)
- Figma: Introdução a Protótipos
- Como usar localStorage com JavaScript
Faça um fork deste repositório, mantenha os créditos e suba sua solução no seu próprio GitHub.
Pull Requests com melhorias no enunciado são bem-vindos!
Inspiração: Essa ideia surgiu de uma dor real de quem viaja e quer controlar gastos por contexto, não só por método de pagamento. Seu desafio é tornar isso real e elegante. Boa sorte! 🚗
Este projeto foi desenvolvido com o objetivo de ajudar pessoas a desenvolverem ambos os lados criativos: o visual e também o de negócio/experiência do usuário.
- Vitória Zoche (vitoriazzp) - Design Engineer & He4rt Developers Member - Portfólio - Twitter