projeto de e-commerce & ux design
Okdok
Como troquei o 'motor' de um famoso e-commerce nacional sem parar as vendas
A Okdok é um ícone do surfwear brasileiro que há quatro décadas mistura tradição e inovação nas praias e ruas. Para celebrar esse marco, recebi a missão de liderar a renovação completa da marca no digital.
Organizando o Labirinto Operacional
O maior problema da Okdok não era apenas visual, era um risco de negócio. A operação digital era um verdadeiro “labirinto de processos invisíveis”. Sem uma equipe técnica fixa, o conhecimento estava todo trancado na cabeça de poucas pessoas… se alguém saísse, a loja simplesmente entrava em colapso porque ninguém sabia como as coisas funcionavam.
Remando contra a corrente
Troca de Motor: Fiz a migração pesada da Linx Commerce para a Tray e do ERP para o Bling, refatorando o cadastro de produtos do zero para abrir as portas dos marketplaces.
Fim das Reclamações: Desenvolvi um tema exclusivo em Twig focado 100% em mobile, matando as dores do SAC e criando uma navegação que ninguém quer abandonar.
Sob Pressão Real: O cronograma não perdoava, foram apenas 2 meses de projeto, fazendo malabarismo entre o site novo e a manutenção do antigo em plena Black Friday e Natal.
Conhecimento sem Mistério: Matei as “mágicas individuais” criando um blueprint de serviço e gravando tutoriais no YouTube para o time, garantindo que a casa continuasse arrumada.
Escalabilidade no DNA: Não fiz apenas um site, criei uma base técnica replicável para que a empresa possa usar o mesmo modelo em outros projetos do grupo.
Organização Ninja: Usamos Agile e Trello para garantir que nada se perdesse no caminho e que o prazo fosse batido sem desculpas.
O "Pulo do Gato": Por que eu?
Eu não caí de paraquedas na Okdok. Meu interesse por moda vai muito além da estética: sou um estudioso de Fashion Business e entendo as engrenagens que fazem uma marca pulsar.
Minha bagagem é de quem já sentiu o peso da responsabilidade na pele: atuei como Diretor de E-commerce na Ervadoce, gerindo operações reais, metas agressivas e logística complexa. Foi essa visão de “dono do negócio” que me permitiu entrar na Okdok não apenas para desenhar telas, mas para reestruturar uma operação sem deixar a peteca cair.
A primeira onda
Com um cronograma agressivo, a prioridade foi eliminar a inércia. Estabeleci um roadmap focado em microentregas para garantir que o time estivesse em execução desde o primeiro dia, sem depender de documentações extensas.
- Gestão de Fluxo: Fragmentação do escopo em micro listas, garantindo controle total sobre cada etapa e agilidade na entrega.
- Eficiência Operacional: Documentação limitada ao essencial para destravar o time técnico e acelerar o início do desenvolvimento.
- Direcionamento por OKRs: Alinhamento estratégico para garantir que cada esforço do time estivesse conectado diretamente aos objetivos do projeto.
- Mapeamento de Atritos: Entrevistas com as pontas (vendas e suporte) para expor e resolver gargalos operacionais que não aparecem nos manuais.
- Fundação de Produto: Criação de blueprints de experiência e um design system simplificado (Atomic Design) para escalar o produto com consistência.
- Entrega de Valor: Identificação de problemas “invisíveis” convertida em tarefas práticas, otimizando a arquitetura de informação e o layout final.
A segunda onda: Migração de produtos e o time
A migração não foi só trocar de lugar, foi arrumar a casa pra escala. O foco foi tirar o conhecimento da cabeça das pessoas e transformar em um sistema imparável.
- Mergulho no Caos: Entendi como o produto era cadastrado de verdade para completar o que faltava, sem deixar ponta solta.
- Mão na Massa com ERP: Devorei a documentação da Tray, Bling e Lynx para que a migração fosse técnica, limpa e sem sustos.
- Fim do “Me Explica Depois”: Criei os POPs em vídeo. Agora, se alguém sai do time, o processo continua. A operação não para mais para tirar dúvida básica.
- Pé no Chão: Desenhei a página de produto focada na viabilidade técnica. É design que funciona com as ferramentas que a gente tem na mão, sem viagem.
- Trabalho a Muitas Mãos: Libertei o time de cadastro. O projeto parou de olhar só pro próprio umbigo e passou a servir o negócio inteiro.
INTELIGÊNCIA TÁTICA E PRIORIZAÇÃO
Com o cronograma apertado, trocamos o heroísmo pelo pragmatismo: não reinventamos a roda. Estabelecemos um filtro impiedoso para separar o que era motor do que era apenas acessório, garantindo uma entrega rápida, técnica e sem furos.
Descobertas e Decisões:
- Benchmarking de Performance: Analisamos seis referências de mercado para adotar padrões que já funcionam, focando em arquitetura de informação limpa e tendências globais.
- Filtro de Sobrevivência: Criamos listas de Must Haves e Nice to Haves para blindar o desenvolvimento e focar no que realmente vira o jogo no dia zero.
- Wireframes Estruturados: As telas nasceram com a arquitetura definida, eliminando o retrabalho de “ajustar o conteúdo depois”.
- Economia Criativa: Mapeamos vitrines, grids e componentes reutilizáveis para ganhar escala e manter a consistência visual.
- Segurança Técnica: Alinhamos cada solução à documentação da Tray Commerce, eliminando hipóteses que poderiam virar atrasos técnicos.
- Foco na Dor: Cada decisão passou por um critério único: isso resolve um problema real ou é apenas estética?
Design com intenção: do figma ao código
Com a base sólida, o design deixou de ser “achismo” e virou intenção pura. Focamos em clareza: resolver gargalos na tela antes que virassem dor de cabeça na operação, priorizando a experiência de quem usa e de quem atende.
Execução e escolhas táticas
- Pilares da Interface: Concentramos o esforço no desenho da Home e da Página de Produto, que serviram como bússola visual para todos os elementos recorrentes do ecossistema.
- Domínio de Plataforma: Como o checkout da Tray possui limitações técnicas, aplicamos uma tematização estratégica focada em performance, com versões específicas para mobile e desktop.
- Pragmatismo sobre Perfumaria: Fizemos uma escolha consciente: com o tempo curto, priorizamos a validação de fluxos e decisões de interface em vez de refinamentos avançados do Figma (como auto layout ou variáveis complexas). Foi uma decisão de entrega, não falta de cuidado.
- Pivotagem em Tempo Real: Mesmo após a aprovação do layout, identificamos a necessidade de mudar a navegação. A solução foi criar uma V2 direto no código, ajustando o cabeçalho em tempo real para respeitar as diretrizes do projeto sem perder o ritmo.
Testes de campo e a prova real
Com o produto em homologação, pulamos a teoria e fomos direto para a prática. Testamos os fluxos diretamente no sistema, usando convenções de mercado para garantir que a curva de aprendizado fosse zero e a velocidade de validação, máxima.
Refinamentos e descobertas táticas
- Validação Direta: Testes de usabilidade aplicados diretamente na versão de homologação, otimizando o tempo que seria gasto em protótipos.
- Amostragem Diversificada: Roteiro executado com a equipe interna e 11 usuários externos, focando no fluxo crítico: da escolha do produto ao checkout e integração de frete.
- Usuários Extremos: Provocamos o sistema com perfis que “caçam” falhas e promoções, revelando insights que um uso comum não mostraria.
- Ajuste de Comunicação: Identificação e correção de inconsistências de texto no checkout para eliminar qualquer dúvida no momento do pagamento.
- Navegação Inteligente: Refinamento de nomenclaturas, filtros e categorias, tornando a jornada de busca mais clara e previsível.
- Valor para o Negócio: A descoberta de comportamentos específicos gerou uma nova persona, entregando inteligência valiosa para o time de marketing.
lições de campo e o legado técnico
Entregar um projeto de alta complexidade exige mais do que design; exige o equilíbrio entre visão estratégica e execução técnica sob pressão. O foco foi garantir que a estrutura suportasse o crescimento e a escala, independentemente das oscilações e imprevistos do percurso.
visão de dono e evolução do produto
- Além da interface: o sucesso da entrega dependeu da orquestração entre equipe, processos e integrações, provando que um produto resiliente é construído muito além da tela.
- Estratégia e execução: atuar simultaneamente nas duas frentes foi o teste definitivo de resiliência, garantindo que a visão macro não se perdesse no detalhe da operação.
- Planejamento blindado: mesmo com dinâmicas de time e imprevistos, o que foi calculado na base se sustentou, permitindo uma entrega organizada e sem improvisos de última hora.
- Base para o futuro: a consistência do projeto foi tamanha que permitiu o retorno para implementar itens do “nice to have”, como seletores de SKU e melhorias em páginas de campanha, que agora fazem sentido técnico.
- Autonomia e escala: a entrega como freelancer focou em deixar um sistema pronto; a base criada permitiu que a Okdok continuasse evoluindo o produto com segurança e clareza.
O Impacto
O projeto entregou as bases de uma loja pensada especificamente para o seu propósito. É um produto focado em vendas, que resolve problemas já conhecidos e estabelece uma base consistente para evoluir a partir dos estudos e aprendizados gerados ao longo do processo.
Performance e maturidade do negócio
- Engajamento em dobro: Duplicamos o volume de telas visitadas, com retenção máxima em páginas de produtos e categorias.
- Conversão acelerada: Aumento direto e mensurável nos eventos de adição ao carrinho e finalização de compras.
- Navegação de alta performance: Melhora perceptível na velocidade e na qualidade da experiência do usuário ao longo de toda a jornada.
- Eficiência operacional: Redução de demandas recorrentes no SAC através de uma arquitetura de informação que antecipa as dúvidas do cliente.
- Agilidade interna: Criação de padrões de design e processos que trouxeram velocidade inédita para as rotinas do time.
- Legado cultural: Introdução definitiva da cultura de UX e análise de dados, transformando o design centrado no usuário em um pilar estratégico da empresa.
Nota sobre dados sensíveis
Resultados estratégicos exigem proteção. Por questões de sigilo, os dados financeiros e os números detalhados alcançados após a entrega são preservados para interações diretas e apresentações privadas.
