A experiência interativa não abriu. Recarregue a página ou veja os projetos abaixo. Recarregar ↻

Case 017Design de app mobile

Helps On

Um app em português para pedir serviços para a casa, como diarista ou eletricista, com carteira, cupons e um plano PRO. Os nomes e valores nas telas são dados de exemplo.

Meu papel: Fluxos de produto e design de interface
Status do projeto: Design de interface · Acervo do Figma

Capa de apresentação do Helps On, do arquivo de design original. — Capa de apresentação do arquivo original.

Minha contribuição

O Helps On é um app em português para pedir serviços, de diarista a eletricista ou troca de chuveiro. Em volta de cada pedido fica o que é preciso para pagar por ele: carteira, cartões salvos, cupons e um plano PRO.

O arquivo do Figma tem 58 frames de celular, rodadas de wireframe e um fluxo do usuário, além de cadastro, captura de documento e rosto e estados de pagamento. Aqui mostro a home, a carteira e os cupons.

Um passeio pelas telas do design, não uma gravação: home, carteira e cupons. A home junta os pedidos recentes e cards grandes de atalho. A carteira reúne saldo, cartões e cupons em uma só tela.

Tela home com uma lista de três pedidos, o título Meus atalhos e um card grande e escuro de Minhas solicitações com a tag Novas atualizações. — Um passeio pelas telas do design, não uma gravação: home, carteira e cupons. A home junta os pedidos recentes e cards grandes de atalho. A carteira reúne saldo, cartões e cupons em uma só tela.

Atalhos que mostram o próprio status

A home junta uma lista curta de pedidos e uma fileira de cards grandes em Meus atalhos. Cada card indica um destino e traz uma pequena tag de status, como Novas atualizações ou o número de cartões ativos, para a pessoa ver o que mudou antes de abrir qualquer coisa. O próximo card aparece um pouco na borda direita, o que mostra que a fileira continua.

Tela Meus cupons com as abas Ativos e Expirados e dois cards de cupom com foto, desconto, validade e código. — Cupons separados em ativos e expirados, cada um com seu código.

Cupons separados em ativos e expirados, cada um com seu código.

Primeiro o saldo, depois todo o resto

A carteira abre com o saldo e um botão preenchido, Adicionar saldo, com o extrato ao lado como opção mais discreta. Depois vêm os cartões salvos, os cupons e as movimentações recentes, nessa ordem. Assim, o dinheiro disponível fica no topo e o histórico, a uma rolagem de distância.

Os cupons têm uma tela só para eles, separada em Ativos e Expirados. Cada card traz uma foto e, abaixo dela, o serviço, o desconto, a validade e um código, e termina com Detalhes do cupom.