Centro de Notificações VTEX

Um passeio pelo problema e pela solução: erros dentro de cada módulo, um sino, duas abas e um histórico completo.

O sistema de notificação foi criado para identificar e melhorar os pontos de dor ligados ao feedback do Admin às marcas parceiras da VTEX. A VTEX, plataforma de comércio digital empresarial, fornece o Admin, um site onde as marcas controlam toda a sua operação comercial.

O projeto permite que as marcas entendam e resolvam problemas mais rápido, sem abrir tickets no Suporte. Ele nasceu de uma das Declarações VTEX 2024: “proporcionar paz de espírito aos clientes e parceiros”.

Dentro do VTEX Admin, o usuário precisa estar no módulo ou na página para ver se um evento aconteceu e o que foi. Os módulos não tinham uma forma eficaz de comunicar problemas e erros. A oportunidade era criar um sistema que envia notificações de tarefas assíncronas, em páginas diferentes, e ajuda as pessoas a resolver e prevenir erros.

Fui a principal responsável, das telas à documentação com as especificações de design para a engenharia. A equipe de design tinha mais de 50 pessoas, mas como estagiária trabalhei todo dia com três Product Designers, com Critiques e Design Meetings. Nos últimos meses, conversei com os engenheiros para criar um MVP que outro estagiário pudesse programar em três meses.

Quem usa o Admin vê o que está acontecendo sem abrir cada módulo. O sino mostra o que é novo, o dropdown separa as notificações do sistema dos comunicados, e a página de Notificações guarda o histórico completo, com busca e filtros.

Durante seis meses fizemos testes de usabilidade e Desk Research, qualitativos e quantitativos, para verificar se havia problemas reais no VTEX Admin e achar melhorias na comunicação de feedback.

O escopo cresceu conforme investigávamos, então priorizamos o essencial e documentamos o que seria um game changer mas ainda não cabia.

Entrevistei designers dos módulos sobre o Admin, o processo por trás de cada página e a rotina dos usuários. “As tarefas são extremamente manuais. Só reparam depois de o erro acontecer”, disse Felipe Soares. Daiane Thomé acrescentou que os usuários não recebem notificações de erros e precisam entrar nos módulos para achá-los.

Focamos em três marcos: feedback em tempo real, prevenção e recuperação de erros mais rápidas e mais confiança na plataforma.

Comecei analisando centros de notificação de outras plataformas, buscando o que funciona e o que falha em visibilidade e hierarquia da informação. Cinco insights: múltiplas configurações, noção clara de relevância, mobile e desktop juntos, fácil de achar de novo e um sumário das anteriores.

A Desk Research me deu uma definição: uma notificação é uma mensagem exibida dentro ou fora da interface para lembrar, comunicar ou informar a tempo. Das seis formas que identifiquei, erros e indicadores de estado eram as mais importantes para os nossos usuários.

Coordenei uma sessão de brainstorming com designers e desenvolvedores sobre fluxos, sistema visual, UX Writing e engenharia, dentro dos três meses disponíveis. Com minha mentora, ordenei cada feature num gráfico de esforço x impacto para definir o escopo e desenhei o fluxo ideal do usuário.

Cada tela passou por cinco passos: explorar, selecionar, criticar em Design Critiques, aperfeiçoar com o feedback e testar com usuários finais.

Os testes rodaram primeiro com a equipe de Suporte da VTEX e depois com marcas parceiras. Todos clicaram na notificação para ir à página de origem, e imagem e texto dos alertas faziam querer ver mais. Dois ajustes vieram: a notificação de Comunicados passava despercebida e a escrita precisava ser mais direta.

Um estudo de UX Writing definiu as regras para dois contextos: dentro da VTEX (comportamento do botão, significado das palavras, ação do usuário) e a experiência geral de notificações (o que mostrar, formato de data e hora, estrutura e ordem).

Aprendizados: prototipar em tamanhos, idiomas e plataformas diferentes e escrever com casos reais, porque mensagens inventadas enganam sobre a aparência real. Depois defini uma taxonomia para os próximos designers e devs seguirem o padrão.

Depois de um All Hands e de um Design Critique com mais de 30 designers, aperfeiçoei as opções escolhidas. O sino na barra de navegação do Admin abre a principal fonte de informações recentes: notificações de tarefas e comunicados no mesmo espaço, separados por categoria.

Em “Ver todas”, o usuário chega ao Centro de Notificações, onde filtra tudo o que recebeu e ajusta configurações importantes. Como veio no fim dos seis meses, mantivemos o padrão das outras páginas do Admin.

O produto final, apresentado ao fim do estágio de seis meses, permite que os usuários do Admin saibam o estado atual do sistema e controlem seu trabalho diário com mais confiança. Para o handoff, construí um Figma e uma documentação em Notion com todos os espaçamentos, funções, cliques e fluxos.