Onboarding e Home - Wibx Business

Nesse projeto redesenhei o onboarding da plataforma Wibx Business para reduzir complexidade e acelerar a entrada de novos clientes.

Também desenvolvi uma nova Home com mais clareza, melhor hierarquia das informações e acesso rápido às principais funcionalidades.

Produto

Plataforma Web B2B

Atuação

UX-UI Designer

Duração

4 meses

Empresa

Wibx Company

Equipe

2 Designers | 1 PM

Contexto

O Wibx Business é uma plataforma web B2B utilizada por empresas para gerenciar campanhas, vendas e operações financeiras. Em entrevistas com usuários identificamos que a experiência de criação de conta empresarial era excessivamente longa, pouco intuitiva e exigia muitos passos para que o usuário de fato conseguisse acessar o produto.

Durante os testes de usabilidade percebemos que a antiga Home era bem pouco intuitiva e deixava usuários confusos e perdidos, sem saber como encontrar o que precisavam. Também estava defasada em relação às novas estratégias de negócio, com uma divisão por módulos que já não fazia mais sentido.

Principais problemas

  • onboarding longo
  • excesso de etapas
  • informações distribuídas em várias telas
  • baixa previsibilidade do processo
  • falta de clareza
  • dificuldade para entender o próximo passo
  • jornada inconsistente
  • Home pouco útil após o primeiro acesso
  • funcionalidades importantes escondidas

Objetivos do redesign

  • Simplificar o onboarding
  • Reduzir o número de decisões do usuário
  • Tornar a primeira experiência mais rápida
  • Criar uma Home que funcione como centro operacional
  • Facilitar a descoberta das funcionalidades
  • Preparar a interface para futuras evoluções do produto

O processo de design

O entendimento do problema e a exploração foram as etapas que levaram mais tempo, a equipe realizou várias reuniões de alinhamento para definição de mudanças estratégicas de negócio que impactaram bastante o projeto. Depois que tudo estava claro iniciamos a etapa de criação da interface e dos novos componentes, mapeando cenários de sucesso, empty e erro (erro 404 , falha no servidor, falta de conexão, etc).

notebook

Entendimento

  • Análise do fluxo existente
  • Mapeamento das necessidades dos usuários
  • Levantamento das necessidades de negócio
search

Exploração

  • Planejamento de novos fluxos
  • Pesquisa de referências
  • Validação interna
brush ruler

Design

  • Criação da nova interface
  • Ajustes e alterações
  • Componentes
  • Estados e cenários (erro, empty, etc)
imac, computer

Protótipo navegável

Utilização de Inteligência Artifical para transformar o design no Figma em um protótipo funcional

Decisões de design

O principal foco do redesign foi a simplificação do onboarding, uma das decisões mais importantes da equipe para atingir esse objetivo foi retirar o KYC do cadastro inicial, permitindo que o usuário crie sua conta sem precisar validar seus documentos. Dessa forma seria possível acessar a plataforma sem precisar passar por essa etapa, ela só seria necessária de fato no momento de realizar movimentações financeiras. 

Uma mudança de destaque na interface foi a nova estrutura e hierarquia de informações nas telas de onboarding, com a adição de uma timeline mais visível na vertical, acompanhada por textos indicativos para cada etapa.

Outra decisão importante foi eliminar a antiga organização por módulos da plataforma, que dificultava o acesso às principais funcionalidades, fazendo com que fossem necessários vários cliques até encontrá-las. Para resolver este problema a Home foi transformada em um dashboard realmente útil com atalhos rápidos para as features e configurações mais importantes.

Antes

  • 15 telas
  • Muitas etapas
  • Sem clareza dos próximos passos
  • Jornada confusa e cansativa
  • KYC como requisito para acesso
  • Erros graves de usabilidade

Depois

  • 9 telas
  • Fluxo simplificado
  • Menos etapas e informações
  • Linha do tempo com descrição das etapas
  • Mais tooltips com explicações
  • Feedback claro em cada etapa
  • Acesso sem KYC

Outras telas do processo de onboarding

Home Antiga

  • Divisão por módulos
  • Falta de clareza sobre os próximos passos
  • Dificuldade para encontrar funcionalidades importantes
  • Os textos de apoio não eram muito úteis
  • Usuários novos se sentiam perdidos

Nova Home

  • Atalhos para as principais funcionalidades
  • Organização por prioridade
  • Adição de filtros e tags
  • Visualização rápida de campanhas e pedidos recentes
  • Atualização das cores para uma paleta mais corporativa
  • Interface moderna e amigável

Como utilizei IA durante o projeto

  • Geração do protótipo navegável
  • Validação rápida das telas
  • Testes de navegação
  • Comunicação com desenvolvedores

Quando esse projeto foi feito a empresa estava passando por um processo de inclusão de ferramentas de IA nos processos de cada time, o novo onboarding foi um dos primeiros testes que implementamos no setor de produto, utilizando o MCP do Figma e Claude Code para a criação de um protótipo navegável em HTML (vídeo abaixo). O uso de IA nos permitiu avaliar a jornada antes mesmo da implementação em produção, ajudando na comunicação com a equipe de front-end.

Resultado

O redesign trouxe:

    • Experiência inicial mais agradável
    • Redução da complexidade
    • Maior consistência entre telas
    • Home transformada em ponto central de operação
    • Documentação mais organizada para desenvolvimento

Aprendizados

Este projeto reforçou a importância da arquitetura da informação e hierarquia visual. Me mostrou como muitas vezes reduzir as etapas e informações pode gerar uma experiência melhor.  Também foi um dos meus primeiros projetos utilizando inteligência artificial para geração de interfaces, o que foi um desafio, mas me abriu as portas para esse novo universo de criação com agentes de IA e trouxe conhecimentos muito úteis para os projetos seguintes em que focamos em construir soluções utilizando inteligência artificial.

Scroll to Top