EasyLaser
UI/UX | Estudo de caso | 2023
Problema
Empresa relatou que os usuários estavam com muitos problemas em realizar agendamentos online, o que acabava levando a desistência e os usuários relataram que a página de produtos é muito confusa.

O projeto é uma prática com cliente real realizada pelo curso da Design Circuit, tendo sessões de design critique semanais em grupo, todas as atividades aqui descritas foram realizadas de forma individual.
Minhas contribuições
• Desk Research
• Surveys
• Análise de competidores
• Análise de Heurísticas
• Journey Map
• User Flow
• Arquitetura da informação
• Wireframe
• HMW's
• Teste de usabilidade
• UI design (mobile e desktop)
Sobre a EasyLaser
A EasyLaser é uma empresa especializada em tratamentos estéticos a laser. Seu produto principal é a depilação a laser, também oferta outros tipos de procedimentos estéticos a laser.

Hoje a empresa está localizada no estado do Rio de Janeiro, possuindo duas unidades e com opções de franquias.
Processo
Descobrir
• Desk Research
• Análise de competidores
• Survey
• Teste de Usabilidade
Definir
• Análise de Heurísticas
• Journey Map
• User Flow
Desenvolver
• Card Sorting
• Wireframe
Entregar
• UI Design
• Teste de Usabilidade
Desk Research
Primeiramente eu precisava entender como era setor e como funcionava a comercialização do mundo da estética nos meios digitais e após levantar mais dados referentes ao mercado em que nosso cliente está. Além de compreender os problemas enfrentados pelos clientes, tanto na própria EasyLaser quanto em seus concorrentes.
Aumento de 13,5% do setor no primeiro trimestre de 2022
Clientes agora buscam maior PRATICIDADE e COMODIDADE
Busca por depilação a laser aumentou 22% em 2022
Feedback dos clientes destacavam a quebra da no pós-tratamento.
Alguns highlights levantados durante a Desk Research
Análise de Competidores
Após entender o mercado onde o cliente estava inserido fiz uma análise dos produtos oferecidos pelos competidores para entender como se comportavam e ofertavam seus produtos, O objetivo era de identificar funcionalidades, falhas e processos que possam oferecer uma oportunidade para nosso produto.
Dúvidas frenquentes disponíveis na HOME
Detalhes dos procedimentos
Oferta de outros produtos na página
Especificações do tratamento
FAQ com todas as dúvidas e explicações sobre o tratamento
Número de sessões visível
Alguns insights levantados durante a análise de competidores
Survey
A partir dos dados levantados na análise foram elaboradas perguntas para entender melhor as hipóteses de atritos que os usuários possuem na hora de buscar e adquirir procedimentos a laser online.

Número de entrevistados: 11
Público: Pessoa que fizeram tratamentos a laser ou que não fizeram mas tem interesse.
Plataforma: SurveyMonkey
“Medo de queimaduras, irritações e alergias”
“Poucas informações sobre o tratamento”
“Falta de segurança e demora em adquirir os serviços”
“Demora na comunicação.”
"NÃO OBTIVE O RESULTADO DESEJADO"
"Falta de disponibilidade na agenda e bugs em aplicativos"
Algumas respostas recolhidas na Survey
Teste de Usabilidade
Após as pesquisas com usuários, era hora de identificar os problemas de navegação dentro da EASYLASER. Foram propostos cenários para os usuários realizarem dentro da plataforma atual da empresa, para encontrar falhas e possíveis melhorias.
Resultados
• Usuários ficam confusos ao fluxo do site.
• Tiveram
dificuldade em encontrar um tratamento que desejava.
• Destacaram
a falta de contra-indicações.
• Sentiram falta da barra de pesquisa.
• Destacaram que o botão de agendamento via WhatsApp estava muito escondido.
• Maioria dos usuários se sentiu
confuso.
• Relataram
dificuldades em entrar na página do serviço.
• Dificuldade em encontrar depilação para áreas específicas.
Não encontraram forma de adquirir combos.
• Impossibilidade de adquirir sessões individuais.
• Dificuldades em acessar o preço dos serviços.
• Página de tratamentos confusa.
• Usuários se sentiram inseguros em relação ao checkout.
• Sentiram falta de uma página de revisão da compra para em sequência finalizar a compra.
• Sentiram o site lento.
Análise de Heurísticas
Após o teste de usabilidade foi realizei uma priorização MOSCOW e depois foi realizada uma análise dentro do site da empresa para encontrar falhas de heurísticas e quantificá-las em escala, em paralelo, foi realizada outra análise em um dos maiores players do mercado global.

- Clínica escolhida: Ever/Body - Eleita por blogs do segmento como a melhor atmosfera oferecida aos clientes.
- Localizada em Manhattan - NY
- Foram utilizados os mesmo cenários atribuídos nos testes de usabilidade.

Feita a análise foram propostas possíveis soluções para as falhas de heurísticas encontradas dentro do site da EasyLaser:
Criar página com todos os tratamentos e detalhes dos tratamentos
Padronizar botões e melhorar hierarquia
Adicionar opção no menu e criar uma página com todas as duvidas e não apenas um arquivo pdf.
Padronizar nomeclatura das seções
Criar página de detalhamento e só após isso direcionar para o checkout
Automatizar o agendamento de avaliações
Algumas possibilidades de resolução das falhas encontradas
Customer Journey
Após as heurísticas era hora de identificar pontos de atritos dos usuários durante a navegação no nosso produto, foi criado um ator baseado nas respostas e dados levantados dentro das entrevistas e testes de usabilidade realizados.

Cenário: Paola está incomodada com a frequência que precisa se depilar com cera e ficou sabendo dos resultados que a depilação a laser pode proporcionar;

Expectativa:
Encontrar informações sobre cada procedimento.
Entender os prós e contras de cada procedimento.
Gostaria de encontrar procedimentos específicos com facilidade.
Realizar tudo sozinha dentro do site.

A maioria dos atritos foi identificas a partir da segunda etapa, as possíveis oportunidades anotadas foram:
-
Criar campo de busca dentro do site
- Criar filtros de buscas e segmentar por partes do corpo
- Criar uma página com cada procedimento
- Adicionar informações e dados sobre o tratamento
- Fotos de antes e depoisCriar opção de carrinho de compras
- Adicionar plugins de booking online
- Revisar fluxo ofertando a compra após a seleção do número de sessões
- Criar disclamer para redirecionamento de página
- Automatizar mensagens no WhatsApp com confirmação do agendamento e lembretes
- Campo de contra-indicações
- Campo com antes e depois com exemplo de cada tratamento
- Ofertar as sessões individuais
- Ofertas para pacotes dentro da mesma página
Affinity Mapping
Após levantar todos os pain points que nossos usuários enfrentavam, eu precisava reunir as informações para definir possíveis soluções para os problemas levantados, por isso juntei todos os insights realizados durante todas as técnicas aplicadas, assimilei por afinidade.
Soluções encontradas
Uma nova plataforma, com novas features e que após sintetização e priorização, foi entregue ofertando soluções para todas as dores encontradas durante as etapas do discovery. Uma plataforma clean, responsiva e direta, com novas oportunidades para os usuários, um novo fluxo e um layout totalmente renovado, preservando a essência da marca e sua qualidade.
Agendamento Online
Por que sempre utilizar o WhatsApp para agendar a sua avaliação? Criado um novo processo de agendamento pós-compra, aonde o usuário escolhe e garante a sua avaliação
Facilidade na busca
Campo de busca, navbar reformulada e também página de produtos categorizada e com opções de filtros.
Nova categorização
Uma nova categorização criada por usuários que já utilizam plataformas online para agendamento de sessões em tratamentos e procedimentos estéticos.
Chat integrado e muito mais!
Chatbot, depoimento de usuários, tags promocionais, carrinho de compras, categoria de mais vendidos, opção de montar combos, etc.
User Flow
Após entender todos os problemas e recolher todas as informações, era hora de criar um User Flow para o website, alguns comentários foram resgatados da pesquisa para auxiliar na criação do novo fluxo.
Nova categorização
Foi realizado um card sorting com os usuários para recolher similaridades nas escolhas para a proposta da nova categorização do site. Após análise foi proposta a seguinte categorização:
Wireframing
Após nova categorização foram desenvolvidos rodadas de Crazy 8’s, Sketchs e após definição foram desenvolvidas as telas em média fidelidade:
Em seguida foi respeitada a identidade do cliente e criada uma paleta de cores que pudesse integrar e harmonizar junto a cor principal da empresa. Além de uma nova proposta tipográfica, novos elementos visuais que pudessem compor os layouts.
Cores
Mantida os dois azuis característicos da EasyLaser, foram criadas variações:
Tipografia
Nova proposta tipográfica, Montserrat para títulos e a família Inter para textos e captions.
Icones
Novos ícones para facilitar a comunicação com os usuários, alguns desenvolvidos para o cliente e outros utilizados da biblioteca do BootStrap.
UI final
Para o protótipo em alta fidelidade, desdobrar todas as telas e propor uma nova rodada de testes com os usuários para identificar novos atritos e propor novas soluções.
Clique e acesse os protótipos:
Protótipo MobileProtótipo Desktop
Teste de Usabilidade
Alguns pontos levantados no novo teste: As mudanças propostas resolveram a maioria dos pontos de atritos encontrados no primeiro teste de usabilidade. Outros pontos foram levantados pelos usuários com oportunidades de melhorias dentro das novas opções apresentadas. Todas as funções novas criadas foram localizadas pelos usuários. Usuários notaram a diferença entre o antes e depois, notaram a melhoria.
Próximos passos
Análisar, sintetizar e priorizar os pontos apontados pelos usuários no último teste de usabilidade feito, buscar aplicar os novos conhecimentos adquiridos.
Aprendizados
Documentar o processo foi de extrema importância, se tratando de um processo iterativo, aonde pude retornar várias vezes o processo e consultar passos anteriores e adaptar os próximos passos.
Novas ferramentas experimentadas aumentando a caixa de ferramenta e expandindo suas aplicações
Consultas em documentações de Frameworks como: Bootstrap, Material Design e Human Centred Design facilitaram o entendimento de patterns, espaçamento e também enriquecem o conhecimento sobre UI e padrões de desdobramento.
Obrigado ;D