MORE BUZZ
User engagement and adoption
APP
SAAS
B2B
B2C
Overview
Company
Grupo Asserth – More Buzz
Time
4 months
Teams
Commercial, Marketing, Backend e Frontend
Company
Grupo Asserth – More Buzz
Time
4 months
Teams
Commercial, Marketing, Backend e Frontend
About More Buzz
Specialized in business ecosystems, it offers through its web application a complete solution to transform product and service indications into sales. The goal is to create new opportunities for dissemination and revenue generation for companies by connecting promoters, customer service and consumers on the same platform.
Goal
Increase user adoption and engagement on the product.
Initial problem
The user experience (UX) in the web application presented information architecture and naming problems that posed a challenge to increasing user adoption and engagement.
About More Buzz
Specialized in business ecosystems, it offers through its web application a complete solution to transform product and service indications into sales. The goal is to create new opportunities for dissemination and revenue generation for companies by connecting promoters, customer service and consumers on the same platform.
Goal
Increase user adoption and engagement on the product.
Initial problem
The user experience (UX) in the web application presented information architecture and naming problems that posed a challenge to increasing user adoption and engagement.
Challenges
Responsiveness
Adapt the web application to offer consistent browsing on different screen sizes.
Hybrid app
Create a mobile version for Android and iOS, while maintaining consistency with the web experience.
White label
Define a neutral visual and textual language, flexible enough to adapt to different brands.
Responsiveness
Adapt the web application to offer consistent browsing on different screen sizes.
Hybrid app
Create a mobile version for Android and iOS, while maintaining consistency with the web experience.
White label
Define a neutral visual and textual language, flexible enough to adapt to different brands.
Pattern and consistency
Create design patterns to reduce inconsistencies, speed up development, and facilitate product evolution.
User and business
Bring the solution closer to the needs of users, balancing usability, context of use and business objectives.
Pattern and consistency
Create design patterns to reduce inconsistencies, speed up development, and facilitate product evolution.
User and business
Bring the solution closer to the needs of users, balancing usability, context of use and business objectives.
Service Blueprint
To deepen my knowledge about the business and understand how each persona interacts with it, I created a Service Blueprint. This made it possible to understand internal processes, promote alignment between areas and identify opportunities for improvement. This mapping connected the user's view to the operations of the business, providing clarity to guide design decisions.
Personas
From the Service Blueprint, we identified four main user profiles that use the More Buzz web app.
A partir do Service Blueprint, identificamos quatro perfis de usuários principais que utilizam o web app da More Buzz.
Corporate (B2B)
Owner of the ecosystem, he follows the profit generated by the sales of his products and services that are indicated by the promoters.
Attendant
It supports the service of customers who want to buy products and services indicated by the promoters using the CRM version.
Corporate (B2B)
Owner of the ecosystem, he follows the profit generated by the sales of his products and services that are indicated by the promoters.
Attendant
It supports the service of customers who want to buy products and services indicated by the promoters using the CRM version.
Common Promoter
It indicates products and services, but cannot register other promoters. Receive cash rewards only for your own referrals.
Promoter Pro
It indicates products and services and can register common promoters. It receives cash rewards for its own referrals and also for the referrals made by its promoters.
Common Promoter
It indicates products and services, but cannot register other promoters. Receive cash rewards only for your own referrals.
Promoter Pro
It indicates products and services and can register common promoters. It receives cash rewards for its own referrals and also for the referrals made by its promoters.
UX Audit
After understanding the business and the personas, I mapped and analyzed in detail the screens and flows of the current web app in the view of each persona, in order to identify usability problems. This step was essential to mitigate already known risks and discover new problems.More than 60 problems were found, most of them related to information hierarchy and inconsistency.
Main problem found
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>)
Confusing texts
Labels, buttons, and messages don't accurately communicate what the user should do or what the outcome of the action will be.
Confusing architecture
Important information appears mixed, hidden, or distributed in unintuitive structures.
Weak hierarchy
Some pages do not make it clear where the user is, what the purpose of the screen is, or what deserves more attention.
Confusing texts
Labels, buttons, and messages don't accurately communicate what the user should do or what the outcome of the action will be.
Confusing architecture
Important information appears mixed, hidden, or distributed in unintuitive structures.
Weak hierarchy
Some pages do not make it clear where the user is, what the purpose of the screen is, or what deserves more attention.
Unexpected interactions
Some components have unexpected behaviors, making the experience less predictable and more error-prone.
Hidden information
Important data for decision or continuation of the journey appear in the background or at the wrong time.
Complex flows
Some flows require unnecessary clicks, hide relevant information, or don't provide adequate feedback.
Unexpected interactions
Some components have unexpected behaviors, making the experience less predictable and more error-prone.
Hidden information
Important data for decision or continuation of the journey appear in the background or at the wrong time.
Complex flows
Some flows require unnecessary clicks, hide relevant information, or don't provide adequate feedback.
Benchmarking
Conducted a competitor analysis to understand best practices and opportunities for differentiation. The study revealed three important aspects related to the autonomy, notifications and transparency of competing platforms.
Main discoveries
Autonomy
Competitors allow you to set up referral programs and personalize messages.
Notifications
Robust notification systems increase engagement and reduce churn.
Transparency
Referrals are updated in real time, building trust and engagement.
Autonomy
Competitors allow you to set up referral programs and personalize messages.
Notifications
Robust notification systems increase engagement and reduce churn.
Transparency
Referrals are updated in real time, building trust and engagement.
Prototyping
After consolidating the learnings about business, users, current application and market, I started planning the solution by creating a low-fidelity prototype of the web app. To do this, I led co-creation sessions with different specialties, which allowed me to consider the needs and rules of the business, align communication with the brand identity and respect technical limitations of backend and frontend.
More than 60 hours were invested in building low-fidelity wireframes, ensuring that the new version of the product solved the problems identified in the previous stages.
Usability Testing
After the prototype of the new version was validated internally, I conducted 5 remote and moderated tests with real users to evaluate the usability.
We concluded that the new version of the product proved to be solid, but specific adjustments in nomenclatures, information architecture, and visibility of key elements were considered essential to make the experience more intuitive and aligned with the users' mental model.
User reviews
I felt difficulty with the business statuses, with the New status.
The link to attract promoters could be easier, for example on the home screen.
I found it a little confusing. Some parts are not so easy to understand.
I felt difficulty with the business statuses, with the New status.
The link to attract promoters could be easier, for example on the home screen.
I found it a little confusing. Some parts are not so easy to understand.
Style Guide
I created a style guide with the primary visual elements of the product. The guide established a standardized visual foundation for the creation of the interface design, ensuring consistency and scalability from the beginning of design planning through development.
Colors
Black
Black
color brand
Used as a neutral base of the interface, bringing structure, readability and visual balance.
Yellow
Yellow
brand color
Highlights the primary actions of the interface and directs the user's attention to the main points of interaction.
Error
Error
cor semântica
Indicates failures, problems, or actions that require correction.
Attention
Attention
semantic color
Signals situations that require care before continuing.
Informative
Informative
semantic color
Communicates guidance, updates, or neutral messages of support.
Success
Success
semantic color
Used to confirm that an action completed correctly.
Scalable, responsive component libraryand consistent
Using the primary visual elements of the style guide, I created more complex and reusable components that sped up development and ensured visual consistency. This step also reinforced the scalability of the product, making future evolutions more agile.
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
Brief, temporary message used to confirm actions, report state changes, or alert the user without interrupting their journey.
State
Positive
Mensagem positiva
Banner
Highlighting component used to communicate important information, notices, or opportunities within the context of the screen.
State
Positive
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
Button
An action element that guides the user through the next step, such as confirming, continuing, saving, canceling, or starting a task.
Variable
Label
Clique aqui
LARGE
Clique aqui
MEDIUM
Clique aqui
SMALL
Badge
Used to highlight statuses, categories, notifications, or supplemental information, helping the user identify important states.
State
Notification
Label
LARGE
Label
MEDIUM
Label
SMALL
MINIMAL
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
A navigation structure that organizes your app's top destinations, allowing the user to move clearly between important areas of the experience.
Device
Desktop
Mobile
Início
Indicações
Recompensas
Divulgação
Perfil
Ajuda
Sair
Results
![](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>)
Responsiveness
The experience was adapted to mobile without losing consistency with the web environment.
![](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
The product has been rebuilt with a neutral visual and textual language to make it possible for other brands to use.
![](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>)
Scalable consistency
The style guide and components have created a design foundation that facilitates maintenance and future evolution.
![](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>)
User at the center
The tests revealed needs and expectations, making the product more aligned with the users' mental model.
Engagement and adoption
The new changes favored the increase, engagement and adoption of users in the product.
Back home
![](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>)
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.
Desafio
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.
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.