Nova Home

Contexto

A Home Page da Centauro possuía uma série de limitações técnicas e de usabilidade que impossibilitava uma experiência fluida e personalizada para as pessoas clientes e limitava o time de negócios na criação de campanhas.

Além disso, a home page não estava presente no resultado de busca do google e considerando que uma origem de tráfego orgânico tem uma conversão 30% maior comparada com as outras origens, temos uma grande oportunidade de trazermos mais tráfego e com maior qualidade para o site.

Além do mais, foi visto que a performance da home não era das melhores, onde seu Largest Contentful Paint (LCP) podia chegar em até 30 segundos para o navegador Chrome no desktop. Já o e o Total Blocking Time (TBT) tinha uma média de 25 segundos para o mesmo dispositivo e navegador.

Por fim, pensando também em uma evolução de arquitetura no back-end entendemos que a home possuía um potencial imenso perante as outras iniciativas do time, podendo assim gerar valor para tecnologia, time de negócios, experiência e principalmente para as pessoas usuárias.

Workshop

Realizei um workshop com múltiplas áreas dentro da companhia com o objetivo de entender um pouco mais das dores das pessoas de negócios, engenharia, marketing e criação. Esse workshop foi feito com cerca de 30 pessoas e com isso pudemos listar o que as pessoas desejam para essa nova home e o que elas acreditavam que estava ruim atualmente, o que atrapalhava o trabalho delas e o que funcionava bem mas poderia melhorar.

Então com esse workshop pudemos clusterizar nos seguintes pontos de dor:

• Liberdade e flexibilidade

• Utilização do Design System conectado com o tom e voz da marca

• Redução e adequação dos banners para dar maior clareza e leveza nas informações

• Jornada personalizada

• Performance

• Acessibilidade

• Métricas

Benchmark

A partir desse momento fui entender o que os principais concorrentes faziam, seja eles diretos ou indiretos, tais como Mercado Livre, Magazine Luíza, Shopee, Shein, Netshoes, Adidas, Nike e nesses principais concorrentes pude mapear comportamentos que eram relevantes para as nossas pessoas usuárias e o que estava ditando uma certa tendência entre esses players.

Acessibilidade

Isso sem dúvida foi uma das partes que eu mais briguei para que fosse solucionada, após uma análise simples utilizando o leitor de tela sem o uso do monitor ou qualquer interface de vídeo pude entender que a experiência era totalmente complexa e onerosa para as pessoas usuárias, muitas vezes era completo chegar a uma listagem de produtos, as imagens não possuíam texto descritivo, links não explicavam onde a pessoa seria direcionada, sem falar que a experiência do menu da página era praticamente impossível pois ele entrava em todos os menus antes de chegar ao conteúdo da página.

Sabíamos que isso era um problema crítico e precisava ser resolvido, então utilizando um roteiro de acessibilidade desenvolvido por mim dentro do grupo conseguimos chegar em uma solução que atendia as pessoas usuárias e que não atrapalha o desenvolvimento da página.

Liberdade e modularidade

Pensando em todo o workshop e discovery entendi que a melhor abordagem para a home era que as pessoas que a gerenciam pudessem ter total liberdade para criar múltiplas Homes e que ela fosse modular, para caso entendessem que um conteúdo não estivesse performando muito bem ele pudesse ser reposicionado sem a necessidade de um deploy ou pessoas do time atuassem em uma correção. Então junto ao time decidimos que a home seria criada utilizando o CMS (Sistema de Gestão de Conteúdos) Strapi, pois teríamos uma fácil adequação as necessidades do time de gestão e criação com a utilização de plugins, é de fácil aprendizado e baixa complexidade, além de possuir um grande suporte da comunidade de tecnologia.

Componentes

Seguindo o design system foram criados múltiplos componentes com objetivo de fomentar a utilização do design system, padronização visual e acessibilidade e sem dúvidas que atender as pessoas que utilizam diariamente a home, como componentes de cupons de desconto, cards promocionais que continham tempo para expirar uma promoção, banners para eventos, banners de vídeo, contadores e campos para retail media.

Os componentes passaram por um critique com as pessoas designers, onde foram feitos alguns ajustes e modificações, mas no geral tiveram uma aceitação excelente.

Com isso pudemos ter maior confiança em passar para o time de desenvolvimento fazer toda a codificação e implementação dos mesmos.

Resultados

Mas afinal, depois de todo esse trabalho, quais foram os resultados?

Pois bem, veja você mesmo:

No vídeo pudemos notar claramente a diferença de tempo de carregamento, onde saímos com a mesma home e os mesmos elementos de 30 segundos no desktop para 5 segundos de tempo de carregamento e no mobile de 7 segundos para 3 segundos.

Além disso nossa micro conversão da página aumentou significativamente, cerca de 5 pontos percentuais atingindo as melhores micro conversões do ano dentro da companhia, nosso bounce rate teve uma queda contínua de pelo menos 7%, além de toda parte de SEO que pode ser atualizada e contemplada com as mudanças.

E sabe o melhor de tudo? Tudo isso em um tempo recorde, conseguimos entregar todo esse valor antes da Black Friday, tivemos em torno de 30 dias para a concepção da proposta e implementação, sem dúvidas um trabalho que me orgulho muito e agradeço imensamente a todo o time pela dedicação na implementação e concepção dos resultados.

Admin Antigo

Admin Novo

Fiz questão de entregar todo um treinamento e uma wiki para as pessoas que administram o conteúdo da Home de Centauro, para que não haja problemas e dores nessa migração de plataforma que sabemos que nunca é fácil, então dei todo esse suporte para haja as menores fricções possíveis na jornada.