CASE REAL

UI DESIGN

2024

Redesenhando o aplicativo de uma membership club

Duração

2 meses

Responsabilidade

Arquitetura da informação, Interface das telas

Ferramentas

Figma, Adobe Photoshop

Equipe

2 Products designers, 3 Desenvolvedores

Visão geral

A Resid Club é um clube de membros que é a chave para um universo de exclusividade e sofisticação.
No aplicativo os membros podem reservar hospedagens e experiências exclusivas para a classe A, além de ganhar colecionáveis ao realizar uma reserva. Os colecionáveis tem como objetivo aumentar o engajamento dos usuários e gerar um senso de comunidade.

Grade de benchmarking listando empresas como samsung, apple, amazon, lg, google, wavio, square glow, bellman & symfon e sonic alert.

Objetivo esperado

Valorizar os produtos ofertados pela Resid e melhorar a usabilidade no aplicativo.

Contexto

Os stakeholders solicitaram o redesenho das telas da primeira proposta, que foi criada por outra equipe.

O objetivo era ter uma versão do design com mais apelo visual para valorizar os produtos e construir uma percepção de maior valor da marca.

Análise da usabilidade e estética

Com o objetivo de valorizar os produtos da Resid, eu analisei a usabilidade e estética, identificando melhorias e outros ajustes necessários.

Após realizar a análise e lista as melhorias, estruturei o mapa do aplicativo, como um sitemap porém com um pequeno fluxo para demonstrar a relação entre as páginas e conteúdos antes de iniciar o desenho das telas.

Também foram acrescentadas novas telas que não haviam sido feitas anteriormente.

Estruturei o mapa do aplicativo, como um sitemap porém com um pequeno fluxo para demonstrar a relação entre as páginas
e conteúdos antes de iniciar o desenho das telas.

Pontos de melhoria

O design do aplicativo não tem grande apelo visual

O design não tem grande apelo visual

Principalmente na tela inicial os cards das experiências tem pouco destaque para as imagens, mas elas poderiam ter mais destaque.

Grande uso de texto corridos, dificultando a leitura rápida

Grande uso de texto corridos

Na tela de detalhes sobre o hotel ou experiência temos dois textos longos que não atraem o usuário para ler o conteúdo.

Pouca exibição dos colecionáveis no aplicativo

Pouca exibição dos colecionáveis
no aplicativo

Os colecionáveis só eram visíveis no perfil do usuário e em nenhum outro momento no fluxo.

Falta de padronização nos tamanhos e espaçamentos

Falta de padronização nos tamanhos
e espaçamentos

Ao longo do aplicativo tempos diversos tamanhos de fonte utilizados, sem um padrão claro.

Ao longo do aplicativo tem diversos tamanhos de fonte utilizados, sem um padrão claro.

Ao longo do aplicativo tempos diversos tamanhos de fonte utilizados, sem um
padrão claro.

Soluções propostas

Maximizar o potencial das imagens no app

Maximizar o potencial das imagens

Explorar mais o uso das imagens e a qualidade delas, aumenta o número de acessos únicos por dia e a quantidade de interação no funil de conversão.

Explorar mais o uso das imagens aumenta o número de acessos únicos por dia e a quantidade de interação no funil de conversão.

Tornar os textos objetivos e usar recursos visuais

Textos objetivos e usar recursos visuais

Aumentar a escaneabilidade dos textos e usar recursos visuais como foto e ícones ajuda na clareza e diminui a demanda de chamados ao suporte.

Aumentar a escaneabilidade dos textos e usar recursos visuais ajuda na clareza e diminui a demanda de chamados ao suporte.

Exibir os colecionáveis em momento relevantes no app

Colecionáveis em momento relevantes

Exibir os colecionáveis em pontos chave aumenta o engajamento do usuário e o senso de comunidade dele.

Padronizar os tamanhos de fontes e espaçamentos

Padronizar os tamanhos e espaços

Fontes inconsistentes e espaçamentos irregulares tornam o texto difícil de ler, cansando os olhos e prejudicando a compreensão.

Mapeando fluxos incompletos no aplicativo

Para garantir que a solução estava contemplando todos os fluxos, eu estruturei o mapa do aplicativo, porém com um pequeno fluxo para demonstrar a relação entre as páginas
e conteúdos. A partir desse mapa, identifiquei telas que faltavam dentro do fluxo e que foram acrescentadas.

Após realizar a análise e lista as melhorias, estruturei o mapa do aplicativo, como um sitemap porém com um pequeno fluxo para demonstrar a relação entre as páginas e conteúdos antes de iniciar o desenho das telas.

Também foram acrescentadas novas telas que não haviam sido feitas anteriormente.

Estruturei o mapa do aplicativo, como um sitemap porém com um pequeno fluxo para demonstrar a relação entre as páginas
e conteúdos antes de iniciar o desenho das telas.

Jornada atual 1º Problema 2º Pesquisa destaque negativo "Não tem legenda em todos os videos/canais", 3º Atendimento em destaque vermelho "a empresa não possui atendimento por texto, dificuldade de distinguir ou entender algumas palavras em português", 4º Visita técnica chega em destaque vermelho "depende de terceiros, precisa estar com o celular", 5º recebe visita com destaque vermelho "depende de terceiros, dificuldade de distinguir ou entender palavras em português, app não identifica quem está falando"

Estabelecendo hipóteses e métricas de sucesso

Focamos o redesign em gerar impactos positivos para a Resid, porém a execução e a validação do projeto foram limitadas pela falta de tempo para pesquisa, de acesso a dados e de envolvimento após o lançamento.

Um design pouco atrativo para os produtos resultará em um alto bounce rate.

Grande uso de texto corridos

A principal tela do aplicativo exibe todos os produtos ofertados e caso as fotos e o design não tenham um forte apelo visual, a tendência é que os usuários deixem o aplicativo.

Teste A/B entre o design atual e a nova proposta e acompanhar o bounce rate, taxa de cliques e o índice de satisfação

Colecionáveis em momento relevantes

Exibir o brinde colecionável na tela do produto vai aumentar o LTV

Grande uso de texto corridos

Atualmente o colecionável só aparecia na tela que exibia todos os colecionáveis que a pessoa já havia ganhado e perdíamos a oportunidade de exibir na tela do produto que a pessoa ganharia aquele brinde ao fazer a compra.