TRE-PR News – UX Case

A equipe de design do Tribunal Regional Eleitoral do Paraná (TRE-PR) foi solicitada para a criação de uma nova solução para a geração de newsletters da Seção de Jornalismo (SJOR) do tribunal, o projeto foi então encaminhado para mim e aqui relato como foi feito o desenvolvimento com a visão de produto digital.

Briefing

As conversas iniciais com os clientes tiveram como principais objetivos alinhar as expectativas e definir o público leitor, após esse momento ficou claro para a equipe de design que se esperava somente a criação de um novo layout para os pdf’s que normalmente eram enviados em anexo à newsletter (que nesse momento consistia basicamente em um email padronizado com hyperlinks) e que o público leitor principal eram os servidores da Justiça Eleitoral paranaense, outros servidores federais e diversos juízes do estado, ao que se concluiu a necessidade de um tom mais ‘formal’ para o layout do resultado final.

 

Em resumo, a solução anterior utilizava:

• A fomatação padrão do provedor de email
• PDF’s no padrão do editor de texto para a reprodução de matérias na íntegra

O problema foi então abordado por uma visão de UX Design, levando em consideração a experiência e problemas de usabilidade dos principais usuários da newsletter – os leitores e os jornalistas que a produziam. A partir de conversas com estes usuários foi definido que haveria a necessidade da criação de um produto que possuísse as seguintes características:

• Facilitasse o fluxo atual de leitura das newsletters, pois essa foi considerada muito poluída com a necessidade de leitura em 3 locais diferentes (no corpo do email, nos pdf’s em anexo e no website da Justiça Eleitoral)
• De fácil criação por parte da Seção de Jornalismo
• Permitisse o uso de imagens como apoio visual aos textos
• Fosse visualmente atraente e adequado a identidade visual do TRE-PR
• Fosse gratuito, pois um processo de compra ou assinatura exigiria um longo processo interno

Alternativas

Para a criação das alternativas foi feita uma sessão de brainstorming, que ao final resultou em 3 principais alternativas, são elas:

1. Redesign dos PDF’s

A primeira alternativa considerada foi a solicitada nas conversas iniciais, consistindo basicamente no redesenho dos pdf’s enviados em anexo com o email. Essa solução foi considerada insatisfatória pelos seguintes motivos:

• Não entrega a melhor fluidez no processo de leitura da newsletter, pois mantém a divisão entre corpo e anexos.
• Não altera a leitura no corpo do email, que no provedor Gmail foi considerada difícil por conta das colunas muito grandes (como visto na imagem acima), além de não representar os valores da marca do TRE-PR
• Exige duas etapas para a criação da newsletter: criação dos anexos e criação do corpo do email

2. Templates padronizados 

A próxima solução a ser considerada foi o uso de templates de email em HTML, que facilitam a distribuição das newsletters ao mesmo tempo que apresentam um produto agradável e de fácil gerenciamento. Entretanto, o uso de templates existentes não agradavam pois:

• Não se adequam a identidade visual e têm pouca possibilidade de personalização
• Não são gratuitos em sua maioria, e também porque nesse momento já começou a ser discutida a solução que viria a ser a final
• Exigem um treinamento próprio

Solução encontrada

3. Template próprio

A solução que veio a ser definida foi a criação de um ‘Gerador de newsletters’ próprio ao TRE-PR, que poderia satisfazer todas as necessidades listadas de forma satisfatória, além de um layout responsivo, importante quando se considera que a cada dia mais se usa dispositivos mobile para leitura de emails.

Com a decisão interna da seção de design de que essa seria a solução adotada, foi criado um protótipo visual (bem diferente da solução final) para apresentação aos demandantes.

Mais uma reunião foi realizada para validação sobre a possível solução, que foi aprovada com bastante entusiasmo. A única dúvida foi referente a criação de emails em HTML por jornalistas que não conhecem a sintaxe, para isso foi explicado que haveria a criação de uma interface amigável que automatizaria o processo, sem necessidade de edição do HTML por parte dos jornalistas.

Projeto de Design

Após a aprovação deu-se início a segunda e terceira etapas do projeto, são elas respectivamente:

• O projeto de design – que consistiu na criação de um layout final para a newsletter e de uma interface que permitisse a criação de forma fácil e amigável.
• O projeto técnico – também elaborado pelo autor, é a elaboração da interface em HTML, CSS e Javascript (por questões de infraestrutura do tribunal não foi possível utilizar nenhuma linguagem de backend).

Cada uma das etapas apresentaram diversos desafios para a elaboração, entretanto, aqui se destacará o projeto visual.

Para a criação do gerador da newsletter foram analisadas as necessidades da Seção de Jornalismo e com base nisso uma matriz de funções inicial foi criada, são as funções necessárias ao produto:

• Adicionar matérias ‘primárias’, com imagem, título e texto
• Adicionar matérias ‘secundárias’, com título e ‘gravata’
• Adicionar imagens nas matérias principais
• Adicionar links nas matérias secundárias e às vezes no meio dos textos
• Representasse fielmente a newsletter final
• Exportar o HTML/CSS de maneira que não exija conhecimento técnico do jornalista (idealmente ao clique de um botão)

Para a newsletter o layout foi refinado de forma que se chegou em um resultado mais próximo ao final e então mais um protótipo foi feito, dessa vez já em HTML/CSS.

O segundo protótipo foi validado com a seção interessada e foi feita a solicitação de um envio-piloto da newsletter nesse novo formato.

Um layout inicial do ‘gerador’ também foi desenvolvido.

Após mais uma rodada de apresentação dos modelos – agora bastante convencidos da facilidade de criação de newsletters mais interessantes – foi constatado que o produto agregava tanto valor que seria justificada uma curadoria dos materiais enviados daquele momento em diante (anterioremente era uma reprodução integral dos materiais publicados pelo TRE-PR).

Também ficou decidido que uma nova seção seria adicionada à newsletter, com reprodução dos conteúdos divulgados nas redes sociais.

Juntamente com as novas alterações uma rodada de refinamento da interface foi feita, com diversas pequenas melhorias na usabilidade, das quais se destacam:

• Refinamento dos modais de inserção de imagens
• Capacidade de remoção de matérias adicionadas por engano
• Melhoria nas mensagens de erro e no layout dos prompts mostrados

Depois da rodada de alterações o projeto técnico foi finalizado e colocado em produção. Após a primeira semana de uso mais algumas pequenas alterações técnicas e de usabilidade foram necessárias.

Melhorias

Apesar de considerado um sucesso, o projeto ainda conta com funções e melhorias que poderiam agregar mais valor ao usuário final, mas que por uma razão ou outra não puderam ser implementadas, das quais se destacam:

• Automatização do processo de inserção de imagens: atualmente a imagem precisa ser enviada como um link do Google Drive para que funcione.
• Automatização do envio do email: de maneira similar a alguns dos templates pesquisados,na versão atual esse processo é feito ‘manualmente’ colando o HTML no provedor de email.
• Botão de visualização: é possível que algum provedor de email não suporte adequadamente a solução em HTML/CSS, a solução seria a criação de uma cópia da newsletter e disponibilizada na internet, para que os usuários pudessem acessar via link no topo do email.

Repercussões e resultados

Por fim, é interessante destacar algumas das repercussões que são resultado direto do projeto, são elas:

• Conforme já citado, após a apresentação da ideia uma curadoria das matérias passou a ser feita, melhorando a qualidade do material produzido
• A criação de um projeto spin-off para a criação de convites enviados por email (que permite a confirmação dos convidados em apenas 2 cliques)

Também em conversas posteriores concluiu-se que os principais resultados do novo método de geração das newsletter são:

• É funcional e útil, com uma boa usabilidade de forma geral (o produto está há um ano no ar em fevereiro/2023 e poucos problemas foram relatados e todos corrigidos).
• Facilita a vida das trabalhadoras, que podem centralizar a geração da newsletter em uma ferramenta e se preocupar somente com a parte textual.
• Facilita a vida dos leitores, pois permite a leitura em um só local e ainda ganham o conteúdo com a curadoria feita.