Plataforma de assinatura e vouchers de lava-rápido

Designer de UI/UX para a Lava Thru, rede de lava-rápidos drive-thru automatizados e clube de assinatura automotiva. Projetei um ecossistema completo de 5 páginas e 308 nós de primeiro nível no Figma (arquivo UNaM05TzpUnAoWVvnheN9U, nó 0:1): 187 nós na página principal de Design abrangendo o clube de lavagem recorrente (Planos com 6 variações), fluxo de checkout em cartão com 12 telas (Pagamento - Cartão), motor de emissão e presente de vouchers digitais (HomeVoucher, EditVoucher) e painéis do cliente; uma página dedicada de Validação com 76 nós estruturando estados de validação de formulário (Input/ERRO, Input/CORRETO, Input2.0), telas de erro HTTP (404, 405) e controles administrativos; com suporte de um Style Guide com diagramas de arquitetura de sistema (Arquitetura_Lava-Thru-1 e 2), 10 tokens de cor semânticos e sombra de elevação CardDashboard.

Atuação na agência Sagitta de 6 de fevereiro de 2024 a 23 de julho de 2024. Juan atuou como designer de UI/UX integrando a equipe da agência ao lado da área de desenvolvimento. O cliente opera túneis de lavagem expressa automatizada e necessitava de uma plataforma digital para gerenciar planos mensais recorrentes, cadastro de placas veiculares, venda de vouchers de presente e localização de unidades físicas.

Arquitetura AutoTech para assinaturas recorrentes e vouchers

📐308

nós em 5 páginas no Figma (187 em Design, 76 em Validação)

💳12

telas de checkout em cartão com validações minuciosas

🚗6

variações de planos de assinatura mensal estruturados

🎨10 + 1

tokens semânticos de cor e efeito de sombra CardDashboard

Lava-rápidos expressos automatizados dependem de alto fluxo contínuo de veículos. Nos mercados automotivos maduros, clubes de assinatura mensal representam a maior fatia da receita recorrente, substituindo a oscilação causada pelo clima por uma receita previsível. Traduzir essa dinâmica para o meio digital exigiu uma plataforma na qual motoristas pudessem selecionar pacotes de lavagem, vincular a placa do veículo, concluir o pagamento em cartão de crédito e presentear amigos com vouchers avulsos.

A suíte principal na página de Design (187 nós)

A prancheta principal de Design (nó 1:407, contendo 187 elementos) cobre toda a experiência do motorista assinante:

• Opções de Planos Recorrentes (Planos) — Seis configurações de planos detalhando os serviços incluídos (Lavagem Expressa, Espuma Ativa, Limpeza de Rodas, Lavagem de Chassi, Cera Protetora) com chaveamento claro de cobrança mensal.
• Checkout em Cartão em 12 Telas (Pagamento - Cartão) — Fluxo completo de compra com formatação de segurança para CVV, identificação automática de bandeiras (Visa, Mastercard, Elo), preenchimento de endereço por CEP, opções de parcelamento e telas de processamento animado.
• Motor de Vouchers Digitais (HomeVoucher e EditVoucher) — Funcionalidade que permite ao cliente comprar vales-lavagem, personalizar mensagens de presente, estabelecer prazos de validade e resgatar cupons promocionais nas cancelas dos túneis.
• Gestão de Assinantes (Detalhes do Assinante e Lista Clientes) — Portal do cliente exibindo placas veiculares cadastradas, histórico de lavagens realizadas, data da próxima fatura e opções para pausar ou alterar o plano com um clique.

UX defensiva: A suíte de validação e erros com 76 nós

Muitos projetos de agência ignoram telas de erro, forçando desenvolvedores a improvisar o comportamento de validação durante o código. Na Lava Thru, criei uma página exclusiva de Validação (nó 232:2544, com 76 filhos) especificando visualmente o comportamento para todas as situações de exceção:

• Feedback Detalhado de Campos — Estados explícitos desenhados para Input/ERRO (nó 373:2410), Input/CORRETO (nó 373:2459) e o componente tokenizado Input2.0 (nó 1229:4817), padronizando foco, preenchimento, estados desabilitados e textos de ajuda.
• Telas de Erro HTTP — Criação de telas personalizadas para erros 404 (Página não encontrada) e 405 (Método não permitido), impedindo que o usuário se depare com mensagens genéricas do navegador.
• Back Office Administrativo — Telas de controle operacional incluindo Cadastrar admin, EditarAdmin, Ver colaborador e centrais de notificação para a gerência de cada unidade física.

Arquitetura de sistema e fundação de design tokenizada

A página de Style Guide (nó 1:2) inclui dois mapas arquiteturais completos (Arquitetura_Lava-Thru-1 e 2), detalhando as conexões entre o cadastro do cliente, webhooks de cobrança recorrente, validação de vouchers e busca de unidades. A identidade visual foi alicerçada em 10 cores semânticas (como Azul Real #041F64, Laranja Expresso #F54F03 e Neutro Escuro #1C1C1C) e no efeito de sombra de elevação CardDashboard.

O que este projeto é e o que não é

• Não é automação de hardware ou IoT. Não desenhei relés para os túneis físicos, câmeras de reconhecimento óptico de placas (OCR) ou cancelas automáticas.
• Não é implementação de gateway de pagamento. Projetei a experiência de checkout de 12 telas; a integração da API de pagamentos e a gestão de recorrência não foram código meu.
• Não é o site publicado em Bubble. Embora lavathru.com.br esteja online, o desenvolvedor no-code da agência colocou no ar uma versão anterior que não incorporou esta refatoração com 308 nós.
• Não é a operação de um negócio de lava-rápido. Fui o designer de UI/UX da plataforma digital, e não operador ou proprietário das unidades físicas.
• Não possui métricas de assinantes. Nenhum dado de MRR, retenção de membros ou uso de vouchers consta no registro do portfólio.

O valor de uma arquitetura visual exaustiva

A Lava Thru exemplifica o design de interface em escala profissional: antecipando fluxos de usuário, casos de erro e necessidades administrativas antes do início do desenvolvimento. Com 308 nós minuciosamente estruturados, o projeto forneceu um guia de execução completo e detalhado para um clube de assinaturas automotivas.

Evidência

A rede de lava-rápidos está em operação e acessível em lavathru.com.br. Contudo, o desenvolvedor no-code da agência colocou no ar uma versão inicial em Bubble sem incorporar a arquitetura refatorada do Figma desenhada por Juan; esse build inicial em Bubble permanece ativo hoje. Não existem métricas de adesão comercial ou de faturamento recorrente. Este estudo de caso documenta o design de UI/UX, a arquitetura de validação para casos de borda e o checkout de assinaturas do artefato auditado com 308 nós.