Product context

More Buzz is a B2B and B2C platform that helps companies turn product and service recommendations into new sales opportunities. The platform serves different user profiles, such as companies, attendants, and promoters, but the experience had several usability problems that made it difficult for users to adopt.

In addition, the product needed to evolve to meet new strategic objectives: to become responsive, gain a hybrid version for Android and iOS, support multiple brands (white label) and establish design standards that would facilitate its evolution.

Challenges and goals

My challenge was to lead the complete restructuring of the product experience, creating a solution that balanced business objectives, usability and technical feasibility.

The main objectives were:

Identify and prioritize UX problems

Simplify flows and reorganize information architecture

Design a consistent experience across web and mobile

Create a scalable design foundation with Style Guide and UI Kit

Validate usability with users prior to development

Service Blueprint and Personas

I started the project with a deep understanding of the business. I built a Service Blueprint to map internal processes, identify the different actors involved and understand how each persona interacted with the business and the platform itself. This work generated alignment between Product, Marketing, Commercial and Technology and served as the basis for all subsequent decisions. With this understanding, I defined three main personas.

Visual representation containing each of the stages of service offering.

🧑‍💼

Owner of the ecosystem, he follows the profit generated by the sales of his products and services that are indicated by the promoters.

🧑‍💻

It supports the service of customers who want to buy products and services indicated by the promoters using the CRM version of the More Buzz product.

👨‍🦱

It indicates products and services to be rewarded in cash. If you are a PRO, you can register other promoters and receive a % as a reward under their referrals.

Personas who use the More Buzz product.

UX Audit

After understanding the business and personas, I mapped and analyzed the web app screens and flows in detail to identify usability issues. I identified more than 60 issues, most of which were related to the topics below.

Confusing content

Labels, buttons, and messages don't accurately communicate what the user should do or what the outcome of the action will be.

Information architecture

Important information appears mixed, hidden, or distributed in unintuitive structures.

Low visual 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.

UX audit of the web app's screens and flows.

Benchmarking

To broaden the market vision, I conducted a benchmarking with competing platforms, identifying opportunities related to user autonomy, transparency of information and more efficient notification systems.

Low fidelity prototyping

After consolidating the learnings about business, users, current application and market, I led co-creation sessions to plan the solution using a prototype in low fidelity. This step allowed me to consider the needs and rules of the business and respect technical limitations of the backend and frontend.

Low-fidelity prototyping using wireframe.

Usability Tests

After the prototype of the new version was validated internally, I conducted 5 remote and moderated tests with real users to evaluate 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.

Usability test carried out remotely and moderately, using Google Meet.

User Interface Design (UI)

In the UI stage, I created a Style Guide with the primary visual elements of the product, establishing a standardized visual base for the creation of interfaces and ensuring the consistency and scalability of the product. From this base, I developed a library of reusable, responsive and scalable components, prepared to support future evolutions of the product and its white label strategy.

Product icons library.

Creation of the component library.

Preto

cor da marca

Usado como base neutra da interface, trazendo estrutura, legibilidade e equilíbrio visual.

Yellow

brand color

Highlights the primary actions of the interface and directs the user's attention to the main points of interaction.

Black

brand color

Used as a neutral base of the interface, bringing structure, readability and visual balance.

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.

Error

cor semântica

Indicates failures, problems, or actions that require correction.

Informative

semantic color

Communicates guidance, updates, or neutral messages of support.

Success

semantic color

Used to confirm that an action completed correctly.

Attention

semantic color

Signals situations that require care before continuing.

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.

Colors

Black

Yellow

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

Toast

Brief, temporary message used to confirm actions, report state changes, or alert the user without interrupting their journey.

State

Positive

Mensagem positiva

Error

Attention

Informative

Success

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

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

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

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

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

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

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

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

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

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

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

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

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

Key outcomes

User adoption and retention

The new changes favored the increase and retention of users in the product.

Responsive Product

The experience has been adapted for mobile devices without losing consistency with the desktop environment.

White label

The product has been rebuilt with a neutral visual and textual language to make it possible for other brands to use.

Scalable consistency

The style guide and components have created a design foundation that makes it easy to maintain and evolve the product.

Adherence to users' mental model

The tests revealed needs and expectations, making the product more aligned with the users' mental model.

Fale comigo

Feito com

por João Lázaro

Todos os direitos reservados ©

Fale comigo

Feito com

por João Lázaro

Todos os direitos reservados ©