top of page
Design System:
InfoMoney
Empresa:
InfoMoney
Ano:
2024
Papel:
Designer de produto (UI designer, UX designer, arquitetura de informação)
Time
Eu e outro designer pleno, PM, líder de tecnologia
Sobre a empresa
O maior e melhor portal de notícias financeiras do Brasil
_ InfoMoney é uma plataforma líder de notícias financeiras e de negócios no Brasil, dedicada a fornecer informações confiáveis e acionáveis para ajudar os usuários a tomar decisões financeiras.
_ O portal foi fundado em 2000 com a missão de democratizar o acesso a informações financeiras de alta qualidade para melhorar a vida das pessoas.
_ Em 2016, a plataforma foi adquirida pela XP Inc., uma das maiores instituições financeiras do Brasil, para fortalecer sua estratégia de conteúdo e agregar valor à crescente base de usuários da XP.
_ Sob a gestão da XP, o InfoMoney expandiu seu alcance, integrando ferramentas de ponta, formatos inovadores de conteúdo e parcerias para continuar sendo líder no jornalismo financeiro.
O problema
A plataforma apresentava inconsistências em tipografia, cores e layouts, resultando em uma identidade de marca fragmentada e ineficiências no design e desenvolvimento.
Contexto
_ A falta de padronização na tipografia, nas cores e nos layouts das páginas enfraquecia a coesão visual da marca e impactava negativamente a experiência do usuário.
_ Sem componentes reutilizáveis, as equipes enfrentavam retrablho constante, desperdiçando tempo e recursos.
_ À medida que a presença digital do InfoMoney crescia, garantir a consistência visual e o alinhamento entre equipes e projetos tornou-se um desafio crescente.
_ A ausência de uma estrutura modular dificultava a personalização e tornava mais lenta a criação de novos recursos, páginas e ataulizações.
O desafio
Como podemos criar um design system que proporcione uma experiência de usuário coesa, de alta qualidade, escalável, flexível e que melhore a eficiência para designers e desenvolvedores?
A solução
O Design System do InfoMoney foi desenvolvido para fornecer uma base sólida para a criação de experiências digitais consistentes, escaláveis e eficientes.
Modularidade
Componentes podem ser facilmente combinados para construir novas páginas.
Escalabilidade
Criado com foco no crescimento sustentável sem perder qualidade e excelência.
Eficiência
Otimiza processos e evita retrabalho com a reutilização de elementos.
O processo
Implementamos uma abordagem baseada no Atomic Design para estruturar os elementos em componentes reutilizáveis e modulares.
1. Descoberta & Pesquisa
Para entender os desafios e oportunidades do projeto, conduzi entrevistas aprofundadas com stakeholders e analisei cuidadosamente o feedback dos usuários. Também realizei uma auditoria completa do design, identificando inconsistências em tipografia, cores, layout e comportamento dos componentes. Esse processo permitiu mapear os principais problemas e definir prioridades estratégicas para garantir uma experiência mais coesa e eficiente.
2. Fundação estratégica
Para garantir um design escalável, coeso e eficiente, adotamos a metodologia Atomic Design, que organiza a interface em átomos, moléculas, organismos, templates e páginas. Essa abordagem modular facilita atualizações e permite que o sistema evolua sem comprometer sua consistência.
3. Framework Responsivo
Criamos um sistema de grid responsivo com múltiplos breakpoints (base, médio e 2XL) para manter a experiência consistente em qualquer dispositivo. Com isso, garantimos um alinhamento preciso, proporpção e usabilidade, tanto em desktop quanto em mobile.
4. Tipografia
Para unificar a identidade visual, padronizamos os estilos tipográficos por meio da implementação de tokens de tipografia, definindo tamanhos, pesos, altura de linha e espaçamento entre letras. As fontes Inter e Source Serif 4 foram escolhidas por seu equilíbrio entre legibilidade e modernidade, proporcionando uma experiência visual consistente em toda a plataforma.
5. Paleta de cores
A estruturação de uma paleta de cores organizada contribuiu para uma experiência visual harmônica e acessível. As cores foram categorizadas em neutras, primárias, relativas a ações e complementares, garantindo melhor legibilidade e consistência da marca. Além disso, a paleta foi ajustada para atender às diretrizes de acessibilidade (WCAG), melhorando o contraste e a usabilidade.
6. Biblioteca de componentes
Para tornar o design mais eficiente e escalável, desenvolvemos uma biblioteca de componentes reutilizáveis, abrangendo botões, campos de input, cards, barras de navegação e muitos outros.
Cada um desses elementos foi cuidadosamente projetado e documentado para garantir acessibilidade, responsividade e adaptabilidade em diferentes contextos de uso.
7. Prototipação & Validação
Após a construção dos componentes, realizamos testes rigorosos para garantir que cada elemento fosse acessível, responsivo e adaptável.
8. Documentação & Implementação
Para facilitar a adoção do novo sistema de design, iniciamos sua implementação nas principais páginas do InfoMoney, priorizando áreas de maior impacto, como a homepage.
Além disso, criamos um hub de documentação detalhado para orientar as equipes, garantindo consistência e alinhamento entre os processos de design e desenvolvimento.
Conclusão
_ O Design System tranformou o desenvolvimento digital da marca, trazendo mais eficiéncia, coesão e inovação.
_ A adoção de componentes reutilizáveis e práticas escaláveis reduziu o retrabalho das equipes, aprimorou os fluxos de trabalho e acelarou as iterações, assegurando a consistência no design e no desenvolvimento.
_ Como um sistema vivo, ele acompanha a evolução do InfoMoney, mantendo a identidade visual forte e com estrutura para crescer de forma sustentável.
_ Próximos passos: A evolução continua com a impelmentação do modo escuro, proporcionando mais corforto e acessibilidade. Além disso, à medida que mais páginas do portal forem atualizadas, a ampliação da biblioteca de componentes garantirá maior eficiência e padronização.
bottom of page