Onze

A Onze é uma consultoria de CRM, parceira certificada de Salesforce e monday.com, que desenha, implanta e integra o CRM de vendas, atendimento, marketing e backoffice de outras empresas.

Este projeto é um estudo de redesign por iniciativa própria. Parti dos assets e do conteúdo que a Onze já tinha e redesenhei a estrutura, a interface e o sistema de componentes, com a intenção de apresentar o resultado ao cliente e oferecer o uso no site de produção, que já roda no Framer.

A seção de método transforma a abordagem da Onze em quatro princípios numerados: abordagem hands-on, personalização no centro, tecnologia a serviço da empresa e um CRM moldado para o negócio. A leitura é rápida, e cada princípio tem uma frase de apoio.

A prova social vem em números: 98% de abertura de mensagens, +130 usuários impactados, +270 usuários impactados e visão 360° do cliente, cada um ligado a um case completo. O depoimento do cliente fica identificado como tal e preserva o nome por NDA.

As quatro páginas de solução seguem o mesmo modelo, para que quem lê Vendas já saiba como ler Atendimento, Marketing e Backoffice: hero, benefícios, abordagem, processo em etapas, tecnologia com um case relacionado e uma chamada para o diagnóstico.

Ter um modelo único também facilita a manutenção: o conteúdo de cada solução entra nos mesmos blocos.

Todas as páginas foram desenhadas em três tamanhos: 1440, 810 e 390 pixels. O layout se reorganiza em vez de encolher: a grade bento do desktop se mantém no tablet e vira uma lista de cards no mobile, e a navegação vira um menu.

O sistema parte de seis componentes: Button, Tag, Choice Chip, Metric, Case Card e Input. Cada um tem variantes e estados: o botão em quatro estilos com hover e foco, o chip em padrão, selecionado, hover e foco, e o campo em padrão, foco, erro e desabilitado. As cores seguem os tokens documentados no guia de handoff, para que o Figma e o Framer falem a mesma língua.

O redesign não termina nas telas. Junto com o Figma escrevi um guia de handoff para o Framer, com breakpoints e grade, tokens de cor, interações e movimento, componentes e CMS, e acessibilidade.

Os tokens de cor (Black Onze, Yellow Onze, Cream Onze e os demais) aparecem com valor e uso. A parte de acessibilidade mede o contraste de cada par contra as diretrizes WCAG 2.2 nível AA e deixa claro o que passa, o que foi corrigido e o que é só decorativo, para que quem implementa não precise adivinhar.

Apresentar o redesign à Onze e, se fizer sentido para eles, implementar no Framer, onde o site de produção já vive. O guia de handoff foi escrito para que essa etapa seja rápida.