Tech Pro Bem
A Tech Pro Bem é uma comunidade de tecnologia que conecta profissionais de diferentes áreas para criar soluções digitais para ONGs e projetos sociais, ao mesmo tempo em que proporciona experiência prática em times multidisciplinares para profissionais que querem migrar para a área da tecnologia.
Desafio
O objetivo principal era desenvolver o site institucional, visando sua profissionalização e a capacidade de atrair mais voluntários e apoiadores interessados em participar.
Escopo do projeto
Website responsivo
Duração
6 meses
Ferramentas
Figma, Miro, Figjam, Maze
Papel
UX/UI Designer
Time
2 líderes de Agilidade
2 Product Owners
4 UX Designer
2 UX Writers
4 QA
6 Desenvolvedores
01 Entendimento do Problema
Pain points
Após reunião com as stakeholders, foi identificado que diversas frustrações eram decorridas devido à falta de um ponto centralizado de informação, como por exemplo o recebimento de múltiplas mensagens com dúvidas recorrentes através de diferentes canais, o que gerava uma demanda de tempo e energia
Briefing
A partir dos desejos das clientes foi estabelecido o seguinte briefing para a construção do site:
1 - Apresentar a missão, visão e valores da Tech
2 - Informar sobre os times multidisciplinares, e quais áreas podem atuar
3 - Informações sobre os processos seletivos
4 - Apresentar os dados quantitativos de impacto da Tech Pro Bem
5- Ter uma seção de dúvidas frequentes
6 - Espaço para depoimentos de ex-voluntários
7 - Direcionamento para o linkedin e e-mail
Principais tarefas
Baseado nisso o projeto tinha as seguintes tarefas:
1- Entender quais informações seriam necessárias e a melhor forma de organizar e hierarquizar
2- Estruturar os textos e chamadas de forma concisa e clara de acordo com o posicionamento da marca
3- Validar que a arquitetura da informação e a navegação tem uma boa usabilidade e utilidade
Clique para ver a análise completa do problema
Initial Roadmap
02 Discovery
Análise dos Competidores
Na fase inicial de discovery, começamos nossa jornada analisando como instituições semelhantes à Tech Pro Bem organizavam seus sites e identificando as informações mais relevantes para os usuários.
O develop for good tem um propósito similar, de conectar voluntários e prestar serviços para ONGs.
O site com diversas páginas e divisão direcionada para o propósito de cada persona.
O Todas as Letras é uma Organização Social que visa incluir pessoas LGBTQIA+ em Tecnologia.
Possui uma página única, com âncoras que direcionam a diferentes sessões do site.
O Atados é uma plataforma que conecta voluntários com ONGs, em diversas áreas e temas. O site possui diversas páginas e CTAs
Usuários
Após conversa com as stakeholders e estudos sobre a proposta da Tech foram identificados 3 principais tipos de usuários para o site da Tech Pro Bem:
Pessoas em transição de carreira ou em busca da primeira oportunidade na área tech
Pessoas que ja atuam na área, mas buscam diferentes experiências para melhorar habilidades como líderes ou mentores
Responsáveis por ONGs que buscam um site ou plataforma digital
03 Definição
Personas
Baseado na organização e entendimento dos usuarios do site, pudemos definir e detalhar as 3 principais personas, motivações, necessidades e frustrações realistas.
Jornada do Usuário
Para a MVP foi decidido que a persona primária seria a do voluntário jr. Com isso construimos a jornada do usuário dessa persona.
Tom de voz da marca e posicionamento
O time de UX Writing realizou uma análise do conteúdo ja existente de como a Tech Pro Bem se posicionava no Linkedin.
Com base nessa análise, foi proposta a seguinte modulação da tonalidade de voz da marca, a qual poderia ter variações dependendo do canal de comunicação.
Clique aqui para ver a análise completa e exemplos
Estrutura inicial do website
Baseado no benchmarking e análise dos competidores, começamos com uma estrutura inicial de todo conteudo que a pagina deveria conter e como organizar.
04 Ideate
Site map - Studies
We began structuring the site with two main navigation options:
Opção 1: Site de duas páginas (página inicial e Perguntas Frequentes - FAQ).
Barra superior "Tradicional", a página inicial possui várias seções com informações (ver abaixo), e na barra superior, há um botão "FAQ" no qual o usuário é direcionado para outra página com todas as perguntas separadas por seções.
Opção 2: Site de página única com âncoras.
Barra superior com botões que funcionarão como âncoras para as seções do site. A seção 'FAQ' será recolhida e separada por subseções que só serão abertas quando o usuário as selecionar.
Testes de usabilidade
Usando a ferramenta Maze, conduzimos testes de usabilidade não moderados para decidir qual modo de navegação seria escolhido entre as duas opções.
Resultados do teste
A taxa de sucesso direto do menu de âncoras foi de 73% na versão para desktop e 54% na versão mobile
Cada item do menu, com exceção do item "FAQ" (que redirecionará para a página de Perguntas Frequentes), será uma âncora para as seções. Ao clicar no item, o usuário será movido para a seção que representa esse item.
05 UI Design
Wireframe de alta fidelidade & Protótipos
Considerações Finais + Próximos Passos
O projeto está na fase de desenvolvimento e implementação.
A data de lançamento prevista é dezembro de 2023.
Mais projetos
App responsivo I Estudo de caso
Entre em contato e vamos criar juntos!
mande um oi em