resumo da experiência

Este foi meu primeiro projeto como Designer de Experiência e Interface do Usuário (team of one), atuando de ponta-a-ponta na entrega, acompanhei do início ao fim seu cronograma. Contratado pela Raro Labs, atuando de Março de 2022 até Junho de 2023.

Este projeto foi um marco na minha carreira, me proporcionando grandes aprendizados e consolidando minhas habilidades em UX/UI design e colaboração multifuncional em projetos.

Desde já agradeço profundamente a todos que fizeram parte desta história.

Contexto

O Instituto Reúna precisava reformular seu site para melhorar a experiência do usuário e resolver problemas com funcionalidades de gestão no CMS. O site original enfrentava dificuldades em engajar os usuários e em manter a arquitetura da informação organizada, além de atritos no cadastro de usuários e download dos materiais do site.

Desafio

Realizei uma análise profunda, incluindo pesquisas e entrevistas com stakeholders. O objetivo era identificar os principais pontos de fricção na usabilidade e na navegação, além de propor melhorias no redesign da interface e desenvolver um design system que permitisse futuras melhorias de forma eficiente.

Impacto

• Aumento de 62.3% no número de usuários recorrentes.

• Aumento de 15% no tempo médio de engajamento dos usuários.

• Redução de 20% do tempo médio de cadastro de conta no site.

• Maiores problemas e dores em UX foram sanados.

• Satisfação da Empresa com excelente feedback ao time; cultura de design interna mais presente na empresa.

• Introdução a uma série de novas features com eventos de captura de dados e monitoramento contínuo da base de usuários e gestão de conteúdos.

• UI design modular e código mais coerente, possibilitando escalabilidade e melhorias contínuas.

O projeto resultou em um site mais eficiente, acessível e intuitivo, proporcionando uma melhor experiência para todos os públicos-alvo do Instituto Reúna, desde professores e coordenadores pedagógicos até secretários de educação e outros visitantes do site.

Sobre o projeto

O Instituto Reúna é uma organização sem fins lucrativos dedicada à educação. Possui um website com páginas de conteúdos que disponibilizam materiais de apoio técnico pedagógicos voltados para o sistema educacional brasileiro, baseado na BNCC (Base Nacional Comum Curricular).

Todo o conteúdo é disponibilizado gratuitamente, mediante cadastro do usuário. A gestão do website é feita em seu próprio CMS pelo usuário administrativo.

Portanto, o projeto foi focado em dois tipos de usuário:

O "usuário admin" caracterizado pelos próprios colaboradores do instituto e suas necessidades a nível de negócio.

E o "usuário visitante" caracterizado pelo público-alvo do Instituto, constituído por:

• Gestores de Secretarias Ensino Municipais e Estaduais.

• Gestores de Escolas (Coordenação Pedagógica, Diretoria).

• Professores.

Suas principais métricas de acesso e disseminação são o numero de usuários visitantes, usuários retornantes, dados de cadastro, taxa de download dos materiais e feedbacks internos e externos. A empresa não possui equipe de design e/ou desenvolvimento dedicada.

—

imersão

Comecei com uma imersão através de Desk Research e análise heurística das telas antigas e fluxos do usuário visitante e usuário administrativo. Levantamento dos chamados técnicos, descoberta mais profunda dos atritos de UX e bugs por trás e limitações do website e painel administrativo.

Além de Benchmarking do cenário da educação brasileira e demais organizações de educação do terceiro setor no Brasil e no mundo. Imersão em dados e informações relevantes para compreender o cenário educacional e as necessidades específicas dos nossos usuários.

Depois conduzi entrevistas com diferentes stakeholders, de colaboradores do Reúna a diferentes profissionais da educação, afim de imergir em suas realidades e conhecer suas rotinas de trabalho.

Assim, mapeei as jornadas de usuários visitantes e administrativos, entendi suas necessidades, problemas e possíveis oportunidades.

A seguir, nós definimos a prioridade em iniciar os trabalhos pelo módulo de gestão de conteúdos (CMS).

—

módulo CMS

A situação do módulo de gestão de conteúdos é critica. Os bugs frequentes minam funcionalidades e geram frustração. Há também insatisfação dos colaboradores com a usabilidade do sistema, dificultando a criação e gestão de conteúdos, como também nas limitações na atualização e organização de materiais de apoio, dentre outros problemas.

Para transformar essa realidade, defini prioridades junto ao time e ao cliente. Nosso foco inicial foi sanar as dores do usuário administrativo, que precisava de um ambiente de trabalho mais eficiente e intuitivo.

Antes

Em relação ao módulo administrativo de CMS, foram identificados:

• Bugs frequentes que comprometem a funcionalidade (código precisava ser refatorado).

• Insatisfação dos colaboradores com a usabilidade do CMS.

• Dificuldades na criação e gestão de conteúdos.

• Falta de ferramentas para busca personalizada e gestão de usuários.

• Limitações na atualização e organização de materiais de apoio.

• Desejo do cliente por uma nova forma de organizar os conteúdos no site.

• Ausência de integração com ferramentas de Analytics e coleta de feedbacks.

• Dificuldades na rotina de tratamento dos chamados técnicos e mensagens enviadas ao contato do Instituto.

Depois

Isso levou aos próximos entregáveis:

• Redesign da interface do CMS, focando na usabilidade e introdução de novas features.

• Melhorias significativas na seção de criação e gestão de conteúdos, permitindo mais modularidade.

• Reorganização da gestão de materiais de apoio para facilitar a atualização e categorização.

• Introduçao de novas features ao módulo de gestão de usuários.

• Criação de um modulo para gerar páginas personalizadas, com diferentes conteúdos, artigos de blog, referencias, etc.

• Captação de novos dados de impacto relacionados ao uso de conteúdos e materiais do site.

• Integração do dashboard do Analytics para visualização de dados de impacto direto do CMS.

• Solução para organização e gestão dos chamados técnicos.

A seguir, vou expor as soluções entregues no módulo CMS.

—

Criação de Conteúdo

A iniciar pelo módulo de criação das páginas de conteúdo do Reúna.

As páginas de conteúdo cadastradas pelo usuário admin abrigam textos informativos e materiais de apoio disponíveis para download do usuário visitante.

🛠 Problemas:

• CMS com apenas 3 layouts fixos de conteúdo, limitando a criatividade e a personalização na organização dos materiais de apoio.

• Impossibilidade de separar páginas de conteúdo sobre um mesmo tema para públicos-alvo distintos.

• Impossibilidade de salvar rascunhos ou desativar temporariamente conteúdos, forçando os usuarios administrativos a publicarem apenas conteúdos finalizados.

• Materiais de apoio cadastrados individualmente na página de conteúdo, sem nenhum vínculo entre si.

• Problemas com upload de imagens.

✅ Soluções:

• Criação de um sistema de conteúdo mais modular e altamente personalizável.

• Implementação de um editor de texto mais rico, com mais opções de formatação e adição de imagens.

• Permitir a separação de conteúdos por públicos-alvo distintos, facilitando a organização e direcionamento do material.

• Adição de novas funcionalidades, como salvar rascunhos e pré-visualizar páginas antes da publicação, proporcionando mais controle e flexibilidade.

• Prototipagem e Testes de Usabilidade com usuários administrativos para testar e refinar a nova proposta.

• Aperfeiçoamento do sistema de upload de imagens, facilitando a inserção e gerenciamento de mídias com integração direta na biblioteca.

• Integração com a biblioteca de materiais de apoio, permitindo que os arquivos anexados aos conteúdos sejam sincronizados e atualizados simultaneamente em todas as instâncias onde são utilizados.

—

Biblioteca de Materiais de Apoio

O cliente possui grande quantidade de arquivos que são armazenados em seu sistema e disponibilizados ao público.

Esses materiais são produções técnico pedagógicas desenvolvidas pelo Reúna, constituídas majoritariamente por arquivos .PDFs, como apostilas, impressos e materiais instrucionais, vinculados a uma ou mais página de conteúdo.

A biblioteca de materiais de apoio é o ambiente onde os usuários administrativos controlam esses recursos.

Mapeei a arquitetura do módulo e, junto ao time, revisamos para melhor integração e gestão dos arquivos relacionados aos materiais de apoio.

🛠 Problemas:

• Funciona apenas como um gerador de links para os arquivos, sem permitir edição da URL ou do próprio nome do arquivo.

• Não há nenhum tipo de categorização e/ou modificação ao adicionar um arquivo.

• Arquivos anexados durante a criação de conteúdo não possuem nenhum tipo de vínculo com o repositório de arquivos da biblioteca.

• Pela falta de integração com a biblioteca, os arquivos anexos nos materiais de apoio não são sincronizados, portanto não podem ser simultaneamente alterados, modificados ou excluídos.

• Dificuldade em procurar e encontrar arquivos pela listagem da base de dados.

✅ Soluções:

• Benchmarking de features faltantes para gestão e controle eficiente dos arquivos arquivos.

• Mapeamento de todo o fluxo do arquivo no sistema antigo, identificando as limitações da biblioteca em seu estado atual.

• A proposta de Integração dos materiais de apoio inseridos nos conteúdos diretamente com a biblioteca de materiais de apoio.

• Agora, arquivo cadastrado como material de apoio em um ou mais conteúdo(s), uma atualização feita nele reflete em todas as outras instancias, possibilitando permitir a editar URL.

• Gestão de materiais aprimorada com informações adicionais sobre os arquivos associados, métricas de impacto e filtragens personalizadas.

—

Estatísticas e Dados de Impacto

Uma das faltas do CMS era analisar o engajamento e feedback dos usuários aos conteúdos e materiais disponibilizados no site. Bem como poder visualizar em tempo real o dashboard com dados de impacto importantes ao cliente.

🛠 Problemas:

• Não há captação de métricas de impacto do conteúdo ou material, deixando uma lacuna na análise de desempenho individual dos recursos.

• Falta de visualização de avaliações individuais (feedback) feitas sobre um conteúdo.

• Falta de integração com o dashboard do Data Studio para monitoramento de dados de impacto.

✅ Soluções:

• Implementação de funcionalidade que permite aos usuários visitantes avaliar e salvar páginas de conteúdo e materiais de apoio específicos.

• Captação dessas métricas, incluindo NPS médio e número de vezes que os conteúdos foram salvos na coleção dos usuários.

• Interface para visualizar as avaliações individuais feitas sobre um conteúdo; e número de conteúdos e materiais salvos.

• Filtragem dos feedbacks de forma personalizada de acordo com o público-alvo respondente.

• Integração com o Data Studio do cliente.

—

Gestão de Usuários e Chamados

Como o único requisito para acessar e consumir os conteúdos do Reúna é mediante o cadastro do usuário visitante, ter o controle administrativo sobre este e seus dados é de suma importância. Bem como ter um eficiente gerenciamento de dúvidas, sugestões, problemas e outras mensagens de usuários que desejam se conectar com o cliente.

🛠 Problemas:

• Ausência de filtros e funcionalidades de busca.

• Falta de clareza na verificação de usuários inscritos ao mailing gerava problemas na comunicação organizacional e marketing.

• Sem um sistema de identificação, os e-mails recebidos eram agrupados em uma única thread, complicando o gerenciamento dos chamados.

• A categorização manual e o reencaminhamento de e-mails para os setores responsáveis eram tarefas demoradas e sujeitas a erros.

Soluções:

• Implementação de funcionalidades de busca avançada com filtros específicos.

• Novas funcionalidades para o controle, gestão e edição dos dados dos usuários, facilitando o gerenciamento das informações.

• Redesign completo da tabela de visualização dos dados dos usuários

• Implementação de um sistema que gera um número de identificação único para cada chamado recebido, seguido da categoria correspondente. Isso diferenciou claramente cada e-mail recebido, evitando agrupamentos desnecessários.

• Criação de regras automáticas para identificar, categorizar e reencaminhar os chamados para os setores responsáveis. Isso otimizou o tratamento dos e-mails recebidos, melhorando a resposta e a resolução dos chamados.

—

website

O objetivo era construir um site que atendesse e comunicasse a todos os públicos-alvo do Instituto Reúna, abrangendo desde gestores públicos, escolas, educadores até parceiros e patrocinadores. Deveria transmitir de forma clara e envolvente a mensagem e o storytelling do Instituto, gerando valor e engajamento com todos os seus usuários visitantes.

E, mais importante, deveria possibilitar que o usuário visitante se cadastrasse e obtivesse acesso, podendo assim buscar, visualizar e consumir os materiais e conteúdos fornecidos pelo cliente.

Antes

• Sérios problemas de responsividade da UI.

• Arquitetura da informação confusa, dificultando a localização de conteúdos no site.

• Problemas na experiência do usuário, especialmente durante o processo de cadastro, com vários bugs e taxas de abandonos de cadastro.

• O design do site não era atraente e não refletia a imagem que o cliente desejava transmitir.

Depois

• Redesign completo do website institucional.

• Melhoria da responsividade da UI para diferentes dispositivos.

• Reestruturação da Arquitetura da Informação, facilitando a navegação e a localização de conteúdos no site.

• Resolução dos problemas de experiência do usuário, especialmente no processo de cadastro, reduzindo a taxa de abandono em mais de 40%.

• Design mais alinhado com a imagem e os valores do cliente, gerando maior engajamento dos usuários.

—

Content e Visual Design

Os maiores problemas identificados estavam ligados à interface e à usabilidade. Através da geração e análise de dados, foram mapeadas melhorias que envolveram testes de usabilidade e rodadas de ideação com stakeholders.

🛠 Problemas:

• A interface não se adapta bem a diferentes dispositivos, resultando em uma experiência quebrada.

• Heatmap e dados capturados indicam que os usuários não exploram o site de maneira eficaz, com muitos cliques errados e navegação confusa.

• Problemas de navegabilidade entre usuários.

• Falta de feedback adequado para as ações dos usuários e ausência de telas de estado vazio para guiar os usuários.

• Análise heurística mostra problemas na construção das interfaces, principalmente relacionado a carga de informação visual, impactando o cognitivo dos usuários.

• Conteúdo textual confuso e prolixo, dificultando a compreensão da mensagem do Instituto.

• Insatisfação geral dos colaboradores com o design visual e a escrita dos conteúdos e textos na landing page e página institucional.

  
  

✅ Soluções:

• Redesign completo, focando em um visual mais moderno e atraente que refletisse a identidade do Instituto e melhorasse a navegabilidade.

• Simplificação da linguagem verbal e não-verbal do site, aplicando técnicas de chunking para dividir informações em blocos menores e mais digestíveis.

• Reestruturação da home page para destacar informações essenciais logo de cara, facilitando o acesso de conteúdos sugeridos a usuários de forma personalizada.

• Foco em acessibilidade, atingindo nível AA no website segundo critérios WCAG, com features como aumento de tamanho de texto e modo de cor alterável.

—

Arquitetura da Informação

A arquitetura da informação do website do Instituto Reúna precisava ser reformulada para proporcionar uma navegação intuitiva e eficiente. O objetivo era permitir que os usuários encontrassem e acessassem conteúdos de seu interesse com facilidade, baixassem materiais de apoio e, idealmente, aplicassem esses recursos em suas secretarias, escolas e/ou salas de aula.

No entanto, a estrutura confusa do site atual dificultava essa experiência, gerando problemas de usabilidade no site. Problemas de navegabilidade, falta de clareza na organização dos conteúdos e dificuldades na indexação comprometiam a eficiência do site.

As soluções implementadas partiram de pesquisas feitas com usuários e embasada em dados empíricos. Visaram melhorar o sitemap, facilitar a navegação com funcionalidades intuitivas, personalizar a experiência do usuário e organizar os conteúdos de maneira mais lógica, personalizável e acessível.

🛠 Problemas:

• Usuários navegavam sem saber exatamente o que procurar ou o que era de seu interesse; falta de amarração entre os materiais no user flow.

• Usuários usam apenas do menu-topo (header) para navegação, e ainda assim enfrentam dificuldades com esse componente;

• Percepção do cliente de que a organização dos conteúdos no site não transmitia a visão de como deveriam ser acessados e consumidos.

• Problemas de indexação em mecanismos de busca.

✅ Soluções:

• Otimização do sitemap, permitindo que usuários acessem e encontrem conteúdos de forma mais ampla e intuitiva, com pesquisa global, recomendações personalizadas, listas temáticas de conteúdos e materiais, páginas de estado vazio com sugestões, etc.

• Card sorting dos conteúdos e materiais do Instituto para reformular a arquitetura da informação do site.

• Clusterização dos dados obtidos para identificar padrões e a melhor forma de organizar os resultados pela média dos respondentes.

• Pesquisa survey com usuários público-alvo do Instituto para identificar prioridades de busca e categorias como componente curricular, etapa de formação, público-alvo, tipo de material e formato de mídia.

• Adição ao Módulo do CMS de feature para criar listas personalizadas com páginas de conteúdos e outros recursos e referências, cadastrados e modificados pelo painel admin.

• Cadastramento de tags nas listas como etapa de formação e público para que o algoritmo do site recomende a lista para o público-alvo adequado.

—

Fluxo de Cadastro

O cadastro eficiente e sem atritos é essencial para garantir que os visitantes do site se tornem usuários ativos, podendo assim acessar e utilizar os materiais e conteúdos fornecidos pelo Instituto.

No entanto, foram identificados diversos problemas que comprometiam a experiência do usuário durante o processo de cadastro, resultando em altos índices de abandono e frustração.

Havia também uma alta frequência de reportes de problemas técnicos, com usuários enfrentando dificuldades no preenchimento das informações e necessitando de assistência imediata.

O objetivo era reformular o fluxo de cadastro para torná-lo mais intuitivo, rápido e eficiente, melhorando a taxa de conversão e satisfação dos usuários.

🛠 Problemas:

• Mais de 30% das sessões gravadas no Hotjar registravam problemas ligados ao fluxo de cadastro de usuários.

• Abandono ou usuários desencorajados a continuar o fluxo.

• Confusão ou preenchimento incorreto de campos do cadastro.

• Problemas com a confirmação de senha, registro de escola e reconhecimento dos critérios de senha.

✅ Soluções:

• Implementação da autenticação automática do usuário ao completar o cadastro ou redefinir a senha, retornando-o à tela anterior ao processo.

• Revisão dos critérios de complexidade na criação de senha, facilitando o preenchimento correto e rápido dos campos.

• Integração de opções de autenticação por Google e Facebook para simplificar o processo de cadastro.

• Melhorias nas mensagens de feedback durante o processo de cadastro para guiar o usuário de forma clara e precisa.

• Realização de testes com usuários reais para identificar pontos de atrito e melhorar continuamente o fluxo de cadastro.

• Redesign das interfaces de cadastro para torná-las mais intuitivas e menos onerosas, com foco na experiência do usuário.

• Adição de uma opção para o usuário reportar problemas técnicos diretamente na tela de cadastro. Este reporte é encaminhado rapidamente para a equipe técnica, com todas as informações relacionadas ao usuário e à natureza do problema, permitindo um atendimento ágil e eficiente.

• Redução de 20% do tempo médio de cadastro de conta no site.

• Redução do drop out de usuários em mais de 40%.

—

UI Design System

Foi estabelecido um sistema coeso para a criação de todas as interfaces, seguindo uma lógica de design atômico. Utilizamos tokens de design que permitiram a personalização e a reutilização do código de forma escalável.

O processo foi colaborativo, com contato direto e constante entre designers e desenvolvedores front-end para otimização e melhoria de todos os componentes.

Embora não tenha sido possível finalizar um design system completo, esse trabalho serviu como base sólida para que o cliente pudesse desenvolver futuros produtos digitais utilizando essa linguagem visual consistente e escalável.

—

conclusões

Me sinto muito orgulhoso por este ter sido o meu primeiro projeto como Designer de Experiência e Interface. Ao longo do caminho, aprendi com cada erro e acerto, sempre buscando entender o que dava pra fazer e como melhorar. Estar próximo do cliente e da equipe de gerenciamento de produto foi crucial pra garantir que estávamos todos na mesma página quanto aos objetivos do projeto.

A colaboração e a comunicação foram fundamentais para o sucesso. Manter um diálogo constante com o cliente me permitiu entender claramente o que eles queriam e traduzir isso em resultados que faziam sentido pra todo mundo. Isso manteve a equipe motivada e focada e obtive feedbacks muito legais ao final do projeto.

Um ponto importante foi a parceria com os desenvolvedores. Esse projeto me mostrou como é vital estar em sintonia com a equipe de desenvolvimento, pra garantir que as soluções de design fossem implementadas de maneira eficiente. O trabalho conjunto e a troca de ideias com os devs foram essenciais pra criar um resultado coeso e funcional. Graças a eles pude me aprofundar na aplicação da lógica de design atômico e o uso de tokens de design, que nos ajudaram a criar interfaces consistentes e escaláveis.

Além disso, o projeto reforçou a importância de pesquisa e dados para tomar decisões bem embasadas. Pude aplicar diferentes técnicas e ferramentas de pesquisa com usuários para identificar e resolver problemas reais, proporcionando uma melhor experiência pra todos os públicos do Instituto Reúna.

Tenho muito carinho por este projeto e por todos os envolvidos. Definitivamente foi uma virada de chave na minha carreira como designer e consolidou minha habilidade de colaborar, comunicar e entregar soluções de design que realmente atendem às necessidades dos usuários e do negócio. 🧡