Guia de Motéis
UI Design | UX Writing
Negócio e problema
O Guia de Motéis é um aplicativo que permite reservar quartos e personalizar a experiência, com itens especiais adicionados ao pedido, como mordomias e decorações exclusivas. O projeto foi um desafio de processo seletivo: o redesign da landing page do app, mantendo a identidade visual e a linguagem da marca.
A personalização da reserva, um dos destaques do app, só era encontrada no FAQ.
O objetivo era destacar as principais vantagens do app, como a reserva de quartos e as customizações exclusivas. Para isso, a página precisava comunicar melhor o que o app oferece, e apresentava problemas de usabilidade e de comunicação.
Como atuei no projeto
Conduzi o desafio de ponta a ponta, da análise da página atual à documentação do layout proposto, combinando design de interface e UX Writing.
Pesquisa e benchmark
Realizei pesquisas e benchmark de mercado para embasar as decisões de design do projeto, antes de definir o layout.
Análise de oportunidades
Avaliei a landing page atual e levantei pontos de melhoria em usabilidade e comunicação, como o vídeo de fundo, os descontos, os links das lojas e o FAQ.
Wireframes e protótipo
Desenhei wireframes de baixa e alta fidelidade, para mobile e desktop, e criei o protótipo completo no Figma.
Style Guide e componentes
Criei o Style Guide e os componentes da página, alinhados à identidade visual e à linguagem da marca.
UX Writing
Apliquei UX Writing nos textos da página, como na troca de “FAQ” por “Perguntas Frequentes”, para uma comunicação clara e centrada no usuário.
Documentação
Documentei todo o processo, da estruturação inicial à apresentação do layout proposto, garantindo alinhamento com a marca.
Como cheguei à solução
O projeto começou com pesquisas e benchmark de mercado, seguidos de uma análise da landing page atual.
Dessa análise surgiram quatro pontos de oportunidade, que o redesign buscou resolver mantendo a identidade visual e a linguagem da marca:
Vídeo em looping
Em planos de internet limitados, a reprodução contínua pode consumir muitos dados. Em alguns trechos, a legibilidade do texto sobreposto ficava comprometida.
Descontos
Eram exibidas outras porcentagens além da principal, o que gerava confusão: “até 50% de desconto” já comunica o maior valor disponível.
Links das lojas
Ao serem clicados, redirecionavam para a mesma página em uma nova guia, em vez de levar o usuário ao destino esperado.
FAQ
Não havia campo de busca, valia oferecer contato com o suporte, e a informação de que menores de 18 anos não podem entrar precisava de mais destaque.
Com as oportunidades mapeadas, o trabalho seguiu em etapas: wireframes de baixa fidelidade, criação de componentes e conteúdos, wireframes de alta fidelidade para mobile e desktop e, por fim, a documentação do produto.
O que foi entregue
O resultado foi uma proposta de nova landing page, comparada ao layout atual.
As principais mudanças foram:
- Confirmação de idadeUm modal exige que o usuário confirme, clicando em “SIM”, que tem mais de 18 anos antes de acessar a página. Antes, essa informação não aparecia em destaque.
- Primeira telaTroquei o vídeo de fundo por uma imagem estática, pensando em usuários com pacotes de internet limitados, e coloquei o desconto como elemento principal, como atrativo para o download do app.
- Personalização da reservaDestaquei a funcionalidade “Melhore sua experiência”, que permite incluir mordomias e decorações exclusivas. Ela já aparecia nas lojas de aplicativos, mas na página só era encontrada no FAQ. Na seção Go Fidelidade, ajustei o texto e atualizei o mockup para mostrar com mais clareza como o usuário acumula selos e aproveita os benefícios do programa.
- Chamada para download e prova socialIncluí uma nova chamada para baixar o app e avaliações de usuários retiradas da App Store e da Google Play.
- FAQRenomeei o título para “Perguntas Frequentes”, com uma linguagem mais simples e acessível, e adicionei um campo de busca para o usuário procurar diretamente sua dúvida ou explorar os tópicos.
O que aprendi
Neste projeto, combinei design de interface e UX Writing para garantir que a comunicação da landing page fosse clara e centrada na experiência do usuário.
Mudanças como trocar “FAQ” por “Perguntas Frequentes” e substituir o vídeo de fundo por uma imagem estática nasceram de olhar para diferentes cenários de uso e para as necessidades e limitações de quem acessa a página.
