BIC: Redesign de Catálogo Digital B2B
Descrição
Role: UX/UI Designer
Escopo: Redesign de Catálogo Digital B2B
Plataforma: Web
Ferramenta: Figma
A BIC é uma das maiores empresas de papelaria e produtos de plástico do mundo, com mais de 12 mil colaboradores e cerca de 31 milhões de produtos vendidos diariamente. Com a aceleração da transformação digital durante a pandemia, a empresa precisava modernizar seu catálogo digital B2B, uma ferramenta essencial para representantes comerciais, vendedores e revendedores.
O desafio era ambicioso. O catálogo existente apresentava problemas graves de usabilidade, acessibilidade e consistência visual. Havia mais de uma dezena de pontos críticos identificados: ausência de padrões de design, falta de feedback para o usuário, navegação sem localização clara, problemas de hierarquia da informação, contraste inadequado para acessibilidade, ausência de footer, imagens sem descrição no código, organização confusa de categorias e produtos, e até problemas de execução no código que inviabilizavam tarefas prometidas.
O projeto precisava ser entregue em um prazo curto. Assumi a liderança na frente de UX e UI, atuando na organização do processo, na consolidação da estratégia de experiência e na execução do redesign. A entrega aconteceu antes do prazo previsto, com um resultado que transformou a ferramenta em um produto escalável, preparado para atender não apenas a BIC no Brasil, mas também outras unidades de negócio da empresa na América Latina.
Contexto do projeto
O catálogo digital da BIC já existia, mas havia sido idealizado e desenvolvido em um contexto nada ideal. A interface acumulava problemas estéticos e funcionais que comprometiam a experiência dos usuários e a eficiência do processo comercial.
A ferramenta era utilizada diariamente por três perfis principais. O time interno de vendas e logística da companhia acessava o site para buscar informações logísticas, códigos de produtos e imagens em alta resolução. O time de marketing consultava informações de produto, atualizava o sistema e buscava assets para comunicações. Os revendedores e pequenos comerciantes utilizavam o catálogo para conferir códigos de produto, adicioná-los a planilhas para pedidos e se atualizar sobre promoções exclusivas.
Cada um desses perfis dependia do catálogo para realizar tarefas críticas do dia a dia. Mas a ferramenta atual não entregava a experiência que eles precisavam.
percurso cognitivo
Após uma análise de percurso cognitivo e testes com usuários, foram identificados 14 problemas principais que precisavam ser resolvidos.
A interface não tinha padrão consistente entre telas.
Não havia feedback para o usuário em pontos importantes da navegação.
O usuário não conseguia entender onde estava nem como voltar.
A hierarquia da informação estava confusa, prejudicando a interpretação do conteúdo.
Havia problemas de contraste que comprometiam a acessibilidade.
O catálogo não tinha footer, o que deixava o usuário sem saber se a tela havia carregado completamente.
Imagens não tinham descrição no código.
O menu hambúrguer tentava esconder um volume enorme de informações muito diferentes entre si, como login, categorias e download do PDF.
Páginas não seguiam um padrão visual.
Os cards de produto continham apenas imagens, com textos e logos embutidos visualmente, sem nenhum dado textual acessível.
Itens dentro das categorias não eram nomeados adequadamente.
A organização dos produtos e categorias era confusa.
E havia problemas de execução no código que tornavam algumas tarefas prometidas pelo catálogo simplesmente impossíveis de realizar.
Era um cenário de alta complexidade com um prazo apertado.
O desafio
O projeto tinha dois grandes objetivos. O primeiro era resolver os problemas imediatos do catálogo existente, entregando uma interface funcional, acessível e consistente. O segundo era mais ambicioso. A empresa queria transformar o catálogo em um produto estratégico, escalável e replicável para outras unidades de negócio da BIC na América Latina e até para organizações de outros segmentos.
Isso significava que o redesign não poderia ser apenas uma maquiagem visual.
Precisava ser uma reformulação estrutural, com arquitetura de informação robusta, componentes reutilizáveis e uma lógica de navegação que pudesse sustentar diferentes tipos de produto e diferentes mercados.
Além disso, o prazo era curto e não havia margem para atrasos. Assumi o projeto com o compromisso de organizar o processo, consolidar a estratégia de UX e executar o redesign de forma eficiente.
Estratégia de design
A primeira decisão foi estruturar o projeto a partir da arquitetura da informação. Sem uma base sólida de organização do conteúdo, nenhuma interface visual funcionaria.
Comecei com uma análise criteriosa da arquitetura de navegação existente. Os problemas eram claros. Havia desorganização de itens, redundâncias desnecessárias e complexidade em ações que deveriam ser simples. A navegação atual não correspondia à forma como os usuários realmente pensavam sobre os produtos da BIC.
Para entender melhor a lógica de negócio e o comportamento dos usuários, conduzi pesquisas qualitativas e quantitativas. Realizei testes com usuários dos diferentes perfis, observando como eles interagiam com o catálogo atual e onde encontravam dificuldades. Também mergulhei na estrutura de categorias da BIC, que difere do senso comum por se tratar de um catálogo B2B.
A configuração de categorias e segmentos da BIC segue uma hierarquia própria. Categorias principais são Papelaria, Chamas e Lâminas. Dentro delas, há segmentos como Caneta, Barbeador, Isqueiro. Subsegmentos como Esferográfica Clássica ou Barbeadores. Famílias de produto que correspondem às marcas, como Cristal Dura+ ou Comfort 2. Produtos específicos, como Cristal Dura+ com 3 unidades. E finalmente os itens B2B, que são os SKUs e caixas master que interessam ao revendedor.
Entender essa estrutura era essencial para construir uma navegação que fizesse sentido para os usuários.
Com base nas pesquisas e na análise da arquitetura, propus uma reestruturação completa da navegação. O objetivo era criar um sistema mais intuitivo, reduzir o número de cliques e evitar caminhos sem saída. Um catálogo B2B não deve apenas ajudar o usuário a encontrar o que ele já conhece. Ele também deve apresentar produtos que o usuário ainda não conhece, funcionando como uma ferramenta de descoberta.
Arquitetura reestruturada
A nova arquitetura foi desenhada para ser mais fluida e cíclica. Em vez de caminhos lineares que levam a destinos finais, criei uma estrutura que permite ao usuário circular entre categorias, subcategorias e famílias de produtos sem necessidade de voltar à página inicial a todo momento.
A homepage foi reestruturada para contemplar um número maior de caminhos possíveis dentro da navegação. O conteúdo e as funcionalidades foram hierarquizados visualmente para garantir que os usuários conseguissem realizar suas tarefas com mais praticidade.
As páginas de categoria ganharam um papel mais importante. Agora elas apresentam subcategorias e famílias de produtos no mesmo ambiente, reduzindo a profundidade da navegação e dando mais visibilidade ao usuário sobre o que está disponível.
O breadcrumb foi introduzido como ferramenta de navegação constante, permitindo que o usuário troque entre categorias, subcategorias e famílias de produtos sem perder o contexto.
Essa reestruturação reduziu o número de cliques até o item procurado em até três vezes menos que a versão anterior.
Novas funcionalidades
Além da reestruturação da arquitetura, o projeto incorporou funcionalidades que transformaram o catálogo de uma ferramenta estática para uma plataforma dinâmica de apoio ao processo comercial.
O recurso de listas personalizadas foi um dos mais importantes. Agora o usuário pode criar listas de produtos atreladas à sua conta. Essas listas podem ser renomeadas, reordenadas, baixadas em PDF no formato de planilha ou compartilhadas como link externo. Para representantes comerciais e revendedores, essa funcionalidade simplifica o processo de geração de pedidos e a comunicação com fornecedores.
A busca foi completamente reformulada. Agora o sistema encontra itens antes mesmo de o usuário completar o nome. A página de resultados de busca apresenta categorias relacionadas e filtros inteligentes que separam produtos de famílias de produto. Quando o resultado da busca não atende às necessidades do usuário, há um caminho direto para contato com a BIC, permitindo que ele sugira novos produtos ou consulte informações adicionais. Esse mecanismo fortalece a interação entre o usuário e a marca.
A página de produto também foi redesenhada para concentrar todos os itens referentes àquele produto em um só lugar, eliminando redundâncias na navegação. Foram adicionadas informações logísticas importantes como peso, tamanho, volume e quantidade de caixa permitida por pallet. Esses dados são essenciais para o time de logística e para os revendedores que precisam planejar seus pedidos.
A área de conta foi reformulada para dar mais autonomia aos usuários. Agora eles podem atualizar seus dados a qualquer momento, sem precisar entrar em contato com suporte. Sair do sistema ou excluir a conta também são ações disponíveis diretamente na interface.
Design system e consistência visual
Com a arquitetura definida e as funcionalidades mapeadas, o próximo passo foi estruturar a interface visual.
O catálogo antigo não tinha padrão algum. Estilos variavam entre telas, componentes não eram reutilizáveis e não havia documentação visual. Para resolver isso, construí um sistema de interface baseado em componentes reutilizáveis, com foco em consistência, acessibilidade e escalabilidade.
Os fundamentos visuais foram definidos a partir das necessidades do projeto. Tipografia com hierarquia clara para diferentes níveis de informação. Paleta de cores com contraste adequado para garantir acessibilidade. Escala de espaçamentos consistente para grids e componentes. Estados de interação para hover, focus e active.
Os cards de produto foram redesenhados para incluir informações textuais acessíveis, eliminando a prática antiga de embutir textos e logos dentro das imagens. Agora cada card exibe nome do produto, código, informações logísticas básicas e ações rápidas como adicionar à lista ou compartilhar.
O footer foi reintroduzido na interface, resolvendo um dos problemas críticos identificados nos testes. Agora o usuário tem uma referência visual clara de que a tela carregou completamente e encontra ali atalhos para funcionalidades importantes.
Testes com usuários e pesquisa
Ao longo do projeto, realizei testes com usuários dos diferentes perfis para validar as decisões de design.
Os testes com representantes comerciais ajudaram a refinar a lógica das listas personalizadas e a garantir que o fluxo de adição de itens fosse rápido e intuitivo. Os testes com o time de logística validaram a importância das informações técnicas na página de produto e como elas deveriam ser apresentadas para facilitar a consulta rápida. Os testes com revendedores revelaram a necessidade de um caminho mais claro para promoções exclusivas, o que foi incorporado na homepage.
As pesquisas qualitativas também trouxeram insights importantes sobre a nomenclatura das categorias. A forma como a BIC organiza internamente seus produtos não necessariamente corresponde ao vocabulário dos revendedores. Ajustes foram feitos para tornar a navegação mais alinhada à linguagem dos usuários.
Liderança e entrega
O projeto foi desenvolvido em um prazo curto, com um fluxo integrado entre design e desenvolvimento. Assumi a liderança na frente de UX e UI, atuando também na organização do processo e na consolidação da estratégia de experiência.
A estruturação do arquivo de design no Figma com componentes reutilizáveis e nomenclatura consistente permitiu que o trabalho colaborativo fosse eficiente. A comunicação com os desenvolvedores foi constante, garantindo que as decisões de interface fossem viáveis tecnicamente e que as implementações correspondessem ao que foi projetado.
A entrega aconteceu antes do prazo previsto. O projeto que começou como um salvamento de um catálogo problemático se transformou em um produto estruturado, escalável e estrategicamente alinhado aos objetivos de negócio da empresa.
Login
Home
Categorias e busca
Minha conta e listas
Produtos
Algumas telas Mobile
Gravação de Tela
Impacto do projeto
O redesign do catálogo digital da BIC transformou uma ferramenta problemática em um produto robusto e estratégico.
Os 14 problemas críticos identificados na versão anterior foram resolvidos. A interface passou a ter padrões consistentes, feedback claro para o usuário, hierarquia de informação adequada e acessibilidade garantida pelo contraste correto. O footer foi reintroduzido. As imagens ganharam descrições. Os cards de produto passaram a conter informações textuais acessíveis. A organização das categorias foi reestruturada para refletir a lógica de negócio e o vocabulário dos usuários.
O número de cliques até o item procurado foi reduzido em até três vezes. As novas funcionalidades, como listas personalizadas, busca inteligente e compartilhamento de itens, simplificaram o processo comercial para representantes e revendedores.
A arquitetura reestruturada e o sistema de interface baseado em componentes criaram as condições para que o catálogo pudesse ser escalado para outras unidades de negócio da BIC na América Latina e até para organizações de outros segmentos, conforme previsto no escopo do projeto.
A entrega aconteceu antes do prazo. Mais do que um redesign de interface, o projeto representou a consolidação de uma estratégia de experiência para um produto que é crítico para a operação comercial da empresa.
Conheça meu trabalho
