top of page
Redesign da Homepage do InfoMoney
Empresa:
InfoMoney
Ano:
2024
Papel:
Product Designer (UI/UX, Arquitetura da 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 é o principal portal de notícias financeiras do Brasil, oferecendo dados de mercado em tempo real e insights de investimento para milhões de pessoas.
_ Em 2024, liderei o redesign da sua homepage para empoderar as equipes editoriais, impulsionar os resultados de negócios e modernizar a experiência do usuário.
O desafio
Apesar de o conteúdo do InfoMoney ser excelente, sua homepage era rígida e difícil de manter.
Homepage ultrapassada
Editores não conseguiam atualizar o layout ou destacar notícias sem a ajuda de um desenvolvedor.
Design inconsistente
Os elementos visuais eram desorganizados e inconsistentes, o que gerava confusão entre os usuários.
Pouca flexibilidade
O layout não se adaptava a mudanças editoriais ou coberturas especiais.
​
Homepage antiga do InfoMoney
Como criar uma homepage modular que permita aos jornalistas atualizar conteúdo de forma independente e se adaptar a diversos cenários editoriais?
Objetivos principais
Nossa abordagem foi baseada em objetivos claros, princípios de UX e premissas de produto.
O Design System do InfoMoney, desenvolvido para oferecer uma base sólida para experiências digitais consistentes, escaláveis e eficientes, foi um elemento fundamental.
Modularidade
Homepage modular que empodera os jornalistas para atualizar o conteúdo por conta própria.
Adaptabilidade
Permitir diferentes cenários editoriais, inclusive emergenciais.
​
Consistência
Aplicar o novo Design System do InfoMoney para uma experiência única e escalável.
​
Recirculação de Conteúdo
Estimular a navegação e aumentar o engajamento.
Crescimento do Negócio
Apoiar geração de leads e receita publicitária
Credibilidade
Preservar a reputação do InfoMoney como portal líder.
O processo
Entrei no projeto no meio do processo para trazer clareza, estrutura e validação. Conduzi o projeto adiante quando a equipe enfrentava dificuldades para se alinhar com os stakeholders e comunicar o valor do design.
1. Descoberta & Alinhamento
Auditoria do site atual e benchmarking com principais portais.
Entrevistas com jornalistas, editores e desenvolvedores revelaram dores como:
-
Dependência do time de tecnologia para atualizações simples.
-
Dificuldade em destacar notícias urgentes.
-
Estrutura visual monótona e repetitiva.
2. Sistema Modular: Building blocks da homepage
Criamos um módulo de conteúdo base, que é um contêiner padronizado para blocos de conteúdo intercambiáveis. Isso permite layouts flexíveis e reconfiguráveis que se adaptam às necessidades editoriais, mantendo a harmonia visual.
-
Módulos reordenáveis e configuráveis (1 coluna, 2 colunas, largura total).
Módulos básicos da home
3. Integração com o Design System
Criamos uma biblioteca abrangente de componentes de conteúdo (por exemplo, cartões de notícias, incorporações de vídeo, blocos de imagem, produtos em destaque) que seguem o novo Design System do InfoMoney.
-
Aplicamos o novo Design System do InfoMoney para garantir consistência e escalabilidade.
Utilizamos uma grade responsiva de 12 colunas para uma experiência fluida em diferentes dispositivos.
Homepage responsiva
4. Prototipação & Validação
Testamos rigorosamente diferentes opções de layout no Figma e realizamos testes com a equipe editorial e com os usuários finais. A interface modular foi bem recebida por sua clareza e flexibilidade.
Teste e validação
Impacto & Resultados
A página inicial redesenhada do InfoMoney melhorou significativamente tanto a experiência do usuário quanto os resultados de negócios, com o acompanhamento após o lançamento revelando resultados impressionantes:
Outros ganhos
_ Autonomia editorial: 
Agora jornalistas atualizam conteúdo sem desenvolvedores.
_ Consistência visual: 

Look & feel unificado em todas as plataformas.
​
_ Crescimento do negócio: mais engajamento e oportunidades de receita.
A nova homepage do InfoMoney
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 acelerou 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 implementaçã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