Farol
O Farol oferece uma experiência turística imersiva, unificando aplicativo e totens interativos. Interfaces e arquitetura...



A Seox é uma startup especializada no desenvolvimento de portais de notícias, atendendo um segmento de mercado com perfis de investimento e necessidades altamente diversas. Inicialmente minha atuação junto à equipe estava concentrada em UI/UX Design, conduzindo o desenvolvimento de experiências visuais e funcionais de forma totalmente personalizada para cada cliente. Cada portal era tratado como um projeto único, com layouts, recursos e fluxos construídos do zero, refletindo as especificidades de cada negócio.
Com o tempo, a experiência adquirida junto a diferentes perfis de clientes e a análise mais aprofundada sobre a operação do negócio levaram a uma mudança estratégica importante. A percepção sobre o modelo vigente evoluiu de uma prestação de serviço focada em projetos isolados para o desenvolvimento de um produto robusto e escalável para portais de notícias. Essa guinada estratégica buscou mitigar alguns gargalos do modelo anterior, como:
Dentro desse novo cenário, minha atuação evoluiu de um foco exclusivo em UI/UX para um papel integral como Product Designer, assumindo responsabilidades estratégicas para conectar as necessidades do negócio, as demandas técnicas da equipe, a análise de dados e a experiência final dos usuários. Entre os principais destaques dessa atuação, estão:


Durante o processo de redirecionamento do modelo de negócio do Publisher, percebi que, para sustentar a evolução contínua do produto, era necessário criar um fluxo constante de novas funcionalidades que também mitigasse problemas recorrentes na equipe, como a falta de previsibilidade e a dificuldade de alinhamento entre os membros. A partir da experiência adquirida na pós-graduação, especialmente com técnicas de Product Discovery, o desafio foi adaptar essa abordagem a uma equipe enxuta, que conciliava atividades de produção com a necessidade de pesquisa e validação de novas ideias.


A solução foi a criação de um fluxo personalizado de discovery, que contemplava desde pesquisas direcionadas para mapear necessidades do mercado e diferentes perfis de clientes, até a concepção colaborativa de ideias e sua apresentação estruturada para toda a equipe. Também incluímos um mecanismo simples, mas eficaz, de amostragem com a base de clientes para validar a aceitação de futuras features antes de seu desenvolvimento. Por fim, as ideias aprovadas seguiam para um processo padronizado de priorização no roadmap, garantindo que os esforços de produção fossem direcionados apenas para aquilo que realmente geraria impacto.
Entre os principais resultados dessa metodologia, destacam-se:
O desenvolvimento do Publisher trouxe um desafio central: criar uma estrutura visual capaz de sustentar a robustez de um portal de notícias, mas que fosse flexível o suficiente para atender um ecossistema diverso de clientes, cada um com demandas visuais e editoriais próprias. Desde o início, a construção dos componentes teve como premissa não apenas a consistência estética, mas também alta performance, já que em portais de notícias o tempo de carregamento e o ranqueamento em mecanismos de busca são fatores cruciais para o sucesso, influenciando diretamente visibilidade orgânica, indexação de conteúdo e recursos como o Google Discover.


Para equilibrar robustez e eficiência, optamos por uma arquitetura baseada em princípios atômicos, compondo o Design System a partir de elementos modulares reutilizáveis em diferentes contextos do produto. Essa abordagem garantiu escalabilidade sem gerar acúmulo de código desnecessário. Além disso, adotamos um modelo de folha de estilos estruturado por CSS variables, organizando tokens para características tipográficas e cromáticas, em vez de manter múltiplos arquivos estáticos. Essa escolha reduziu significativamente o peso do CSS, otimizando o carregamento e melhorando indicadores como o Largest Contentful Paint (LCP).
Com essa base consolidada, foi possível criar um sistema que mantém consistência visual, mas também se adapta às necessidades de cada cliente sem comprometer a performance geral. Essa estrutura modular possibilitou, na etapa seguinte, o desenvolvimento de diferentes modelos de personalização do Publisher, variando desde feeds e grids editoriais até opções de navegação e componentes interativos pensados para múltiplas realidades editoriais.
A personalização sempre foi um dos pilares estratégicos do Publisher, já que desde o início identificamos perfis de clientes bastante distintos. De um lado, havia portais com equipes reduzidas, que não poderiam investir tempo em ajustes detalhados; do outro, portais com maior estrutura, contando com designers próprios e demandas visuais mais sofisticadas. O desafio, portanto, era equilibrar simplicidade e flexibilidade, oferecendo um produto que seguisse à risca melhores práticas e normas heurísticas de UI/UX, mas que também fosse capaz de se adaptar a diferentes níveis de maturidade visual das identidades dos nossos clientes

Para atender a esses cenários, criamos um sistema de personalização que funciona em duas camadas. A primeira camada, mais simplificada, permite que um usuário leigo consiga alterar toda a identidade cromática do site a partir de apenas três campos no painel administrativo. Essa lógica foi viabilizada com um mecanismo baseado em CSS variables, que propaga automaticamente essas alterações para todo o produto, mantendo consistência visual em todas as aplicações cromáticas. Já a segunda camada permite ajustes mais avançados, possibilitando a personalização individual de elementos e sessões específicas, dando maior liberdade criativa para equipes de design mais experientes.
No nível estrutural, o Publisher oferece uma biblioteca extensa de opções visuais. São mais de 50 tipos de grids editoriais para compor sessões da home, variando em hierarquia de conteúdo, interação e destaque para diferentes tipos de matéria. Além disso, foram desenvolvidos diversos modelos de navegação, headers, footers, menus e títulos de sessões de editoria, assim como múltiplas combinações para páginas internas, como layouts de artigos, cabeçalhos e variações tipográficas.

Essa lógica modular e escalável não apenas ampliou a capacidade de personalização, mas também permitiu que portais migrassem de sites totalmente customizados – modelo tradicional da empresa – para uma solução baseada em produto, sem perder sua identidade visual. Com isso, clientes passaram a ter acesso a um ambiente mais seguro, facilmente atualizável e constantemente enriquecido com novos recursos, preservando a flexibilidade que antes só era possível com projetos desenvolvidos do zero.Essa abordagem garantiu uma alta diversidade visual entre os portais implementados, mesmo utilizando a mesma base de produto, o que foi fundamental para a adoção do Publisher em diferentes segmentos e perfis de negócio.
A monetização sempre foi um dos pilares mais sensíveis no desenvolvimento do Publisher, já que os portais de notícias operam com realidades e modelos de negócio extremamente diversos. Enquanto alguns clientes baseiam sua receita quase exclusivamente em vendas programáticas, outros têm estratégias híbridas, com foco em publicidade direta, parcerias institucionais e assinaturas. Desde o início, a proposta foi criar uma infraestrutura que não apenas potencializasse os modelos tradicionais, mas também ampliasse as oportunidades de receita, permitindo que portais de diferentes portes e perfis pudessem explorar ao máximo o valor comercial do seu tráfego.


Para isso, desenhamos um conjunto de recursos flexíveis, que variam de soluções mais sofisticadas – voltadas para anunciantes com alto investimento em comunicação – a opções mais simples e sazonais, adequadas para parceiros comerciais com menor orçamento. Cada funcionalidade foi pensada para ter alto impacto visual quando necessário, mas sem comprometer a performance do portal nem a experiência editorial. Entre os principais recursos, podemos destacar:

Uma solução já consolidada no mercado, mas que no Publisher ganhou maior amplitude. Além de permitir a publicação de conteúdos patrocinados, o recurso oferece múltiplas variações visuais para a identidade do anunciante, formas avançadas de interação com o conteúdo dentro das matérias e filtros que controlam sua exibição em listagens e na home.


Uma funcionalidade estratégica que permite a um ou mais patrocinadores vincularem sua identidade visual a uma editoria específica do site. Dessa forma, todas as matérias daquela sessão recebem a assinatura do apoiador, além da marca estar presente na página da categoria. É um formato altamente flexível e sazonal, já que pode ser ativado ou desativado a qualquer momento sem comprometer o conteúdo.


Pensados para campanhas de alto impacto e curta duração, os Skin Ads permitem o envelopamento visual de páginas inteiras, funcionando como uma experiência imersiva para campanhas sazonais ou eventos. O recurso conta com agendamento avançado e filtros que possibilitam a coexistência de múltiplas campanhas simultaneamente, sem conflitos.

Para necessidades mais pontuais, os blocos customizados oferecem liberdade para criar chamadas institucionais ou conteúdos comerciais em diferentes pontos do portal. Eles podem exibir imagens, títulos, links e cores personalizadas, além de contar com filtros de exibição por página ou seção. Essa solução é ideal tanto para campanhas internas do próprio portal quanto para parcerias comerciais.

O módulo de Paywall, oferecido como addon opcional, expande ainda mais as possibilidades de monetização. Ele permite desde bloqueios simples para captação de leads até a criação de modelos completos de assinatura, com diferentes planos e benefícios. Dentro desse recurso, estruturamos toda a experiência de usuário: telas de bloqueio com diferentes layouts, fluxos de cadastro, processo de pagamento e uma área logada para gerenciamento de conta. Além disso, o Paywall adiciona elementos complementares ao Publisher, como widgets de login e blocos para exibição de planos em landing pages.

Com essa arquitetura, o Publisher consegue atender tanto portais que dependem de formatos publicitários tradicionais quanto aqueles que buscam diversificar suas fontes de receita. Mais do que apenas inserir espaços de anúncio, o produto cria estratégias comerciais integradas ao contexto editorial, equilibrando performance, estética e experiência do usuário.
Embora o Publisher contemple uma ampla gama de recursos capazes de atender a maioria das necessidades de um portal de notícias, há situações em que o cliente demanda aplicações altamente específicas, seja para suprir exigências do próprio site ou para viabilizar parcerias comerciais com maior valor agregado. Para resolver esse ponto, desenvolvemos uma família de blocos exclusivos para o Gutenberg, permitindo a criação de aplicações personalizadas de forma simples e modular.
Dentro desse contexto, o segmento de Landing Pages se tornou um universo próprio no Publisher, pois viabiliza a construção de páginas com alto nível de personalização e flexibilidade, criando alternativas comerciais diferenciadas e com grande potencial de conversão.

Além dos blocos customizáveis, também foram criados templates pré-configurados, pensados para facilitar a atuação de portais com equipes reduzidas e otimizar o tempo de implantação. Entre os principais modelos, destacam-se:
Essa combinação entre blocos modulares e templates estratégicos garantiu que mesmo clientes com equipe enxuta pudessem executar campanhas e ações personalizadas com rapidez, sem depender de desenvolvimento adicional. Ao mesmo tempo, abriu espaço para portais maiores criarem experiências totalmente exclusivas e maximizarem o valor comercial do Publisher.
Durante o desenvolvimento do Publisher, participei diretamente da concepção, da produção visual e da definição das interações de uma ampla gama de recursos que expandem significativamente a proposta do produto. O ecossistema é vasto e contempla diversas soluções criadas para atender demandas específicas dos portais. Para não estender demasiadamente este conteúdo, exemplifico a seguir apenas alguns módulos que se destacam pela relevância e pelo impacto direto no dia a dia dos clientes:

Muitos clientes do Publisher produzem conteúdos seriados, como podcasts, programas de TV ou colunas fixas, que demandam uma organização diferenciada da simples listagem de notícias. Para atender essa necessidade, criamos um módulo específico para programas, permitindo transformar uma categoria comum de taxonomia em uma página dedicada. Esse recurso possibilita adicionar identidade visual própria para cada programa – incluindo logotipo, banners e paleta cromática – além de oferecer uma grade semanal de programação que melhora a experiência de navegação para o público.


Um dos momentos mais críticos para qualquer portal jornalístico é a cobertura eleitoral. Pensando nisso, desenvolvemos um módulo robusto que cobre desde o pré-período eleitoral até a apuração em tempo real. Inicialmente, ele organiza candidatos em um repositório estruturado, permitindo filtros por tipo de candidatura, estado e município, além de um índice alfabético para facilitar as buscas. Durante a apuração, a aplicação se integra diretamente à API do TSE, atualizando em tempo real informações como percentual de urnas apuradas, número de votos e resultados do primeiro e segundo turno.


Outro desafio identificado foi a dependência de muitos portais em canais como Google Discover e buscas orgânicas. Para ampliar o alcance e diversificar a aquisição de tráfego, desenvolvemos o Social Poster, uma ferramenta que gera criativos para redes sociais a partir das matérias publicadas no portal. Com ele, o cliente escolhe templates prontos, define cores, posição do título e informações complementares, criando rapidamente peças para Instagram, Facebook, WhatsApp e Telegram. Além disso, é possível controlar a aplicação por categoria ou tipo de matéria, garantindo maior automação sem perder a personalização.

Esses recursos reforçam a premissa central do Publisher: entregar soluções integradas que atendam realidades diferentes de operação, sem perder a flexibilidade para aplicações específicas de cada cliente.
Uma das principais preocupações do produto foi disponibilizar aos clientes uma ferramenta robusta para análise e acompanhamento de métricas de forma intuitiva, centralizada e nativamente integrada ao ambiente do portal. Embora existam plataformas consolidadas no mercado para esse tipo de análise, elas normalmente apresentam custos elevados e complexidade de adoção. O Dashboard da Seox surge como uma solução de alto valor agregado, já incorporada ao ecossistema do cliente, reduzindo a dependência de terceiros e oferecendo maior controle sobre os dados.

A ferramenta combina métricas avançadas de audiência, engajamento, SEO e monetização, permitindo acompanhar origens de tráfego, comportamento dos usuários em suas jornadas, taxas de conversão e impacto editorial de cada conteúdo. Além disso, o Dashboard consolida dados históricos e em tempo real em painéis dinâmicos e interativos, acessíveis para redações, equipes de produto e monetização, transformando informações complexas em insights acionáveis que otimizam decisões e impulsionam crescimento de audiência, engajamento e receita.

O Client Network foi concebido como uma aplicação interna da Seox para gerenciar de forma integrada toda a rede de clientes. Essa solução centraliza, em um único ambiente, informações capturadas a partir do Google Analytics 4 (GA4), Google Search Console (GSC) e do próprio WordPress, permitindo uma visão holística do desempenho digital. Dentro da aplicação, é possível gerar gráficos comparativos entre clientes, analisar projeções de métricas com base em variáveis customizáveis e consultar taxas de crescimento em períodos específicos, facilitando a identificação de tendências e gargalos.

Um segmento adicional do Client Network é dedicado ao monitoramento da performance técnica dos ambientes, possibilitando a análise de métricas de Core Web Vitals (CWV), como status de aprovação, Largest Contentful Paint (LCP) e Interaction to Next Paint (INP), além de relatórios de boas práticas de performance e acessibilidade via Lighthouse. A aplicação permite visualizações globais para toda a rede, bem como painéis individualizados por cliente, oferecendo granularidade na análise. Para lidar com o aumento da base de clientes, foi implementado um módulo de automação inteligente, que monitora continuamente as métricas de audiência e performance, emitindo alertas proativos quando identifica quedas ou picos anormais. Cada cliente conta com regras de monitoramento customizadas, garantindo uma análise adaptada à sua realidade.

Com essas soluções, a Seox fortalece seu ecossistema de produtos ao oferecer ferramentas analíticas avançadas, integradas e automatizadas, capazes de unir visão editorial, técnica e estratégica em um único ambiente. O Dashboard otimiza o processo decisório das redações e gestores, enquanto o Client Network eleva a governança de dados para toda a base de clientes, antecipando problemas e oportunidades. Em conjunto, essas aplicações não apenas reduzem custos e complexidade de gestão, mas também empoderam publishers com inteligência de dados, garantindo maior competitividade, eficiência operacional e escalabilidade sustentável.
A experiência de criação e evolução do Publisher foi singular para o meu desenvolvimento e amadurecimento profissional. Ao longo desse processo, pude aplicar de forma integrada todo o repertório em pesquisa, discovery, product design e UX/UI, transformando conceitos em soluções reais que impactam diretamente um produto utilizado por clientes de grande relevância no mercado, com milhões de usuários todos os meses. Sou grato à Seox pela confiança e pela oportunidade de ter participado ativamente da concepção e crescimento desse ecossistema, e desejo que o produto siga alcançando novos patamares de inovação e sucesso.
Aviso: Este projeto foi desenvolvido durante o período de prestação de serviços para a Seox. Todos os direitos de uso, reprodução e distribuição estão integralmente reservados à empresa, sendo vedada qualquer utilização não autorizada.
Seja para falar sobre projetos, colaborações ou oportunidades profissionais, estou à disposição. Envie seu recado por aqui ou me encontre nas minhasredes sociais.
Em breve retorno sua mensagem para batermos um papo e trocar ideias