Folha Dirigida por Qconcursos

1.

Cenário

Em 2022, o Qconcursos, preparatório completo para concursos, adquiriu a Folha Dirigida visando transformar a vida das pessoas por meio da educação de qualidade.

O objetivo desse projeto foi renovar e modernizar o ambiente de consumo de notícias da Folha e integrá-lo com a plataforma de questões da Qconcursos. Além disso, era necessário unificar e modificar o ambiente interno utilizado pelas duas organizações para cadastrar notícias conforme as necessidades dessa nova plataforma.

‍

‍

2.

Mapeando requisitos e tarefas

No começo do projeto a equipe realizou reuniões e discussões com os stakeholders da Folha de modo a entender melhor o escopo e os principais objetivos do projeto.

A partir dessas conversas, foi possível definir e planejar as etapas a serem realizadas através de épicos e tarefas. As duas principais iniciativas mapeadas foram a reformulação da ferramenta de ADMIN, onde eram cadastrados e armazenados os dados da plataforma e o desenvolvimento de um portal de notícias baseado na estrutura do site da Folha Dirigida.

Com relação à primeira iniciativa, foi realizado um mapeamento dos requisitos de cada página do ADMIN atual, pontuando o que ia ser mantido, removido ou modificado. A partir desses requisitos, a equipe de design criou wireframes na plataforma Miro com uma estrutura básica que serviram de base para a implementação das telas finais.

O mesmo processo de mapeamento de requisitos foi realizada para iniciativa relacionada ao portal de notícias.

3.

Montando wireframes

A equipe de SEO foi encarregada de criar esboços da plataforma de notícias que demonstrassem a maneira mais eficiente de compor o layout das telas do ponto de vista de otimização de SEO.

Os esboços gerados por eles foram fundamentais para o desenvolvimento do projeto, pois pudemos visualizar a estrutura e a organização das telas de forma clara e objetiva. Assim, foi possível realizar ajustes necessários antes de partir para as telas de alta fidelidade.

‍

4.

Definindo os componentes

Neste projeto utilizamos o UI kit chamado Untitled UI como base para os componentes da interface. No entanto, realizamos várias modificações nos tokens de design para que o resultado final estivesse alinhado com a linguagem visual da marca da Folha. Para garantir que a implementação dos componentes fosse mais eficiente e consistente, geramos uma documentação detalhada para os desenvolvedores. Ela continha informações sobre cada componente, incluindo sua funcionalidade, comportamento, estados e aparência.

‍

‍

5.

Telas finais

Com os componentes e os tokens de design definidos, começamos a montar as telas finais no Figma, conforme os requisitos mapeados e os wireframes. Todas as telas e fluxos de navegação foram projetados e detalhados de forma responsiva.

Durante todo o esse processo houve uma troca constante com os desenvolvedores, onde nós do time de design testávamos e validávamos cada tela, elemento e espaçamento da interface para que as modificações necessárias fossem implementadas no código.

‍

6.

Resultados

A plataforma foi lançada com sucesso, obtendo bons números de tráfego nas primeiras semanas e uma reação positiva dos leitores da Folha Dirigida. Certas funcionalidades e elementos de interface chegaram a ser mapeados para uma futura V2 e estão no Backlog da equipe.

‍

‍

7.

Ensinamentos

Aprendi muito nesse projeto, principalmente com relação a outras áreas fora do design como SEO e Negócios. Foi uma ótima experiência trabalhar com um UI kit, que nos permitiu ter muita agilidade na criação da interface.