Gazeta Live

UX/UI Design • Editorial Control Panel / UX/UI Design • Painel de Controle Editorial

Following the successful redesign of A Gazeta’s website, Rede Gazeta invited me back to design Gazeta Live, the control panel responsible for managing all content published on the news portal. Unlike a navigation interface, a back office requires technical focus, precision, and usability geared toward professionals who deal with a high volume of information on a daily basis.

Após o sucesso do redesign do website A Gazeta, fui convidado novamente pela Rede Gazeta para projetar o Gazeta Live, o painel de controle responsável por alimentar todo o conteúdo publicado no portal de notícias. Diferente de uma interface de navegação, um backoffice exige foco técnico, precisão e usabilidade voltada para profissionais que lidam diariamente com alto volume de informações.

The Challenge / O Desafio

 
The goal was to redesign the control panel, transforming it into an efficient interface capable of optimizing editorial workflow and making content teams’ work more agile, intuitive, and reliable. The challenge was to balance the complexity of functions—creating and editing covers, stories, articles, media, newsletters, settings, and user management—with clear, consistent, and easy-to-learn navigation.

O objetivo era redesenhar o painel de controle, o transformando em uma interface eficiente, capaz de otimizar o fluxo editorial e tornar o trabalho das equipes de conteúdo mais ágil, intuitivo e confiável. O desafio esteve em equilibrar a complexidade de funções — criação e edição de capas, matérias, artigos, mídias, newsletters, configurações e gestão de usuários — com uma navegação clara, consistente e de fácil aprendizado.

Project time / Tempo de projeto

 
2 months and 15 days.

2 meses e 15 dias.

Research / Pesquisa

 
A Gazeta, Rede Gazeta, Dribbble, Behance, Dropbox Paper, Google Drive.

Users / Usuários

 
This project has a particularity, where I was able to personally meet all the people who would use the future Gazeta Live. Therefore, the work of mapping and user expectations can be much faster and more efficient. Public recognition took place through direct meetings, interviews and suggestions, followed by an approval process by future users.

Esse projeto tem uma particularidade, onde eu pude conhecer pessoalmente todas as pessoas que iriam utilizar o futuro Gazeta Live. Logo, o trabalho de mapeamento e expectativa dos usuários pode ser muito mais rápido e eficiente. O reconhecimento do público se deu por reuniões diretas, entrevistas e sugestões, seguidas de um processo de aprovação pelos futuros usuários.

Ideation / Ideação

 
The idea was to create a control panel, focused on managing the content of the A Gazeta website. It is possible to create and edit covers, articles, articles, media, newsletters and other functions. The panel still has the purpose of being able to configure the website and its own operation, in addition to managing users. The design decisions were aimed at creating an interface consistent in its layout, practical, quick to learn in use and with well-defined components.

A ideia foi criar um painel de controle, focado em gerenciar o conteúdo do website A Gazeta. Nele é possível criar e editar capas, matérias, artigos, mídias, newsletters entre outras funções. O painel ainda tem a finalidade de poder configurar o website e seu próprio funcionamento, além de gerenciar usuários. As decisões de projeto foram destinadas a criar uma interface consistente em seu layout, prática, de aprendizado rápido no uso e com componentes bem definidos.

The focus was on web browsing, on a computer, with a simplified navigation of functions in its responsive mobile version.

O foco foi na navegação web, em um computador, tendo em segundo uma navegação simplificada de funções em sua versão mobile responsivo.

Design Process / Processo de Design

 
The project was conducted over a 75-day cycle, with iterative deliverables organized into UX and UI stages.
 
1. Research and Initial Alignment – ​​Interviews and meetings with stakeholders and future users (writers, editors, and managers), mapping expectations and needs.
 
2. Mind Map and Wireframes – Structuring editorial workflows, divided into sprints following the SCRUM model.
 
3. UI Design – Creation of an interface consistent with the identity of the A Gazeta website, using expandable side menus, light backgrounds, and optimized contrast for reading.
 
4. Navigable Prototype – Development of a prototype for validation and usability testing.
 
5. Review and Iteration – Adjustments based on stakeholder and user feedback until final approval.

O projeto foi conduzido em um ciclo de 75 dias úteis, com entregas iterativas organizadas em etapas de UX e UI.
 
1. Pesquisa e Alinhamento Inicial – Entrevistas e reuniões com stakeholders e futuros usuários (redatores, editores e gestores), mapeando expectativas e necessidades.
 
2. Mapa Mental e Wireframes – Estruturação dos fluxos editoriais, separados em sprints seguindo o modelo SCRUM.
 
3. UI Design – Criação de uma interface consistente com a identidade do website A Gazeta, utilizando menus laterais expansíveis, fundos claros e contraste otimizado para leitura.
 
4. Protótipo Navegável – Desenvolvimento de protótipo para validação e testes de usabilidade.
 
5. Revisão e Iteração – Ajustes baseados no feedback de stakeholders e usuários até aprovação final.

UI

 
The Gazeta Live interface was developed following the visual color and typography standards of the A Gazeta website, ensuring consistency across products. For navigation, I opted for an expandable side menu that organizes the main sections and allows quick access to content management tools. The use of light backgrounds and well-defined contrasts facilitates reading on long screens with large amounts of information, such as article lists or media libraries. Each component was designed to be modular and reusable, creating a clean, scalable, and intuitive experience for editorial teams, reducing the learning curve and increasing day-to-day efficiency.

A interface do Gazeta Live foi desenvolvida seguindo os padrões visuais de cores e tipografia do website A Gazeta, garantindo consistência entre os produtos. Para a navegação, optei por um menu lateral expansível, que organiza as principais seções e permite acesso rápido às ferramentas de gestão de conteúdo. O uso de fundos claros e contrastes bem definidos facilita a leitura em telas longas e com grande volume de informação, como listas de artigos ou bibliotecas de mídia. Cada componente foi desenhado para ser modular e reutilizável, criando uma experiência limpa, escalável e intuitiva para os times editoriais, reduzindo a curva de aprendizado e aumentando a eficiência no dia a dia.

Solutions Created / Soluções Criadas

 
• Optimized editorial flow, reducing friction and accelerating news publication.
• Consistent and clear interface, prioritizing readability and simplified navigation.
• Complete management of content, users, and website settings.
• Responsive adaptation, allowing simplified access on mobile devices.
• Continuous integration with development, ensuring alignment between design and technology.

• Fluxo editorial otimizado, reduzindo fricções e acelerando a publicação de notícias.
• Interface consistente e clara, priorizando legibilidade e navegação simplificada.
• Gestão completa de conteúdo, usuários e configurações do website.
• Adaptação responsiva, permitindo acesso simplificado em dispositivos móveis.
• Integração contínua com desenvolvimento, garantindo alinhamento entre design e tecnologia.

Results / Resultados

 
Gazeta Live was delivered on time, with a robust, intuitive control panel that was validated by the content teams that would use it daily. In addition to improving operational efficiency, the project was delivered with planning for future versions in place, ensuring the platform’s continuous evolution.

This project demonstrates my experience managing projects, conducting meetings with clients and stakeholders, aligning deliverables with developers, and transforming complex processes into functional and scalable digital solutions.

O Gazeta Live foi entregue dentro do prazo, com um painel de controle robusto, intuitivo e validado junto às equipes de conteúdo que o utilizariam no dia a dia. Além de melhorar a eficiência operacional, o projeto foi entregue já com planejamento para futuras versões, assegurando a evolução contínua da plataforma.

Este projeto demonstra minha experiência em gerenciar projetos, conduzir reuniões com clientes e stakeholders, alinhar entregas com desenvolvedores e transformar processos complexos em soluções digitais funcionais e escaláveis.