Tech Pro Bem | Site

UX Design • UI Design • Web • Mobile

Contexto

Este projeto foi realizado durante um voluntariado na Tech Pro Bem. Seu objetivo era desenvolver um site para a organização, visando profissionalizar sua imagem e otimizar o gerenciamento das consultas recebidas pela equipe. A Tech Pro Bem é uma comunidade de tecnologia que conecta profissionais de diferentes áreas para criar soluções digitais para ONGs e projetos sociais.

Minha contribuição

Atuei em todas as fases do processo de design, integrando o time de UX/UI Design, composto por quatro designers junior, uma líder e uma mentora. Trabalhamos em conjunto com o time de UX Writing na concepção do projeto, além de colaborar com POs, Agilistas, Desenvolvedores e QA ao longo de todo o processo, seguindo uma metodologia ágil.

Ferramentas: Figma, Miro, Maze

Descoberta

A Tech Pro Bem enfrentava o desafio de lidar com um grande volume de mensagens direcionadas à coordenação, contendo dúvidas sobre o funcionamento da comunidade. A ausência de uma pessoa designada para responder a essas mensagens e a sobrecarga de tempo resultante levaram à ideia de construir um site que centralizasse as informações essenciais. O objetivo era proporcionar uma fonte de informações abrangente para os usuários, com a intenção de antecipar questões frequentes e, assim, reduzir a quantidade de mensagens recebidas.

Iniciamos o projeto com uma reunião de kick off com a equipe de coordenação da Tech Pro Bem, visando uma compreensão mais aprofundada do escopo e a definição dos objetivos.

Posteriormente, conduzimos uma pesquisa de benchmarking para analisar a comunicação de organizações similares, investigando as informações que disponibilizam e a maneira como as apresentam. Com isso, coletamos insights do que poderia ser útil para o nosso objetivo.

Ideação

Após coletar referências de mercado, delineamos quais informações seriam exibidas no site e como seriam organizadas, estabelecendo o mapa do site. A partir disso, iniciamos a elaboração de wireframes de média fidelidade para apresentação à equipe de coordenação da Tech Pro Bem.

Com a estrutura do site aprovada, validamos o progresso realizado até então por meio da criação das personas dos usuários do site. Além disso, mapeamos a jornada desses usuários para compreender se a forma como estávamos apresentando as informações atendia às suas necessidades.

Teste de Usabilidade

Com a estrutura definida e aprovada, avançamos para a construção de um protótipo de média fidelidade e a realização de um teste de usabilidade, com o principal objetivo de avaliar a eficiência da navegação no site. Além disso, testamos a eficácia do redirecionamento dos usuários para o LinkedIn, a clareza das informações sobre as atividades e o funcionamento da Tech Pro Bem, bem como a acessibilidade das principais informações na seção de dúvidas frequentes (FAQ).

Após validar a estrutura e analisar os insights coletados no teste de usabilidade, avançamos para a criação do nosso style guide, onde estabelecemos os componentes visuais do site. Em seguida, aplicamos esses padrões na elaboração dos wireframes de alta fidelidade. Optamos por elementos que mantenham a consistência visual já estabelecida nas redes sociais da Tech Pro Bem, proporcionando uma experiência familiar aos usuários.

User Interface

Quem Somos

Para transmitir de maneira clara as informações essenciais sobre a Tech Pro Bem, desenvolvemos a seção "Quem Somos". Nesta seção, explicamos de forma simples a natureza da Tech Pro Bem e seu funcionamento, detalhando as áreas nas quais os profissionais podem se voluntariar. Além disso, enfatizamos os valores fundamentais da organização.

Dúvidas Frequentes

Reunimos as principais informações necessárias para os usuários saberem mais sobre a Tech Pro Bem, incluindo detalhes sobre como se inscrever e onde encontrar atualizações sobre os processos seletivos. Criamos uma seção de perguntas frequentes abrangente, com o objetivo de responder às dúvidas mais comuns e reduzir a quantidade de mensagens repetitivas recebidas.

Acompanhe

Após fornecer informações relevantes sobre a organização, encaminhamos o usuário para onde pode continuar acompanhando atualizações, divulgações de processos seletivos, entre outros conteúdos pertinentes. Dessa forma, ele se mantém sempre atualizado sobre as novidades da Tech Pro Bem.

Visite o site

Handoff

A partir de então, iniciamos o processo de handoff do projeto para o time de Desenvolvimento. Os wireframes foram documentados no Figma, juntamente com o style guide e também um arquivo específico para o handoff, detalhando as informações sobre o comportamento dos componentes. Além disso, acompanhamos de perto todo o desenvolvimento, para garantir que nossa entrega final estivesse em conformidade com o que foi planejado.

Aprendizados

• Trabalhamos de forma voluntária e, a maior parte do tempo, assíncrona, portanto os horários de trabalho dos integrantes nem sempre coincidiam. Com isso, era grande a necessidade de uma boa comunicação entre todo o time e um bom planejamento do processo. Acredito que poderíamos ter gerenciado esse planejamento de forma mais eficaz para evitar a necessidade de acelerar o término do projeto para cumprir o prazo, como acabou ocorrendo.

• Talvez pela estrutura do site já ser algo familiar ao usuário, o teste de usabilidade não proporcionou insights tão significativos quanto esperávamos. Mesmo a avaliação da navegação principal, que era o foco central, revelou-se desnecessária na forma como foi conduzida, uma vez que não precisou ser utilizada posteriormente. Assim, em uma próxima oportunidade, consideraria adiar a realização desse teste para um momento mais apropriado.