Opções competindo entre si
Links, chamadas e anúncios dividiam o mesmo espaço de atenção. A oportunidade era dar prioridade à busca e organizar a descoberta em etapas.
UX/UI DESIGN / PROPOSTA DE REDESIGN
GUIA DE
MOTÉIS.
Redesign da experiência
de busca e reserva.
Análise das interfaces e redesign de três etapas da jornada: descobrir motéis, comparar opções por região e reservar uma suíte.
EXPLORE O CASE ↓
01 / CONTEXTOO desafio: facilitar
O desafio: facilitar
a escolha de um motel.
Desenvolvi uma proposta de redesign para facilitar a busca, a comparação de motéis e o acesso à reserva, mantendo a identidade do Guia de Motéis.
Meu trabalho envolveu análise das interfaces existentes, comparação com plataformas de hospedagem e design das novas telas. Identifiquei listagens densas, publicidade dispersa e pouca diferenciação entre as informações necessárias para escolher e reservar.
Defini três prioridades para o redesign: organizar a descoberta na home, apresentar preço e localização na busca por região e reunir os controles de reserva junto aos detalhes da suíte.
- MEU PAPEL
- Análise de interfaces,
direção visual e UX/UI - ESCOPO
- Home, busca por região
e reserva - FERRAMENTAS
- Figma
Photoshop - ENTREGA
- Proposta de interface
e roteiro de teste
MINHA CONTRIBUIÇÃO
Redesenhei home, busca por região e reserva a partir da análise das interfaces. As decisões priorizam comparação entre opções, contexto geográfico e agrupamento dos controles de reserva.
02 / DIAGNÓSTICODiagnóstico da interface
Diagnóstico da interface
e oportunidades de UX.
A análise das telas orientou duas frentes de melhoria: hierarquia da informação e comparação entre opções.
Usei Hotels.com, Airbnb, Booking e Tripadvisor como referências de organização da busca, apresentação de informações e fluxo de reserva. A análise serviu para identificar padrões úteis ao contexto do Guia de Motéis.
Fotografias, preço, localização e ações claras apareceram como elementos importantes para apoiar a comparação. A partir disso, revisei a hierarquia das interfaces existentes.
Comparação pouco visual
As listagens dependiam de blocos de texto. Fotos maiores e uma sequência consistente de informações poderiam facilitar a leitura entre opções.
03 / DECISÕES DE UIIdentidade da marca
Identidade da marca
com consistência de interface.
Traduzi o conceito visual “caliente” em escolhas de cor, tipografia e componentes para manter o reconhecimento da marca nas três telas.
Mantive o vermelho como cor de marca e destaque para ações. Fundos neutros e espaçamentos separam os grupos de conteúdo e ajudam a distinguir navegação, informações dos motéis e controles de reserva.
Na proposta de produto, Titillium Web dá presença aos títulos e Inter sustenta a leitura das informações. Componentes recorrentes, cards, botões, ícones e controles de reserva, seguem uma linguagem comum.
PERSONALIDADE + LEGIBILIDADE
Aa→
Titillium Web / Títulos
Inter / Informações e interface
VERMELHO#F3082D
PROFUNDIDADE#550310
RESPIRO#EFEFEF
CONTRASTE#212121
04 / SOLUÇÃODa análise às telas:
Da análise às telas:
três etapas redesenhadas.
01 / HOMEHome organizada
Home organizada
para descobrir opções.
Reorganizei a home em blocos de descoberta: motéis indicados, benefícios do app e opções próximas. Nos cards, fotografia, localização, preço e acesso aos detalhes ganham uma sequência mais previsível.
O “ver mais” permite ampliar a exploração sem mostrar tudo de uma vez. A intenção é reduzir a competição entre escolhas, mantendo acesso ao catálogo.
A publicidade continua presente, mas em áreas definidas. A proposta busca equilibrar a divulgação comercial com o espaço necessário à comparação.
Role dentro das telas para explorarSite atual × proposta de redesign não implementada
Referência atual: home de São Paulo, capturada em 16/10/2026. Ver página de origem ↗
O QUE MUDOU
Conteúdo organizado em blocos de descoberta, com uma sequência consistente de informações nos cards.
02 / BUSCA POR REGIÃOBusca com lista e mapa
Busca com lista e mapa
para comparar a localização.
A busca por região precisava oferecer algo além de uma nova listagem. Propus combinar cards com um mapa, aproximando a comparação de preços da localização de cada opção.
O mapa acrescenta contexto geográfico à comparação: além do preço e da fotografia, a pessoa pode avaliar onde cada motel está na região escolhida. Essa relação entre lista e localização é a principal contribuição da tela para a jornada de busca.
Role dentro das telas para explorarSite atual × proposta de redesign não implementada
Referência atual: busca por região, Zona Leste, capturada em 16/10/2026. Ver página de origem ↗
O QUE MUDOU
Lista e mapa aproximam preço e localização para apoiar a comparação entre opções.
03 / RESERVAInformações da suíte
Informações da suíte
e reserva na mesma página.
Na página de reserva, dei mais presença às fotos da suíte e agrupei comodidades com ícones. Informações complementares podem ser reveladas conforme o interesse do usuário.
Data, período, preço e ação de reserva ficam reunidos em um card. Esse agrupamento aproxima os dados necessários à escolha do botão de reserva e estabelece uma sequência de preenchimento mais clara.
Role dentro das telas para explorarSite atual × proposta de redesign não implementada
Referência atual: seleção da Suíte Premium do Motel Xanadú, capturada em 16/10/2026. Ver página de origem ↗
O QUE MUDOU
Fotos, comodidades e controles de reserva reunidos para dar contexto à escolha da suíte.
05 / RESULTADO E PRÓXIMOS PASSOSTrês telas redesenhadas.
Três telas redesenhadas.
Decisões conectadas à jornada.
A entrega reúne uma home com conteúdo organizado por blocos, uma busca que combina lista e mapa e uma página de suíte com os controles de reserva agrupados.
O valor da proposta está na organização das informações que apoiam a escolha: fotografias, localização, preço e condições de reserva passam a ter papéis definidos em cada etapa. Os comparativos de antes e depois mostram como essas decisões foram aplicadas às interfaces.
O projeto foi desenvolvido até a proposta de interface e o roteiro de teste. O impacto sobre usabilidade e conversão ainda precisa ser medido com usuários e dados de uso.
- Descoberta
Conteúdo agrupado na home e cards com uma sequência consistente de informações para apoiar a exploração.
- Comparação
Lista e mapa na busca por região para relacionar as opções à localização desejada.
- Reserva
Fotos, comodidades e controles de data, período e preço organizados para apoiar a escolha da suíte.
VALIDAÇÃO PLANEJADA
O roteiro prevê explorar o site, buscar motéis na Zona Leste e reservar uma suíte. Na execução, o foco seria observar a conclusão das tarefas, as dúvidas durante a comparação e a facilidade para encontrar os controles de reserva.
APRENDIZADO DE UX/UI
O principal aprendizado foi conectar cada decisão visual a uma tarefa: organizar os cards para comparar opções, usar o mapa para avaliar localização e agrupar os controles para orientar a reserva. Essa relação deu um critério comum ao redesign das três telas.
Jorge Yasuo / Product Designer
Case original no Behance ↗