MORE BUZZ
Engajamento e adoção de usuários
APP
SAAS
B2B
B2C
Visão geral
Empresa
Grupo Asserth – More Buzz
Empresa
Grupo Asserth – More Buzz
Prazo
4 meses
Prazo
4 meses
Times envolvidos
Comercial, Marketing e Comunicação, Backend e Frontend
Times envolvidos
Comercial, Marketing e Comunicação, Backend e Frontend
Sobre a More Buzz
Especializada em ecossistemas para negócios, oferece por meio do seu aplicativo web uma solução completa para transformar indicações de produtos e serviços em vendas. O objetivo é criar novas oportunidades de divulgação e geração de receita para empresas ao conectar divulgadores, atendimento ao cliente e consumidores em uma mesma plataforma.
Sobre a More Buzz
Especializada em ecossistemas para negócios, oferece por meio do seu aplicativo web uma solução completa para transformar indicações de produtos e serviços em vendas. O objetivo é criar novas oportunidades de divulgação e geração de receita para empresas ao conectar divulgadores, atendimento ao cliente e consumidores em uma mesma plataforma.
Objetivo
Aumentar a adoção e o engajamento dos usuários no produto.
Objetivo
Aumentar a adoção e o engajamento dos usuários no produto.
Problema inicial
A experiência do usuário (UX) no aplicativo web apresentava problemas de arquitetura de informação e nomenclaturas que representavam um desafio para o aumento de adoção e engajamento dos usuários.
Problema inicial
A experiência do usuário (UX) no aplicativo web apresentava problemas de arquitetura de informação e nomenclaturas que representavam um desafio para o aumento de adoção e engajamento dos usuários.
Desafios
Responsividade
Adaptar a aplicação web para oferecer uma navegação consistente em diferentes tamanhos de tela.
Responsividade
Adaptar a aplicação web para oferecer uma navegação consistente em diferentes tamanhos de tela.
Aplicativo híbrido
Criar uma versão mobile para Android e iOS, mantendo a consistência com a experiência web.
Aplicativo híbrido
Criar uma versão mobile para Android e iOS, mantendo a consistência com a experiência web.
White label
Definir uma linguagem visual e textual neutra, flexível o suficiente para se adaptar a diferentes marcas.
White label
Definir uma linguagem visual e textual neutra, flexível o suficiente para se adaptar a diferentes marcas.
Padrão e consistência
Criar padrões de design para reduzir inconsistências, acelerar desenvolvimento e facilitar a evolução do produto.
Padrão e consistência
Criar padrões de design para reduzir inconsistências, acelerar desenvolvimento e facilitar a evolução do produto.
Usuário e negócio
Aproximar a solução das necessidades dos usuários, equilibrando usabilidade, contexto de uso e objetivos do negócio.
Usuário e negócio
Aproximar a solução das necessidades dos usuários, equilibrando usabilidade, contexto de uso e objetivos do negócio.
Service Blueprint
Para aprofundar o conhecimento sobre o negócio e entender como cada persona interage com ele, criei um Service Blueprint. Isso possibilitou compreender processos internos, promover alinhamento entre áreas e identificar oportunidades de melhoria. Esse mapeamento conectou a visão do usuário às operações do negócio, oferecendo clareza para orientar decisões de design.
Personas
A partir do Service Blueprint, identificamos quatro perfis de usuários principais que utilizam o web app da More Buzz.
A partir do Service Blueprint, identificamos quatro perfis de usuários principais que utilizam o web app da More Buzz.
Corporativo (B2B)
Dono do ecossistema, acompanha o lucro gerado pelas vendas de seus produtos e serviços que são indicados pelos divulgadores.
Corporativo (B2B)
Dono do ecossistema, acompanha o lucro gerado pelas vendas de seus produtos e serviços que são indicados pelos divulgadores.
Atendente
Apoia no atendimento de clientes que querem comprar produtos e serviços indicados pelos divulgadores usando a versão CRM.
Atendente
Apoia no atendimento de clientes que querem comprar produtos e serviços indicados pelos divulgadores usando a versão CRM.
Divulgador Comum
Indica produtos e serviços, mas não pode cadastrar outros divulgadores. Recebe recompensas em dinheiro apenas por suas próprias indicações.
Divulgador Comum
Indica produtos e serviços, mas não pode cadastrar outros divulgadores. Recebe recompensas em dinheiro apenas por suas próprias indicações.
Divulgador Pro
Indica produtos e serviços e pode cadastrar divulgadores comuns. Recebe recompensas em dinheiro por suas próprias indicações e também pelas indicações feitas por seus divulgadores.
Divulgador Pro
Indica produtos e serviços e pode cadastrar divulgadores comuns. Recebe recompensas em dinheiro por suas próprias indicações e também pelas indicações feitas por seus divulgadores.
Auditoria de UX
Após entender o negócio e as personas, mapeei e analisei detalhadamente as telas e fluxos do web app atual na visão de cada persona, com o objetivo de identificar problemas de usabilidade. Essa etapa foi essencial para mitigar riscos já conhecidos e descobrir novos problemas.
Mais de 60 problemas foram encontrados, sendo a maioria deles relacionados à hierarquia de informação e inconsistência.
Principais problemas encontrados
Principais problemas
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 13 23.684 L 13 11.842 M 15.6 6.579 C 18.472 6.579 20.8 8.935 20.8 11.842 L 20.8 15.789 C 20.8 20.15 17.308 23.684 13 23.684 C 8.692 23.684 5.2 20.15 5.2 15.789 L 5.2 11.842 C 5.2 8.935 7.528 6.579 10.4 6.579 Z M 15.756 2.474 L 18.2 0 M 24.7 25 C 24.703 22.188 22.522 19.87 19.747 19.737 M 24.7 3.947 C 24.697 6.623 22.711 8.87 20.085 9.171 M 26 14.474 L 20.8 14.474 M 1.3 25 C 1.297 22.188 3.478 19.87 6.253 19.737 M 1.3 3.947 C 1.303 6.623 3.289 8.87 5.915 9.171 M 5.2 14.474 L 0 14.474 M 7.8 0 L 10.244 2.474 M 9.1 6.75 L 9.1 5.263 C 9.1 3.083 10.846 1.316 13 1.316 C 15.154 1.316 16.9 3.083 16.9 5.263 L 16.9 6.75" fill="transparent" height="25.000001003867702px" id="tBfY_n1rb" transform="translate(7 8)" width="26.000001144409225px"><path d="M 7.8 23.684 L 7.8 11.842 M 10.4 6.579 C 13.272 6.579 15.6 8.935 15.6 11.842 L 15.6 15.789 C 15.6 20.15 12.108 23.684 7.8 23.684 C 3.492 23.684 0 20.15 0 15.789 L 0 11.842 C 0 8.935 2.328 6.579 5.2 6.579 Z M 10.556 2.474 L 13 0" fill="transparent" height="23.684210701992637px" id="fQVlUgxfl" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" stroke="rgb(194, 40, 32)" transform="translate(5.2 0)" width="15.599999999999909px"/><path d="M 24.7 25 C 24.703 22.188 22.522 19.87 19.747 19.737 M 24.7 3.947 C 24.697 6.623 22.711 8.87 20.085 9.171 M 26 14.474 L 20.8 14.474 M 1.3 25 C 1.297 22.188 3.478 19.87 6.253 19.737 M 1.3 3.947 C 1.303 6.623 3.289 8.87 5.915 9.171 M 5.2 14.474 L 0 14.474 M 7.8 0 L 10.244 2.474 M 9.1 6.75 L 9.1 5.263 C 9.1 3.083 10.846 1.316 13 1.316 C 15.154 1.316 16.9 3.083 16.9 5.263 L 16.9 6.75" fill="transparent" height="25.000001003867702px" id="jPFN9D6UH" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" stroke="rgb(194, 40, 32)" width="26.000001144409225px"/></g></svg>)
Textos confusos
Labels, botões e mensagens não comunicam com precisão o que o usuário deve fazer ou qual será o resultado da ação.
Textos confusos
Labels, botões e mensagens não comunicam com precisão o que o usuário deve fazer ou qual será o resultado da ação.
Arquitetura confusa
Informações importantes aparecem misturadas, escondidas ou distribuídas em estruturas pouco intuitivas.
Arquitetura confusa
Informações importantes aparecem misturadas, escondidas ou distribuídas em estruturas pouco intuitivas.
Hierarquia fraca
Algumas páginas não deixam claro onde o usuário está, qual é o objetivo da tela ou o que merece mais atenção.
Hierarquia fraca
Algumas páginas não deixam claro onde o usuário está, qual é o objetivo da tela ou o que merece mais atenção.
Interações inesperadas
Alguns componentes têm comportamentos inesperados, tornando a experiência menos previsível e mais sujeita a erros.
Interações inesperadas
Alguns componentes têm comportamentos inesperados, tornando a experiência menos previsível e mais sujeita a erros.
Informações escondidas
Dados importantes para decisão ou continuidade da jornada aparecem em segundo plano ou no momento errado.
Informações escondidas
Dados importantes para decisão ou continuidade da jornada aparecem em segundo plano ou no momento errado.
Fluxos complexos
Alguns fluxos exigem cliques desnecessários, escondem informações relevantes ou não oferecem feedback adequado.
Fluxos complexos
Alguns fluxos exigem cliques desnecessários, escondem informações relevantes ou não oferecem feedback adequado.
Benchmarking
Realizei uma análise de concorrentes para compreender boas práticas e oportunidades de diferenciação. O estudo revelou três aspectos importantes relacionados à autonomia, notificações e transparência das plataformas concorrentes.
Principais descobertas
Autonomia
Concorrentes permitem configurar programas de indicação e personalizar mensagens.
Autonomia
Concorrentes permitem configurar programas de indicação e personalizar mensagens.
Notificações
Sistemas robustos de notificação aumentam engajamento e reduzem churn.
Notificações
Sistemas robustos de notificação aumentam engajamento e reduzem churn.
Transparência
Indicações são atualizadas em tempo real, gerando confiança e engajamento.
Transparência
Indicações são atualizadas em tempo real, gerando confiança e engajamento.
Protótipo
Após consolidar os aprendizados sobre negócio, usuários, aplicativo atual e mercado, iniciei o planejamento da solução criando um protótipo em baixa fidelidade do web app. Para isso, liderei sessões de cocriação com diferentes especialidades, o que me permitiu considerar as necessidades e regras do negócio, alinhar a comunicação à identidade da marca e respeitar limitações técnicas de backend e frontend.
Foram investidas mais de 60 horas na construção de wireframes em baixa fidelidade, garantindo que a nova versão do produto resolvesse os problemas identificados nas etapas anteriores.
Teste de Usabilidade
Após o protótipo da nova versão ser validado internamente, conduzi 5 testes remoto e moderado com usuários reais para avaliar a usabilidade.
Concluímos que a nova versão do produto se mostrou sólida, mas ajustes pontuais em nomenclaturas, arquitetura da informação e visibilidade de elementos-chave foram considerados essenciais para tornar a experiência mais intuitiva e alinhada ao modelo mental dos usuários.
Comentários dos usuários
Senti dificuldade com os status dos negócios, com o status Novo.
Senti dificuldade com os status dos negócios, com o status Novo.
O link de captação de divulgadores poderia estar mais fácil, por exemplo na tela inicial.
O link de captação de divulgadores poderia estar mais fácil, por exemplo na tela inicial.
Achei um pouco confuso. Algumas partes não são tão fáceis de entender.
Achei um pouco confuso. Algumas partes não são tão fáceis de entender.
Guia de Estilo
Criei um guia de estilo com os elementos visuais primários do produto. O guia estabeleceu uma base visual padronizada para a criação do design de interface, garantindo consistência e escalabilidade desde o início do planejamento de design até o desenvolvimento.
Cores
Preto
Preto
cor da marca
Usado como base neutra da interface, trazendo estrutura, legibilidade e equilíbrio visual.
Amarelo
Amarelo
cor da marca
Destaca as ações primárias da interface e direciona a atenção do usuário para os principais pontos de interação.
Erro
Erro
cor semântica
Indica falhas, problemas ou ações que exigem correção.
Atenção
Atenção
cor semântica
Sinaliza situações que exigem cuidado antes de continuar.
Informativo
Informativo
cor semântica
Comunica orientações, atualizações ou mensagens neutras de apoio.
Sucesso
Sucesso
cor semântica
Usada para confirmar que uma ação foi concluída corretamente.
Biblioteca de componentes escaláveis, responsivos
e consistentes
Biblioteca de componentes escaláveis, responsivos e consistentes
Utilizando os elementos visuais primários do guia de estilo, criei componentes mais complexos e reutilizáveis que aceleraram o desenvolvimento e garantiram consistência visual. Essa etapa também reforçou a escalabilidade do produto, tornando futuras evoluções mais ágeis.
Toast
Mensagem breve e temporária usada para confirmar ações, informar mudanças de estado ou alertar o usuário sem interromper sua jornada.
Status
Positivo
Mensagem positiva
Banner
Componente de destaque usado para comunicar informações importantes, avisos ou oportunidades dentro do contexto da tela.
Status
Positivo
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Toast
Mensagem breve e temporária usada para confirmar ações, informar mudanças de estado ou alertar o usuário sem interromper sua jornada.
Status
Positivo
Mensagem positiva
Banner
Componente de destaque usado para comunicar informações importantes, avisos ou oportunidades dentro do contexto da tela.
Status
Positivo
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Botão
Elemento de ação que orienta o usuário sobre o próximo passo, como confirmar, continuar, salvar, cancelar ou iniciar uma tarefa.
Variação
Label
Clique aqui
GRANDE
Clique aqui
MÉDIO
Clique aqui
PEQUENO
Badge
Usado para destacar status, categorias, notificações ou informações complementares, ajudando o usuário a identificar estados importantes.
Status
Notificação
Label
GRANDE
Label
MÉDIO
Label
PEQUENO
MÍNIMO
Botão
Elemento de ação que orienta o usuário sobre o próximo passo, como confirmar, continuar, salvar, cancelar ou iniciar uma tarefa.
Variação
Label
Clique aqui
GRANDE
Clique aqui
MÉDIO
Clique aqui
PEQUENO
Badge
Usado para destacar status, categorias, notificações ou informações complementares, ajudando o usuário a identificar estados importantes.
Status
Notificação
Label
GRANDE
Label
MÉDIO
Label
PEQUENO
MÍNIMO
Navigation bar
Estrutura de navegação que organiza os principais destinos do app, permitindo que o usuário se mova com clareza entre áreas importantes da experiência.
Dispositivo
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z M 20 25.208 C 21.441 25.208 22.669 24.7 23.685 23.685 C 24.7 22.669 25.208 21.441 25.208 20 C 25.208 18.559 24.7 17.331 23.685 16.315 C 22.669 15.299 21.441 14.792 20 14.792 C 18.559 14.792 17.331 15.299 16.315 16.315 C 15.299 17.331 14.792 18.559 14.792 20 C 14.792 21.441 15.299 22.669 16.315 23.685 C 17.331 24.7 18.559 25.208 20 25.208 Z M 20 30.417 C 18.559 30.417 17.205 30.143 15.937 29.596 C 14.67 29.049 13.568 28.307 12.63 27.37 C 11.693 26.432 10.95 25.33 10.403 24.062 C 9.857 22.795 9.583 21.441 9.583 20 C 9.583 18.559 9.857 17.205 10.403 15.937 C 10.95 14.67 11.693 13.568 12.63 12.63 C 13.568 11.693 14.67 10.95 15.937 10.403 C 17.205 9.857 18.559 9.583 20 9.583 C 21.441 9.583 22.795 9.857 24.062 10.403 C 25.33 10.95 26.432 11.693 27.37 12.63 C 28.307 13.568 29.049 14.67 29.596 15.937 C 30.143 17.205 30.417 18.559 30.417 20 C 30.417 21.441 30.143 22.795 29.596 24.062 C 29.049 25.33 28.307 26.432 27.37 27.37 C 26.432 28.307 25.33 29.049 24.062 29.596 C 22.795 30.143 21.441 30.417 20 30.417 Z M 20 28.333 C 22.326 28.333 24.297 27.526 25.911 25.911 C 27.526 24.297 28.333 22.326 28.333 20 C 28.333 17.673 27.526 15.703 25.911 14.088 C 24.297 12.474 22.326 11.666 20 11.666 C 17.673 11.666 15.703 12.474 14.088 14.088 C 12.474 15.703 11.666 17.673 11.666 20 C 11.666 22.326 12.474 24.297 14.088 25.911 C 15.703 27.526 17.673 28.333 20 28.333 Z" fill="transparent" height="40px" id="lytMw13Cl" width="40px"><path d="M 0 20 C 0 8.954 8.954 0 20 0 C 31.046 0 40 8.954 40 20 C 40 31.046 31.046 40 20 40 C 8.954 40 0 31.046 0 20 Z" fill="transparent" height="40px" id="s4s4aG2zE" width="40px"/><path d="M 10.417 15.625 C 11.858 15.625 13.086 15.117 14.102 14.102 C 15.117 13.086 15.625 11.858 15.625 10.417 C 15.625 8.976 15.117 7.747 14.102 6.732 C 13.086 5.716 11.858 5.208 10.417 5.208 C 8.976 5.208 7.747 5.716 6.732 6.732 C 5.716 7.747 5.208 8.976 5.208 10.417 C 5.208 11.858 5.716 13.086 6.732 14.102 C 7.747 15.117 8.976 15.625 10.417 15.625 Z M 10.417 20.833 C 8.976 20.833 7.621 20.56 6.354 20.013 C 5.087 19.466 3.984 18.724 3.047 17.787 C 2.109 16.849 1.367 15.747 0.82 14.479 C 0.273 13.212 0 11.858 0 10.417 C 0 8.976 0.273 7.622 0.82 6.354 C 1.367 5.087 2.109 3.984 3.047 3.047 C 3.984 2.109 5.087 1.367 6.354 0.82 C 7.621 0.273 8.976 0 10.417 0 C 11.858 0 13.212 0.273 14.479 0.82 C 15.746 1.367 16.849 2.109 17.786 3.047 C 18.724 3.984 19.466 5.087 20.013 6.354 C 20.56 7.622 20.833 8.976 20.833 10.417 C 20.833 11.858 20.56 13.212 20.013 14.479 C 19.466 15.747 18.724 16.849 17.786 17.787 C 16.849 18.724 15.746 19.466 14.479 20.013 C 13.212 20.56 11.858 20.833 10.417 20.833 Z M 10.417 18.75 C 12.743 18.75 14.713 17.943 16.328 16.328 C 17.943 14.713 18.75 12.743 18.75 10.417 C 18.75 8.09 17.943 6.12 16.328 4.505 C 14.713 2.891 12.743 2.083 10.417 2.083 C 8.09 2.083 6.12 2.891 4.505 4.505 C 2.891 6.12 2.083 8.09 2.083 10.417 C 2.083 12.743 2.891 14.713 4.505 16.328 C 6.12 17.943 8.09 18.75 10.417 18.75 Z" fill="rgb(7, 144, 255)" height="20.833375000000004px" id="uFangEaQL" transform="translate(9.583 9.583)" width="20.83337499999999px"/></g></svg>)
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 23.111 24.889 L 32 16 L 23.111 7.111 M 32 16 L 10.667 16 M 10.667 32 L 3.556 32 C 1.592 32 0 30.408 0 28.444 L 0 3.556 C 0 1.592 1.592 0 3.556 0 L 10.667 0" fill="transparent" height="32px" id="O8_8yxu8L" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.33" stroke="rgb(194, 40, 32)" transform="translate(4 4)" width="32.000001483493406px"/></svg>)
Sair
Navigation bar
Estrutura de navegação que organiza os principais destinos do app, permitindo que o usuário se mova com clareza entre áreas importantes da experiência.
Dispositivo
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
Sair
Resultados
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 13.333 0 L 3.333 0 C 1.492 0 0 1.492 0 3.333 L 0 20 C 0 21.841 1.492 23.333 3.333 23.333 L 13.333 23.333 C 15.174 23.333 16.667 21.841 16.667 20 L 16.667 3.333 C 16.667 1.492 15.174 0 13.333 0 Z" fill="transparent" height="23.33337142857143px" id="W8Ff_vW1Q" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(5 13.337)" width="16.666714285714274px"/><path d="M 0 3.333 C 0 2.449 0.351 1.601 0.976 0.976 C 1.601 0.351 2.449 0 3.333 0 L 23.333 0 C 24.217 0 25.065 0.351 25.69 0.976 C 26.315 1.601 26.667 2.449 26.667 3.333 L 26.667 30 C 26.667 30.884 26.315 31.732 25.69 32.357 C 25.065 32.982 24.217 33.333 23.333 33.333 L 19.333 33.333" fill="transparent" height="33.333371428571425px" id="eWBBEVlhU" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(8.328 3.337)" width="26.666599999999953px"/><path d="M 0 0 L 0.017 0" fill="transparent" height="1px" id="viXPxUcla" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(13.328 30)" width="1px"/></svg>)
Responsividade
A experiência foi adaptada para mobile sem perder a consistência com o ambiente web.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 0 33.333 L 23.333 33.333 C 24.217 33.333 25.065 32.982 25.69 32.357 C 26.315 31.732 26.667 30.884 26.667 30 L 26.667 8.333 L 18.333 0 L 3.333 0 C 2.449 0 1.601 0.351 0.976 0.976 C 0.351 1.601 0 2.449 0 3.333 L 0 10" fill="transparent" height="33.333371428571425px" id="ZcNmzXyMv" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(6.672 3.337)" width="26.66672857142853px"/><path d="M 0 0 L 0 6.667 C 0 7.551 0.351 8.399 0.976 9.024 C 1.601 9.649 2.449 10 3.333 10 L 10 10" fill="transparent" height="10px" id="sdLa4WDbh" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(23.328 3.337)" width="10.000000000000004px"/><path d="M 0 3.333 L 3.333 6.667 L 10 0" fill="transparent" height="6.666571428571434px" id="Wfvq4VyLJ" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(5 21.663)" width="10px"/></svg>)
White label
O produto foi reconstruído com uma linguagem visual e textual neutra para viabilizar o uso por outras marcas.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 3.333 10.893 L 3.333 6.667 C 3.333 4.899 4.036 3.203 5.286 1.953 C 6.536 0.702 8.232 0 10 0 L 12.5 0 C 12.721 0 12.933 0.088 13.089 0.244 C 13.246 0.4 13.333 0.612 13.333 0.833 L 13.333 3.333 C 13.333 5.101 12.631 6.797 11.381 8.047 C 10.13 9.298 8.435 10 6.667 10 C 4.899 10 3.203 10.702 1.953 11.953 C 0.702 13.203 0 14.899 0 16.667 C 0 20 1.667 21.667 1.667 25 C 1.667 26.803 1.082 28.558 0 30" fill="transparent" height="30px" id="vOfCHB9Nv" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(20 5)" width="13.33328571428573px"/><path d="M 0 1.667 C 1.238 0.738 2.71 0.173 4.252 0.034 C 5.793 -0.105 7.343 0.188 8.727 0.88 C 10.111 1.572 11.275 2.636 12.089 3.952 C 12.902 5.269 13.333 6.786 13.333 8.333 C 12.095 9.262 10.623 9.827 9.082 9.966 C 7.54 10.105 5.991 9.812 4.607 9.12 C 3.222 8.428 2.058 7.364 1.245 6.048 C 0.431 4.731 0 3.214 0 1.667 Z" fill="transparent" height="10.000058285943764px" id="YR4gsRj8U" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(6.672 13.337)" width="13.333299999999978px"/><path d="M 0 0 L 23.333 0" fill="transparent" height="1px" id="RYyMfktGE" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(8.328 35)" width="23.33327142857148px"/></svg>)
Consistência escalável
O guia de estilo e os componentes criaram uma base de design que facilita a manutenção e evolução futura.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><path d="M 23.333 10 L 23.333 6.667 C 23.333 4.899 22.631 3.203 21.381 1.953 C 20.13 0.702 18.435 0 16.667 0 L 6.667 0 C 4.899 0 3.203 0.702 1.953 1.953 C 0.702 3.203 0 4.899 0 6.667 L 0 10" fill="transparent" height="10px" id="NNWOtH2TN" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(3.328 25)" width="23.33327142857148px"/><path d="M 0 0 C 1.43 0.371 2.696 1.205 3.599 2.373 C 4.503 3.541 4.994 4.976 4.994 6.453 C 4.994 7.93 4.503 9.365 3.599 10.533 C 2.696 11.701 1.43 12.536 0 12.907" fill="transparent" height="12.906657142857142px" id="a0GeKo9VD" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(26.672 5.218)" width="4.9937142857142405px"/><path d="M 5 9.783 L 5 6.45 C 4.999 4.973 4.507 3.538 3.602 2.371 C 2.697 1.203 1.43 0.369 0 0" fill="transparent" height="9.783428571428573px" id="PN9IBkizY" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(31.672 25.218)" width="5.0000000000000036px"/><path d="M 6.667 13.333 C 10.349 13.333 13.333 10.349 13.333 6.667 C 13.333 2.985 10.349 0 6.667 0 C 2.985 0 0 2.985 0 6.667 C 0 10.349 2.985 13.333 6.667 13.333 Z" fill="transparent" height="13.333285714285715px" id="qotDcFucS" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.86" stroke="rgb(13, 150, 88)" transform="translate(8.328 5)" width="13.333271428571477px"/></svg>)
Usuário no centro
Os testes revelaram necessidades e expectativas, tornando o produto mais alinhado ao modelo mental dos usuários.
Engajamento e adoção
As novas mudanças favoreceram o aumento, engajamento e adoção dos usuários no produto.
Voltar para início
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g d="M 9.98 10.977 L 9.98 1.996 L 0.998 1.996 C 0.447 1.996 0 1.549 0 0.998 C 0 0.447 0.447 0 0.998 0 L 10.977 0 C 11.529 0 11.975 0.447 11.975 0.998 L 11.975 10.977 C 11.975 11.529 11.529 11.975 10.977 11.975 C 10.426 11.975 9.98 11.529 9.98 10.977 Z M 10.284 0.305 C 10.535 0.045 10.906 -0.059 11.255 0.033 C 11.604 0.124 11.876 0.396 11.967 0.745 C 12.059 1.094 11.955 1.465 11.695 1.716 L 1.716 11.695 C 1.465 11.955 1.094 12.059 0.745 11.967 C 0.396 11.876 0.124 11.604 0.033 11.255 C -0.059 10.906 0.045 10.535 0.305 10.284 Z" fill="transparent" height="12px" id="TVZCt2ODY" transform="translate(5 5)" width="12px"><path d="M 9.98 10.977 L 9.98 1.996 L 0.998 1.996 C 0.447 1.996 0 1.549 0 0.998 C 0 0.447 0.447 0 0.998 0 L 10.977 0 C 11.529 0 11.975 0.447 11.975 0.998 L 11.975 10.977 C 11.975 11.529 11.529 11.975 10.977 11.975 C 10.426 11.975 9.98 11.529 9.98 10.977 Z" fill="rgb(255, 255, 255)" height="11.975424446415929px" id="TAkCTIb4j" width="11.975424446416127px"/><path d="M 10.284 0.305 C 10.535 0.045 10.906 -0.059 11.255 0.033 C 11.604 0.124 11.876 0.396 11.967 0.745 C 12.059 1.094 11.955 1.465 11.695 1.716 L 1.716 11.695 C 1.465 11.955 1.094 12.059 0.745 11.967 C 0.396 11.876 0.124 11.604 0.033 11.255 C -0.059 10.906 0.045 10.535 0.305 10.284 Z" fill="rgb(255, 255, 255)" height="12px" id="meAnXRyQ2" width="12px"/></g></svg>)
MORE BUZZ
Engajamento e adoção de usuários
APP
SAAS
B2B
B2C
Visão geral
Empresa
Grupo Asserth – More Buzz
Prazo
4 meses
Times envolvidos
Comercial, Marketing e Comunicação, Backend e Frontend
Sobre a More Buzz
Especializada em ecossistemas para negócios, oferece por meio do seu aplicativo web uma solução completa para transformar indicações de produtos e serviços em vendas. O objetivo é criar novas oportunidades de divulgação e geração de receita para empresas ao conectar divulgadores, atendimento ao cliente e consumidores em uma mesma plataforma.
Aumentar a adoção e o engajamento dos usuários no produto.
Objetivo
Problema inicial
A experiência do usuário (UX) no aplicativo web apresentava problemas de arquitetura de informação e nomenclaturas que representavam um desafio para o aumento de adoção e engajamento dos usuários.
Desafios
Responsividade
Adaptar a aplicação web para oferecer uma navegação consistente em diferentes tamanhos de tela.
Aplicativo híbrido
Criar uma versão mobile para Android e iOS, mantendo a consistência com a experiência web.
White label
Definir uma linguagem visual e textual neutra, flexível o suficiente para se adaptar a diferentes marcas.
Responsividade
Criar padrões de design para reduzir inconsistências, acelerar desenvolvimento e facilitar a evolução do produto.
Aplicativo híbrido
Aproximar a solução das necessidades dos usuários, equilibrando usabilidade, contexto de uso e objetivos do negócio.
Service Blueprint
Para aprofundar o conhecimento sobre o negócio e entender como cada persona interage com ele, criei um Service Blueprint. Isso possibilitou compreender processos internos, promover alinhamento entre áreas e identificar oportunidades de melhoria. Esse mapeamento conectou a visão do usuário às operações do negócio, oferecendo clareza para orientar decisões de design.
Personas
A partir do Service Blueprint, identificamos quatro perfis de usuários principais que utilizam o web app da More Buzz.
Corporativo (B2B)
Dono do ecossistema, acompanha o lucro gerado pelas vendas de seus produtos e serviços que são indicados pelos divulgadores.
Atendente
Apoia no atendimento de clientes que querem comprar produtos e serviços indicados pelos divulgadores usando a versão CRM.
Divulgador Comum
Indica produtos e serviços, mas não pode cadastrar outros divulgadores. Recebe recompensas em dinheiro apenas por suas próprias indicações.
Divulgador Pro
Indica produtos e serviços e pode cadastrar divulgadores comuns. Recebe recompensas em dinheiro por suas próprias indicações e também pelas indicações feitas por seus divulgadores.
Auditoria de UX
Após entender o negócio e as personas, mapeei e analisei detalhadamente as telas e fluxos do web app atual na visão de cada persona, com o objetivo de identificar problemas de usabilidade. Essa etapa foi essencial para mitigar riscos já conhecidos e descobrir novos problemas.
Mais de 60 problemas foram encontrados, sendo a maioria deles relacionados à hierarquia de informação e inconsistência.
Principais problemas
Textos confusos
Labels, botões e mensagens não comunicam com precisão o que o usuário deve fazer ou qual será o resultado da ação.
Arquitetura confusa
Informações importantes aparecem misturadas, escondidas ou distribuídas em estruturas pouco intuitivas.
Hierarquia fraca
Algumas páginas não deixam claro onde o usuário está, qual é o objetivo da tela ou o que merece mais atenção.
Interações inesperadas
Alguns componentes têm comportamentos inesperados, tornando a experiência menos previsível e mais sujeita a erros.
Informações escondidas
Dados importantes para decisão ou continuidade da jornada aparecem em segundo plano ou no momento errado.
Fluxos complexos
Alguns fluxos exigem cliques desnecessários, escondem informações relevantes ou não oferecem feedback adequado.
Benchmarking
Realizei uma análise de concorrentes para compreender boas práticas e oportunidades de diferenciação. O estudo revelou três aspectos importantes relacionados à autonomia, notificações e transparência das plataformas concorrentes.
Principais descobertas
Autonomia
Concorrentes permitem configurar programas de indicação e personalizar mensagens.
Notificações
Sistemas robustos de notificação aumentam engajamento e reduzem churn.
Transparência
Indicações são atualizadas em tempo real, gerando confiança e engajamento.
Protótipo
Após consolidar os aprendizados sobre negócio, usuários, aplicativo atual e mercado, iniciei o planejamento da solução criando um protótipo em baixa fidelidade do web app. Para isso, liderei sessões de cocriação com diferentes especialidades, o que me permitiu considerar as necessidades e regras do negócio, alinhar a comunicação à identidade da marca e respeitar limitações técnicas de backend e frontend.
Foram investidas mais de 60 horas na construção de wireframes em baixa fidelidade, garantindo que a nova versão do produto resolvesse os problemas identificados nas etapas anteriores.
Teste de Usabilidade
Após o protótipo da nova versão ser validado internamente, conduzi 5 testes remoto e moderado com usuários reais para avaliar a usabilidade.
Concluímos que a nova versão do produto se mostrou sólida, mas ajustes pontuais em nomenclaturas, arquitetura da informação e visibilidade de elementos-chave foram considerados essenciais para tornar a experiência mais intuitiva e alinhada ao modelo mental dos usuários.
Comentários dos usuários
Senti dificuldade com os status dos negócios, com o status Novo.
O link de captação de divulgadores poderia estar mais fácil, por exemplo na tela inicial.
Achei um pouco confuso. Algumas partes não são tão fáceis de entender.
Guia de Estilo
Criei um guia de estilo com os elementos visuais primários do produto. O guia estabeleceu uma base visual padronizada para a criação do design de interface, garantindo consistência e escalabilidade desde o início do planejamento de design até o desenvolvimento.
Preto
cor da marca
Usado como base neutra da interface, trazendo estrutura, legibilidade e equilíbrio visual.
Amarelo
cor da marca
Destaca as ações primárias da interface e direciona a atenção do usuário para os principais pontos de interação.
Erro
cor semântica
Indica falhas, problemas ou ações que exigem correção.
Atenção
cor semântica
Sinaliza situações que exigem cuidado antes de continuar.
Informativo
cor semântica
Comunica orientações, atualizações ou mensagens neutras de apoio.
Sucesso
cor semântica
Usada para confirmar que uma ação foi concluída corretamente.
Biblioteca de componentes escaláveis, responsivos e consistentes
Utilizando os elementos visuais primários do guia de estilo, criei componentes mais complexos e reutilizáveis que aceleraram o desenvolvimento e garantiram consistência visual. Essa etapa também reforçou a escalabilidade do produto, tornando futuras evoluções mais ágeis.
Toast
Mensagem breve e temporária usada para confirmar ações, informar mudanças de estado ou alertar o usuário sem interromper sua jornada.
Status
Positivo
Mensagem positiva
Banner
Componente de destaque usado para comunicar informações importantes, avisos ou oportunidades dentro do contexto da tela.
Status
Positivo
Título
Mensagem que confirma uma ação bem-sucedida ou destaca uma informação favorável para o usuário.
Label da ação
Botão
Elemento de ação que orienta o usuário sobre o próximo passo, como confirmar, continuar, salvar, cancelar ou iniciar uma tarefa.
Variação
Label
Clique aqui
GRANDE
Clique aqui
MÉDIO
Clique aqui
PEQUENO
Badge
Usado para destacar status, categorias, notificações ou informações complementares, ajudando o usuário a identificar estados importantes.
Status
Notificação
Label
GRANDE
Label
MÉDIO
Label
PEQUENO
MÍNIMO
Navigation bar
Estrutura de navegação que organiza os principais destinos do app, permitindo que o usuário se mova com clareza entre áreas importantes da experiência.
Dispositivo
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
Sair
Resultados
Responsividade
A experiência foi adaptada para mobile sem perder a consistência com o ambiente web.
White label
O produto foi reconstruído com uma linguagem visual e textual neutra para viabilizar o uso por outras marcas.
Consistência escalável
O guia de estilo e os componentes criaram uma base de design que facilita a manutenção e evolução futura.
Usuário no centro
Os testes revelaram necessidades e expectativas, tornando o produto mais alinhado ao modelo mental dos usuários.
Engajamento e adoção
As novas mudanças favoreceram o aumento, engajamento e adoção dos usuários no produto.