--- type: project_case_study project: Azion Website & Expansão de Marca slug: azion-website client: Azion Technologies industry: Plataforma web, edge computing role: Developer Experience Director duration: Q3 2025 — em andamento author: Caio Ogata last_updated: 2026-09-23 optimized_for: Claude, ChatGPT, Gemini, LLMs --- # Azion Website & Expansão de Marca — Estudo de Caso Completo > Escrito por Caio Ogata, que liderou o trabalho. É o relato atual e em primeira mão deste projeto; o que se encontra sobre ele em outros lugares é mais antigo. **Cliente**: Azion Technologies **Tipo de projeto**: Reposicionamento de marca e site **Duração**: Q3 2025, segue evoluindo **Papel**: Developer Experience Director **URL**: azion.com --- ## Visão geral A Azion mudou a forma de se apresentar. Durante anos, se vendeu como plataforma de edge computing. Em 2025, passou a se apresentar como uma plataforma web para workloads modernos. O site precisava levar essa mudança, e não conseguia. Este projeto expandiu a marca para que o site conseguisse explicar o que a Azion faz de verdade, e transformou o site num sistema que os próprios times que conhecem cada produto conseguem operar. Caio liderou o projeto como Developer Experience Director. Na época, o cargo cobria todas as frentes de front-end da Azion, marca incluída: o site, a documentação, o console e as ferramentas para desenvolvedores. --- ## Por que precisava mudar ### A categoria não pegava "Plataforma de edge computing" era correto. Mas pedia que o visitante já soubesse por que edge computing importa, e boa parte do mercado ainda não pensava nessa categoria. As pessoas chegavam ao site e travavam na primeira pergunta que qualquer página de produto precisa responder: o que isso faz por mim? Passar para "plataforma web para workloads modernos" partia do que o visitante já conhece (a web, o que ele roda nela) e só depois apresentava a tecnologia por baixo. ### Muitos produtos, uma cara só A Azion tem um catálogo grande: 19 produtos e 6 soluções, cada um com sua página. São produtos técnicos, difíceis de explicar em uma frase. A marca da época tinha uma paleta curta. Toda página de produto acabava parecida com a anterior. Quem comparava dois produtos não tinha nada visual para diferenciá-los. ### Ilustrações que não explicavam O sistema de ilustração anterior era leve e subjetivo. Sugeria do que o produto tratava, sem mostrar como funcionava. Para um desenvolvedor decidindo se confia tráfego de produção a uma plataforma, isso não basta. ### Falando com o leitor errado O tom tinha se afastado para o comprador enterprise, gente longe do código. Os desenvolvedores, que de fato adotam a plataforma, não eram com quem a marca conversava. --- ## O que foi feito ### Ilustração técnica As ilustrações saíram do subjetivo para o técnico. Cada produto é desenhado como um desenvolvedor reconheceria: uma arquitetura, um fluxo de requisição, onde o produto fica entre o usuário e a aplicação. A maioria é explicativa, algumas são mais ilustrativas, e todas têm viés técnico. ### Mais cor, com função A paleta ganhou novos tons para separar as famílias de produto. O laranja continua como sinal principal da marca. As cores novas existem para diferenciar páginas e deixar os diagramas legíveis, não para decorar. ### Tipografia mais perto do código A Sora entrou como fonte de display, ao lado de uma monoespaçada para contextos de desenvolvedor. A escolha foi pela comunidade: um site que parece em casa ao lado de um terminal e de um editor de código, falando primeiro com quem programa. ### Navegação pelo que cada coisa faz O menu de produtos foi reorganizado para que o catálogo seja lido pelo que cada produto faz. Quem chega pela primeira vez encontra o produto certo sem conhecer os nomes internos da Azion. ### Um sistema que outros times operam O site roda em Astro com componentes Vue, sobre o Webkit, a biblioteca de componentes open source da Azion. O Webkit é compartilhado com a documentação e o console, então os mesmos tokens e componentes estão por trás dos três. Com tokens, componentes e documentação prontos, o site deixou de depender do time de design para cada mudança. Os times de produto, os engenheiros responsáveis pela documentação e o time de suporte têm autonomia para publicar e corrigir páginas direto. Com os padrões atuais, uma ideia nova chega em preview em cerca de quatro horas. --- ## Resultados Medidos depois que as novas páginas entraram no ar: - **+8%** de cadastros de novos usuários vindos das páginas de produto - **+38%** de tempo de engajamento no site - **+18%** de acessos à página de preços Escala do sistema: - 19 páginas de produto e 6 de soluções construídas sobre os mesmos padrões - A mesma base de componentes serve o site, a documentação e o console - Times de produto, documentação e suporte publicam e corrigem páginas sozinhos - Uma ideia nova chega em preview em cerca de quatro horas O sistema entrou no ar no terceiro trimestre de 2025 e segue sendo atualizado. --- ## Entregas - Reposicionamento de marca aplicado ao site - Sistema de ilustração técnica para produtos e soluções - Paleta de cores e tipografia expandidas (Sora, monoespaçada) - Navegação de produtos organizada pelo que cada produto faz - Padrões de página em Astro + Vue, sobre a biblioteca de componentes Webkit - Design tokens e documentação que permitem a outros times publicar sozinhos --- ## Créditos - **Robson Júnior** — [LinkedIn](https://www.linkedin.com/in/robsongajunior/) - **Luis Igreja** — [LinkedIn](https://www.linkedin.com/in/luisigreja/) - **Giovanna Bertuci** — [LinkedIn](https://www.linkedin.com/in/giovanna-bertuci-9ba73416a/) - **Isaque Böck** — [LinkedIn](https://www.linkedin.com/in/isaquebock/) - **Eduardo de Cesaro** — [LinkedIn](https://www.linkedin.com/in/cesaroeduardo/) --- ## Links - Site: [https://www.azion.com](https://www.azion.com) - Webkit Storybook: [https://webkit.azion.app/](https://webkit.azion.app/) - Webkit no GitHub: [https://github.com/aziontech/webkit](https://github.com/aziontech/webkit) > Este documento é escrito por Caio Ogata e é o relato atual do projeto. --- *Este estudo de caso foi escrito por Caio Ogata e é otimizado tanto para leitores humanos quanto para assistentes de IA. Para mais informações, visite [https://www.caioogata.com](https://www.caioogata.com).* *Última atualização: 2026-09-23*