UX/UI Design & Pesquisa
Mell.ro: do cadastro ao contrato assinado
A Mell.ro é uma proptech/fintech brasileira (fundada em Curitiba) focada em soluções financeiras e operacionais para o mercado de locação imobiliária. Ela atua principalmente como uma garantidora de pagamentos de aluguel, conectando proprietários, corretores autônomos e inquilinos. O objetivo central é eliminar a burocracia do aluguel tradicional (como a exigência de fiador ou caução pesada) e blindar o locador contra inadimplência.
Fluxo de cadastro e publicação de imóvel e escolha do plano de garantia, desenhado para baixa fricção e máxima conversão.
01/3
- Projeto
- Desafio de design de produto
- Plataforma
- Web (desktop)
- Escopo
- Fluxo, telas e design system
- Entrega
- 15 telas e estados
01 · O desafio
Descobrir o que o MVP precisa perguntar
O desafio não trazia tela pronta, wireframe nem lista de campos. A missão era desenhar o fluxo completo de duas etapas e decidir quais informações um MVP funcional realmente precisa.
Cadastro e publicação
O cliente (corretor ou proprietário) informa os dados do imóvel, define valores e, se ainda não tem inquilino, publica o anúncio para gerar leads.
Plano de garantia
No checkout, define o modelo de precificação com a taxa da Mell.ro e vê com transparência quanto cada parte recebe.
Entregáveis
Mapa do fluxo, handoff com telas e estados em alta, e uma página de componentes com Auto Layout e variantes.
Critérios
Clareza do fluxo, organização do Figma, escolha de campos, decisões de UX, escalabilidade e prontidão para handoff.
02 · Mapa do fluxo
O caminho do usuário, de ponta a ponta
Depois do login, o usuário escolhe anunciar ou calcular. Os dois caminhos usam as mesmas perguntas e se encontram na escolha do plano.
03 · Telas e lógica de UX
Cada tela, e por que ela é assim
Navegue pela lista, pelas setas ou pelas teclas ← e →. Clique na tela para ver em tela cheia.
Entrada · 01/15
Abertura
Logo e um único link, “Começar”. Sem menu e sem distração: a primeira decisão do usuário é entrar.
Interação
Protótipo navegável
Abrir no Figma04 · Princípios de UX
Decisões que se repetem no fluxo
Pedir pouco, cedo
O cadastro tem quatro campos. Dados que mudam o cálculo, como condomínio e IPTU, só aparecem depois.
Nunca deixar o usuário perdido
Breadcrumb em todas as etapas, botão Voltar sempre visível e um chip com o imóvel, editável.
Transparência no preço
Os planos mostram, lado a lado, quanto o proprietário recebe, o custo do inquilino e a taxa.
Entrada flexível
“Calcular” dá valor sem exigir anúncio ou contrato, e leva ao mesmo plano de garantia.
Controles certos para cada dado
Radio para perfil, stepper para quartos e banheiros, select para datas e toggle para sim ou não.
Estados visíveis
Aguardando servidor, pendente, assinado e validada: o usuário sempre sabe em que ponto está.
05 · Documentação
Tudo o que foi criado para o projeto
Mapa do fluxo
Fluxograma com os dois caminhos (anunciar e calcular), decisões, processamento de dados e simulação financeira.
Telas em alta fidelidade
15 telas e estados: login, escolha, cadastro, especificações, fotos, análise, cálculo, planos, taxa, contrato e confirmação.
Design System: fundamentos
Documento que explica a finalidade do sistema: componentes reutilizáveis com variações, estados e regras de uso, referência para designers e desenvolvedores, priorizando os componentes existentes antes de criar novos.
Página de componentes
Inputs, botão primário e text button, com Auto Layout e variantes, como pedido no desafio.
Anotações de handoff
Regras que o Inspect não mostra: overflow, mensagens de erro e comportamento dos campos.
Benchmark e AS IS
Análise de concorrentes (5andar, Loft) e do fluxo atual da Mell.ro.
Componentes que aparecem nas telas
- Botão primário (pílula branca)
- Botão secundário “Voltar”
- Text button “Escolher”
- Input de texto
- Stepper numérico
- Radio
- Select
- Toggle sim ou não
- Breadcrumb
- Chip de resumo do imóvel
- Card de plano
- Alternância Alugar e Vender
- Faixa de valor
- Mensagem de status
- Área de upload
- Card de pessoa com status
Base visual
Azul da marca
#339AF0
Azul de ação
#0F62FE
Azul profundo
#00308F
Verde de sucesso
#279A7D
Branco
#FFFFFF
Cores aproximadas, lidas das telas. Tipografia: Roboto.
06 · Resultados
Um fluxo mais prático e mais rápido
O resultado do projeto aparece na experiência como um todo e em cada etapa da interface.
O projeto foi avaliado por um teste SUM, um teste para medir a eficácia, a eficiência e a satisfação dos usuários. Ele combina a taxa de conclusão de cada tarefa (eficácia), a comparação entre o tempo realizado e o tempo-meta (eficiência) e a satisfação coletada pela SEQ normalizada, resultando em uma única leitura de usabilidade para cada etapa do fluxo.
| Tarefa | Taxa de Conclusão (Eficácia) | Tempo Padrão / Meta (T₀) | Tempo Médio Realizado (T̄) | Satisfação (SEQ normalizada) |
|---|---|---|---|---|
| T1: Filtro e Seleção | 95,0% | 150 s | 105 s | 88,0% |
| T2: Simulação de Proposta | 92,0% | 180 s | 120 s | 84,0% |
| T3: Cadastro & Garantia | 86,0% | 280 s | 205 s | 72,0% |
| T4: Revisão & Assinatura | 90,0% | 153 s | 90 s | 82,0% |
| Média Ponderada / Total | 90,75% | 763 s (Total) | 520 s (Total) | 81,50% |
Resultados mapeados ao longo da interface
Entrada
Caminho definido logo no início
Quem só quer saber o valor do aluguel calcula sem precisar anunciar. Cada pessoa segue direto para o que veio fazer.
Cadastro
Menos campos, menos esforço
Só quatro dados no começo. O usuário avança rápido e entende o progresso pelo breadcrumb.
Especificações
Menos digitação e menos erro
Stepper, select, radio e toggle substituem campos de texto livre sempre que o dado permite.
Fotos e análise
Anúncio nasce com qualidade
O mínimo de 3 fotos e o estado de espera claro mostram ao usuário o que falta e que o sistema está trabalhando.
Cálculo
Valor antes do compromisso
O usuário recebe um preço sugerido, com faixa de referência e contexto da região, antes de decidir qualquer coisa.
Plano de garantia
Decisão sem trocar de tela
Os três planos ficam lado a lado, com repasse, custo e taxa visíveis. Dá para comparar e escolher com confiança.
Contrato
Andamento sempre visível
Status por pessoa (pendente, assinado, validada) e um resumo fixo do documento evitam dúvidas e idas e vindas.
07 · Aprendizados
O que este projeto me ensinou
Pedir só o que muda a decisão
Cada campo precisa justificar sua presença. Os dados que não são urgentes podem esperar e entrar quando fizerem sentido.
Um fluxo, vários caminhos
Reaproveitar as mesmas perguntas para anunciar e calcular reduziu retrabalho e deixou o sistema mais simples de manter.
Transparência gera confiança
Mostrar quanto cada parte recebe e paga, de forma lado a lado, facilita a escolha do plano e diminui objeções.
Estados também são design
Espera, pendente, assinado e validado fazem parte da experiência. Desenhá-los desde o início evita telas vazias e dúvidas.
Design system acelera tudo
Componentes reutilizáveis, com variações e estados, deixaram as telas consistentes e prepararam o terreno para o handoff.
Documentar para o time de tecnologia
Fluxo, componentes e regras que o Inspect não mostra precisam estar registrados, para que o desenvolvimento seja previsível.
Próximos passos
- Validar o fluxo com testes de usabilidade com proprietários, corretores e inquilinos.
- Acompanhar métricas de conclusão e abandono por etapa.
- Completar a página de componentes e as anotações de handoff.
Mais projetos
