Visão geral

O Saber em Rede é uma startup de educação integrante do Grupo A, empresa especializada em soluções para o ensino do Brasil desde 1973, e residente do Cubo Itaú desde 2018.

Como parte do projeto de atualização da identidade da startup e em parceria com a equipe de desenvolvimento e a liderança, guiei o refresh inicial das páginas da Plataforma de Afiliados, buscando polir os MVPs dev-made em uma interface com implementação melhor do projeto inicial.

O objetivo principal foi simplificar a navegação e explicitar os elementos interativos, já estruturando a fundação para uma futura implementação mobile e app-based.

O processo de criação completo se deu entre 2020 e 2023 e a Versão 2 da plataforma está no ar atualmente. Após esse período foi criado o Saber DS, a versão 3 da plataforma para que pudéssemos customizar ainda mais o conteúdo.

Investigação

O processo investigativo nasceu com o MVP da plataforma, um sistema desenvolvido em React e com uma preocupação funcional maior que a preocupação de usabilidade.

A Plataforma

Partindo do framework já existente, a preocupação inicial desse refresh foi trazer mais intuitividade às mecânicas da plataforma. Além da ênfase estética, foi necessário melhorar os significadores de cada tela e estabelecer um groundwork para futuras telas e iterações.

A navegação e a Jornada

Os elementos navegacionais de todas as páginas estavam funcionais, porém havia alguns pontos em evidência precisando de melhorias:

• A página home não tinha informações relevantes;
• O histórico de vendas e compras era pouco claro: o que é uma compra? o que é uma venda?
• A página de Cursos priorizava as Instituições sobre a pesquisa de cursos;
• O cadastro de usuário exigia saber todos os dados do aluno de antemão;
• As funções transacionais “Comissões” e “Shopping do Embaixador” apesar de vinculadas não eram apresentadas juntas, afetando a visualização das jornadas paralelas;
• O menu principal era confuso e a hierarquia de informações não priorizava o agrupamento entre as seções da plataforma;

Conclusões

Da investigação inicial, três coisas ficaram claras:

1. A navegação sofria de clareza e de consistência entre os tamanhos de tela;
2. Os elementos clicáveis eram muito variados e pouco intuitivos;
3. A distribuição de informações era pouco prática e não valorizava a continuidade das jornadas propostas para os usuários;

Soluções

A primeira solução foi otimizar o acesso das jornadas de usuário e estabelecer um embasamento para dispositivos móveis. Apesar de as pesquisas indicarem que a maioria dos acessos acontecia em dispositivos maiores, a versão original do projeto dava pouquíssima prioridade às telas responsivas e um dos maiores pontos fortes da plataforma é a facilidade de acesso fora de casa. Assim, o desenvolvimento de uma solução priorizando *mobile* foi essencial como fundação para o futuro.

A segunda etapa foi avaliar o remapeamento das áreas da plataforma. O processo de avaliação de fluxos envolveu identificar como os usuários se relacionavam com as atividades disponíveis, agrupá-las em telas e jornadas mais efetivas para o público. Havia redundâncias de acesso e informações que poderiam ser muito melhor aproveitadas se atreladas uma à outra, como por exemplo a catalogação de pontos e comissões ou os históricos de compras e vendas de cursos e as informações de saque.

A terceira etapa, por fim, foi pôr isso em prática no layout: a normatização inicial seguiu uma leitura inspirada no Material Design V2, tentando criar uma comunicação adequada com a equipe de desenvolvimento usando uma linguagem em comum.