Product Designer
Product Designer
Facilitando o acesso de materiais de aula
Facilitando o acesso de materiais de aula
Criação de um portal de notícias e downloads
Criação de um portal de notícias e downloads
Desafio
Desafio
Criar um site útil para quem não está acostumado com sites
Criar um site útil para quem não está acostumado com sites
Minha jornada nesse projeto começou graças ao networking que construí durante minha participação no diretório acadêmico de computação.
Com a confiança do gerente do projeto, recebi a missão de criar o site principal, que serviria como a fonte oficial de informações e central de downloads para os materiais das oficinas e cursos.
O primeiro passo foi reunir toda a equipe para um bate-papo e entender a fundo o contexto e os objetivos do projeto.
Minha jornada nesse projeto começou graças ao networking que construí durante minha participação no diretório acadêmico de computação.
Com a confiança do gerente do projeto, recebi a missão de criar o site principal, que serviria como a fonte oficial de informações e central de downloads para os materiais das oficinas e cursos.
O primeiro passo foi reunir toda a equipe para um bate-papo e entender a fundo o contexto e os objetivos do projeto.
Contexto
Contexto
Antes de desenhar, eu escutei
Antes de desenhar, eu escutei
O kickoff revelou uma demanda simples, mas essencial: criar um ponto de apoio digital que fosse prático, acessível e intuitivo. Nada de plataformas complexas. O que eles precisavam era um espaço que estendesse o aprendizado e acolhesse o aluno depois da aula.
Em comunidades com acesso limitado à tecnologia, cada oficina é uma chance de transformação. Mas quando os encontros acabam, fica a pergunta: “Como posso continuar aprendendo em casa?”. A falta de uma plataforma assim frustrava não só os alunos, mas também pais, instrutores, e até os idealizadores do projeto.
Porém, logo no kickoff com os instrutores, o problema já começou a se destrinchar, Comecei definindo problemas iniciais que nortearam a pesquisa. A investigação teve três frentes:
O kickoff revelou uma demanda simples, mas essencial: criar um ponto de apoio digital que fosse prático, acessível e intuitivo. Nada de plataformas complexas. O que eles precisavam era um espaço que estendesse o aprendizado e acolhesse o aluno depois da aula.
Em comunidades com acesso limitado à tecnologia, cada oficina é uma chance de transformação. Mas quando os encontros acabam, fica a pergunta: “Como posso continuar aprendendo em casa?”. A falta de uma plataforma assim frustrava não só os alunos, mas também pais, instrutores, e até os idealizadores do projeto.
Porém, logo no kickoff com os instrutores, o problema já começou a se destrinchar, Comecei definindo problemas iniciais que nortearam a pesquisa. A investigação teve três frentes:
1.
1.
Educação em áreas desiguais
Educação em áreas desiguais
Quais problemas a desigualdade social pode causar na educação como um todo?
Quais problemas a desigualdade social pode causar na educação como um todo?
2.
2.
Analfabestimo
Digital
Analfabestimo
Digital
Como o brasileiro se comporta na internet e como o mercado está exigindo tecnologia?
Como o brasileiro se comporta na internet e como o mercado está exigindo tecnologia?
3.
3.
Acessibilidade na educação.
Acessibilidade na educação.
É mensurável se as funcionalidades de acessibilidade em sites ajudam no aprendizado?
É mensurável se as funcionalidades de acessibilidade em sites ajudam no aprendizado?
Desk Research
Desk Research
Pesquisei os três principais problemas em cenários nacionais e internacionais. Tive as seguintes conclusões:
Pesquisei os três principais problemas em cenários nacionais e internacionais. Tive as seguintes conclusões:
A desigualdade no acesso à educação digital no Brasil é estrutural. Apenas 45% dos brasileiros têm computador, e, embora 89% tenham acesso à internet, só 22% realmente sabem usá-la com eficácia., o que agrava o analfabetismo digital e a exclusão social.
A pandemia intensificou essas desigualdades, e a ausência de infraestrutura adequada (como computadores ou conectividade estável) limita a participação de alunos, especialmente em regiões mais vulneráveis. Além disso, o mercado de trabalho exige cada vez mais competências digitais, criando um abismo entre a realidade de quem aprende e as demandas do mercado.
Esforços familiares, barreiras culturais e a sobrecarga das escolas mostram que o problema vai além da tecnologia: está nas condições de vida, no suporte institucional e na forma como o ensino é pensado. Apenas 22% dos sites educacionais são considerados acessíveis, embora estudos mostrem que plataformas acessíveis promovem até 37% mais desempenho em letramento digital para alunos com deficiência. A ausência de interfaces acessíveis dificulta ainda mais o processo de aprendizagem e reforça a exclusão.
A desigualdade no acesso à educação digital no Brasil é estrutural. Apenas 45% dos brasileiros têm computador, e, embora 89% tenham acesso à internet, só 22% realmente sabem usá-la com eficácia., o que agrava o analfabetismo digital e a exclusão social.
A pandemia intensificou essas desigualdades, e a ausência de infraestrutura adequada (como computadores ou conectividade estável) limita a participação de alunos, especialmente em regiões mais vulneráveis. Além disso, o mercado de trabalho exige cada vez mais competências digitais, criando um abismo entre a realidade de quem aprende e as demandas do mercado.
Esforços familiares, barreiras culturais e a sobrecarga das escolas mostram que o problema vai além da tecnologia: está nas condições de vida, no suporte institucional e na forma como o ensino é pensado. Apenas 22% dos sites educacionais são considerados acessíveis, embora estudos mostrem que plataformas acessíveis promovem até 37% mais desempenho em letramento digital para alunos com deficiência. A ausência de interfaces acessíveis dificulta ainda mais o processo de aprendizagem e reforça a exclusão.
Análise de Concorrentes
Análise de Concorrentes
Para entender o que realmente funciona, mergulhei na análise de várias plataformas semelhantes.
Para entender o que realmente funciona, mergulhei na análise de várias plataformas semelhantes.
ONGs, instituições sociais, sites educacionais gratuitos. Queria entender não só o design, mas as escolhas que essas equipes fizeram ao construir suas experiências.
ONGs, instituições sociais, sites educacionais gratuitos. Queria entender não só o design, mas as escolhas que essas equipes fizeram ao construir suas experiências.
1.
1.
Conteúdos bloqueados atrás de cadastros
Conteúdos bloqueados atrás de cadastros
Isso cria uma espécie de "muro invisível" entre o projeto e os potenciais estudantes. A verdade é que mostrar um pouco mais antes, com prévias e amostras pode fazer toda a diferença.
Isso cria uma espécie de "muro invisível" entre o projeto e os potenciais estudantes. A verdade é que mostrar um pouco mais antes, com prévias e amostras pode fazer toda a diferença.
2.
2.
Calendários e formulários
confusos
Calendários e formulários
confusos
Pequenos atritos que desmotivam silenciosamente. Em contrapartida, experiências bem resolvidas usavam calendários interativos e filtros detalhados para facilitar a busca por cursos.
Pequenos atritos que desmotivam silenciosamente. Em contrapartida, experiências bem resolvidas usavam calendários interativos e filtros detalhados para facilitar a busca por cursos.
3.
3.
Acessibilidade, quando é real, vira diferencial.
Acessibilidade, quando é real, vira diferencial.
Textos com contraste adequado, vídeos legendados, navegação simples e sem ruídos, tudo isso importa, especialmente num ambiente educacional que se pretende inclusivo.
Textos com contraste adequado, vídeos legendados, navegação simples e sem ruídos, tudo isso importa, especialmente num ambiente educacional que se pretende inclusivo.
4.
4.
O suporte também diz muito sobre o cuidado
O suporte também diz muito sobre o cuidado
Quando o site inclui uma área interna de notícias e atualizações, ele se torna um organismo vivo. Evita a dependência de redes sociais e valoriza quem está dentro da plataforma.
Quando o site inclui uma área interna de notícias e atualizações, ele se torna um organismo vivo. Evita a dependência de redes sociais e valoriza quem está dentro da plataforma.
No fundo, o que percebi é que bons sites educacionais não gritam. Eles acolhem, informam, facilitam. Criam pontes, não barreiras. É com esse espírito que sigo projetando o nosso.
No fundo, o que percebi é que bons sites educacionais não gritam. Eles acolhem, informam, facilitam. Criam pontes, não barreiras. É com esse espírito que sigo projetando o nosso.
Formulários
Formulários
Pra sair da bolha, fui conversar com quem quase nunca é ouvido em projetos digitais
Pra sair da bolha, fui conversar com quem quase nunca é ouvido em projetos digitais
Pessoas que não trabalham com tecnologia. Montei um questionário direto. Queria entender onde elas acessam conteúdo, se já tentaram estudar por sites, que dificuldades encontraram e o que esperariam de uma plataforma feita pra apoiar seus estudos.
As respostas escancararam um abismo.
Muita gente ainda associa “site” com coisa complicada. Pra boa parte, internet é sinônimo de redes sociais — e só. Estudar por um site? A maioria nunca fez. Mas toparia, se fosse simples. O recado foi claro: botões grandes, palavras fáceis, caminhos óbvios. Navegação linear, sem sustos. Isso é o que abre as portas.
Com esses dados na mão, voltei mais forte. Não com achismos — mas com fatos. Levei pra equipe uma visão real de quem a gente quer alcançar. Porque inclusão, nesse caso, começa ouvindo. E simplificar não é reduzir: é respeitar o ponto de partida das pessoas.
Pessoas que não trabalham com tecnologia. Montei um questionário direto. Queria entender onde elas acessam conteúdo, se já tentaram estudar por sites, que dificuldades encontraram e o que esperariam de uma plataforma feita pra apoiar seus estudos.
As respostas escancararam um abismo.
Muita gente ainda associa “site” com coisa complicada. Pra boa parte, internet é sinônimo de redes sociais — e só. Estudar por um site? A maioria nunca fez. Mas toparia, se fosse simples. O recado foi claro: botões grandes, palavras fáceis, caminhos óbvios. Navegação linear, sem sustos. Isso é o que abre as portas.
Com esses dados na mão, voltei mais forte. Não com achismos — mas com fatos. Levei pra equipe uma visão real de quem a gente quer alcançar. Porque inclusão, nesse caso, começa ouvindo. E simplificar não é reduzir: é respeitar o ponto de partida das pessoas.
Auditoria de Heurísticas
Auditoria de Heurísticas
Antes mesmo de existir um site, já era possível enxergar onde as coisas costumam dar errado
Antes mesmo de existir um site, já era possível enxergar onde as coisas costumam dar errado
Como ainda não havia produto em si, usei os relatos e dificuldades relatadas para cruzar com os princípios das heurísticas de Nielsen. A ideia aqui não era avaliar telas, mas antecipar fricções.
Como ainda não havia produto em si, usei os relatos e dificuldades relatadas para cruzar com os princípios das heurísticas de Nielsen. A ideia aqui não era avaliar telas, mas antecipar fricções.
1.
1.
Navegação ainda assusta
Navegação ainda assusta
Muita gente associa "site" com "dificuldade", o que mostra que design precisa ser orientado, com feedback constante, linguagem acessível e fluxos simples.
Muita gente associa "site" com "dificuldade", o que mostra que design precisa ser orientado, com feedback constante, linguagem acessível e fluxos simples.
2.
2.
Falta clareza visual
Falta clareza visual
Ferramentas como calendários e filtros, se não forem explicadas, viram obstáculos. O sistema precisa deixar claro o que está acontecendo a cada passo.
Ferramentas como calendários e filtros, se não forem explicadas, viram obstáculos. O sistema precisa deixar claro o que está acontecendo a cada passo.
3.
3.
O sistema não pode ser mudo
O sistema não pode ser mudo
Usuários precisam sentir que o que fizeram teve efeito. A ausência de resposta gera abandono.
Usuários precisam sentir que o que fizeram teve efeito. A ausência de resposta gera abandono.
4.
4.
Personalização importa
Personalização importa
Muitos gostariam de uma experiência mais próxima do seu ritmo. Mostrar evolução e adaptar a navegação ao comportamento do usuário pode ser um diferencial.
Muitos gostariam de uma experiência mais próxima do seu ritmo. Mostrar evolução e adaptar a navegação ao comportamento do usuário pode ser um diferencial.
5.
5.
Acessibilidade estratégica
Acessibilidade estratégica
Embora não seja uma heurística em si, entender que muitas pessoas sequer usam sites por falta de intimidade com o digital mostra o quanto isso pode ser um diferencial real.
Embora não seja uma heurística em si, entender que muitas pessoas sequer usam sites por falta de intimidade com o digital mostra o quanto isso pode ser um diferencial real.
Essa auditoria não encerra o processo — ela abre caminho. Após um período de lançamento do MVP, uma nova rodada será feita com foco em validar o que antes foi apenas previsto. Mas desde já, ela aponta um norte: mais do que funcional, o produto precisa ser compreensível para quem nunca teve espaço na lógica digital tradicional.
Essa auditoria não encerra o processo — ela abre caminho. Após um período de lançamento do MVP, uma nova rodada será feita com foco em validar o que antes foi apenas previsto. Mas desde já, ela aponta um norte: mais do que funcional, o produto precisa ser compreensível para quem nunca teve espaço na lógica digital tradicional.
Segunda Reunião
Segunda Reunião
Com base nisso, chegou a hora de reunir o time e mostrar os resultados
Com base nisso, chegou a hora de reunir o time e mostrar os resultados
Depois de mapear os principais obstáculos e oportunidades, o próximo passo foi traduzir os achados em algo que fizesse sentido pra todo o time. A meta era clara: sair do campo da especulação e começar a moldar soluções tangíveis, mesmo ainda sem um MVP.
Depois de mapear os principais obstáculos e oportunidades, o próximo passo foi traduzir os achados em algo que fizesse sentido pra todo o time. A meta era clara: sair do campo da especulação e começar a moldar soluções tangíveis, mesmo ainda sem um MVP.
Personas
Personas
Criei algumas personas rápidas, enxutas, mas certeiras, baseadas nos dados reais que levantamos.
Criei algumas personas rápidas, enxutas, mas certeiras, baseadas nos dados reais que levantamos.
1.
1.
Usuários principais
Alunos das escolas locais e seus pais, que são quem mais enfrentam barreiras no acesso e uso de tecnologias educativas.
Alunos das escolas locais e seus pais, que são quem mais enfrentam barreiras no acesso e uso de tecnologias educativas.
2.
2.
Usuários secundários
instrutores das oficinas e jornalistas do projeto, que também interagem com a plataforma e influenciam sua adoção.
instrutores das oficinas e jornalistas do projeto, que também interagem com a plataforma e influenciam sua adoção.
Como o tempo era curto, priorizei só as personas essenciais pra tomada de decisão imediata. A ideia não era criar um relatório bonito — era garantir que, ao olhar pra essas figuras, o time entendesse de forma direta: é por essas pessoas que estamos construindo.
Como o tempo era curto, priorizei só as personas essenciais pra tomada de decisão imediata. A ideia não era criar um relatório bonito — era garantir que, ao olhar pra essas figuras, o time entendesse de forma direta: é por essas pessoas que estamos construindo.
Card Sorting
Card Sorting
Nem toda informação faz sentido na mesma ordem
Nem toda informação faz sentido na mesma ordem
Depois de analisar tudo sozinho, eu já tinha na cabeça uma ideia inicial de como o conteúdo do site podia ser organizado. Mas será que fazia sentido pra todo mundo?
Foi aí que juntei o grupo pra um exercício simples: reorganizar os conteúdos como se estivessem montando o site do zero. Cada um recebeu os mesmos tópicos e teve que agrupar e ordenar do jeito que achava mais intuitivo.
O resultado? Várias surpresas. Um dos participantes, por exemplo, sugeriu usar a área de jogos das oficinas como material de apoio para os alunos estudarem em casa. Algo que eu nem tinha cogitado antes. Outros mudaram a ordem das informações, deixando mais claro o que deveria aparecer logo de cara pra quem entra no site.
Esse momento foi um lembrete importante: às vezes, a gente acha que entendeu tudo sozinho, mas ouvir outras cabeças muda tudo. A arquitetura do site ganhou novas camadas depois disso.
Depois de analisar tudo sozinho, eu já tinha na cabeça uma ideia inicial de como o conteúdo do site podia ser organizado. Mas será que fazia sentido pra todo mundo?
Foi aí que juntei o grupo pra um exercício simples: reorganizar os conteúdos como se estivessem montando o site do zero. Cada um recebeu os mesmos tópicos e teve que agrupar e ordenar do jeito que achava mais intuitivo.
O resultado? Várias surpresas. Um dos participantes, por exemplo, sugeriu usar a área de jogos das oficinas como material de apoio para os alunos estudarem em casa. Algo que eu nem tinha cogitado antes. Outros mudaram a ordem das informações, deixando mais claro o que deveria aparecer logo de cara pra quem entra no site.
Esse momento foi um lembrete importante: às vezes, a gente acha que entendeu tudo sozinho, mas ouvir outras cabeças muda tudo. A arquitetura do site ganhou novas camadas depois disso.
Priorização MoSCoW
Priorização MoSCoW
O que é essencial de verdade?
O que é essencial de verdade?
Com tanta ideia boa na mesa, a pergunta que ficou foi: o que a gente consegue entregar agora?
Pra descobrir isso, propus uma dinâmica de priorização. A gente separou as ideias em quatro categorias: o que não pode faltar, o que seria bom ter, o que pode esperar e o que podemos deixar de lado.
No começo, todo mundo estava empolgado com a ideia de um chatbot dentro do próprio site. Mas conforme o papo foi rolando, caiu a ficha: isso ia demandar tempo, estrutura, e talvez acabasse travando o resto. Alguém sugeriu: "E se a gente fizer isso direto pelo WhatsApp, onde o público já está?". Fez sentido. No fim, o chatbot seguiu como prioridade, mas com um formato muito mais viável.
Esse tipo de conversa foi essencial pra manter o projeto pé no chão. Saímos da reunião com clareza: o que precisa existir desde o início, o que pode entrar depois, e o que dá pra guardar na gaveta — por enquanto.
Com tanta ideia boa na mesa, a pergunta que ficou foi: o que a gente consegue entregar agora?
Pra descobrir isso, propus uma dinâmica de priorização. A gente separou as ideias em quatro categorias: o que não pode faltar, o que seria bom ter, o que pode esperar e o que podemos deixar de lado.
No começo, todo mundo estava empolgado com a ideia de um chatbot dentro do próprio site. Mas conforme o papo foi rolando, caiu a ficha: isso ia demandar tempo, estrutura, e talvez acabasse travando o resto. Alguém sugeriu: "E se a gente fizer isso direto pelo WhatsApp, onde o público já está?". Fez sentido. No fim, o chatbot seguiu como prioridade, mas com um formato muito mais viável.
Esse tipo de conversa foi essencial pra manter o projeto pé no chão. Saímos da reunião com clareza: o que precisa existir desde o início, o que pode entrar depois, e o que dá pra guardar na gaveta — por enquanto.
Fase de Ideação
Fase de Ideação
Transformando dores em hipóteses de solução
Transformando dores em hipóteses de solução
Em vez de cair diretamente em soluções prontas, partimos das perguntas: o que exatamente dificulta o acesso à pesquisa? Por que as pessoas desistem no caminho? Como tornar o processo menos técnico e mais humano?
Em vez de cair diretamente em soluções prontas, partimos das perguntas: o que exatamente dificulta o acesso à pesquisa? Por que as pessoas desistem no caminho? Como tornar o processo menos técnico e mais humano?
1.
1.
Desenhar para a realidade de quem vai usar
Desenhar para a realidade de quem vai usar
Logo no início percebemos um padrão claro: a maioria dos usuários acessaria o site exclusivamente pelo celular. Isso guiou a decisão de seguir uma abordagem mobile-first, em vez de tentar adaptar uma versão de desktop posteriormente.
Essa escolha influenciou toda a arquitetura da informação e o layout da interface, priorizando uma navegação fluida com o polegar, textos objetivos e hierarquia visual simples.
Logo no início percebemos um padrão claro: a maioria dos usuários acessaria o site exclusivamente pelo celular. Isso guiou a decisão de seguir uma abordagem mobile-first, em vez de tentar adaptar uma versão de desktop posteriormente.
Essa escolha influenciou toda a arquitetura da informação e o layout da interface, priorizando uma navegação fluida com o polegar, textos objetivos e hierarquia visual simples.
2.
2.
Estrutura sólida para facilitar manutenção e crescimento
Estrutura sólida para facilitar manutenção e crescimento
Já na fase de prototipação, o projeto foi pensado com foco em escalabilidade. Cada elemento visual foi transformado em componente reutilizável, permitindo não apenas agilidade no desenvolvimento, mas também coerência visual entre telas e seções.
Essa organização antecipada do design system permitiu que o time atuasse com mais clareza, reduzindo retrabalho e facilitando testes e iterações.
Já na fase de prototipação, o projeto foi pensado com foco em escalabilidade. Cada elemento visual foi transformado em componente reutilizável, permitindo não apenas agilidade no desenvolvimento, mas também coerência visual entre telas e seções.
Essa organização antecipada do design system permitiu que o time atuasse com mais clareza, reduzindo retrabalho e facilitando testes e iterações.
3.
3.
Personificar a experiência para tornar o processo mais acolhedor
Personificar a experiência para tornar o processo mais acolhedor
Diante da necessidade de guiar o usuário de forma clara e progressiva, surgiu a proposta de criar um personagem dentro da interface: um robô simpático, responsável por contextualizar e orientar quem acessa o site.
A escolha de um mascote dialoga com o universo da tecnologia, aproximando o público da temática da pesquisa científica de forma leve, educativa e afetiva. Em vez de parecer um tutorial engessado, a navegação se transforma em uma conversa guiada — uma ponte entre o usuário e o conteúdo.
Diante da necessidade de guiar o usuário de forma clara e progressiva, surgiu a proposta de criar um personagem dentro da interface: um robô simpático, responsável por contextualizar e orientar quem acessa o site.
A escolha de um mascote dialoga com o universo da tecnologia, aproximando o público da temática da pesquisa científica de forma leve, educativa e afetiva. Em vez de parecer um tutorial engessado, a navegação se transforma em uma conversa guiada — uma ponte entre o usuário e o conteúdo.
Construção No-code
Construção No-code
Limitações técnicas abriram espaço para soluções criativas
Limitações técnicas abriram espaço para soluções criativas
Com o protótipo de alta fidelidade finalizado no Figma, passamos para o Framer para aproveitar suas funcionalidades de animação e interatividade. No entanto, nos deparamos com uma limitação: não era possível utilizar um domínio personalizado na versão gratuita da plataforma — e o projeto não contava com orçamento para upgrades.
Buscando contornar essa barreira de forma viável, buscamos uma maneira não convencional para converter o projeto para uma versão em código, visto que o tempo era curto, e fazer o código poderia atrasar a entrega. Isso nos deu a liberdade necessária para integrar bibliotecas como o VLibras, essenciais para tornar o site acessível de verdade.
Com o protótipo de alta fidelidade finalizado no Figma, passamos para o Framer para aproveitar suas funcionalidades de animação e interatividade. No entanto, nos deparamos com uma limitação: não era possível utilizar um domínio personalizado na versão gratuita da plataforma — e o projeto não contava com orçamento para upgrades.
Buscando contornar essa barreira de forma viável, buscamos uma maneira não convencional para converter o projeto para uma versão em código, visto que o tempo era curto, e fazer o código poderia atrasar a entrega. Isso nos deu a liberdade necessária para integrar bibliotecas como o VLibras, essenciais para tornar o site acessível de verdade.
EM CONSTRUÇÃO
EM CONSTRUÇÃO
O conteúdo completo desta seção ainda está em desenvolvimento.
O conteúdo completo desta seção ainda está em desenvolvimento.
Estamos finalizando os ajustes técnicos e visuais para garantir uma experiência acessível, funcional e alinhada com os objetivos do projeto.
Se quiser saber mais sobre o processo ou contribuir com feedbacks, estou aberto ao diálogo.
Estamos finalizando os ajustes técnicos e visuais para garantir uma experiência acessível, funcional e alinhada com os objetivos do projeto.
Se quiser saber mais sobre o processo ou contribuir com feedbacks, estou aberto ao diálogo.
Se você procura um designer motivado e em constante aprendizado, vamos conversar!
Se você procura um designer motivado e em constante aprendizado, vamos conversar!