APOIA.SE: SOUJUNIOR
APOIA.SE: SOUJUNIOR
Landing Page de conversão que conquistou o 2º lugar no Hackathon SouJunior 2026
Landing Page de conversão que conquistou o 2º lugar no Hackathon SouJunior 2026
🥈 2º LUGAR : HACKATHON SOUJUNIOR 2026
🥈 2º LUGAR : HACKATHON SOUJUNIOR 2026
Como transformar uma página de apoio em uma experiência que explique o propósito da SouJunior, demonstre seu impacto e facilite a decisão de contribuir?
Esse foi o desafio da minha Squad Web Wizards no Hackathon SouJunior 2026. Em um ciclo curto de desenvolvimento, trabalhamos na criação de uma Landing Page para a campanha da SouJunior no Apoia.se.
Meu papel: UX/UI Designer
Time: Produto, UX/UI, Desenvolvimento, QA e Agile
Método de trabalho: Scrum
Entrega: MVP responsivo para desktop e mobile
Desafio Junior: https://hackathon.soujunior.tech/#/
Como transformar uma página de apoio em uma experiência que explique o propósito da SouJunior, demonstre seu impacto e facilite a decisão de contribuir?
Esse foi o desafio da minha Squad Web Wizards no Hackathon SouJunior 2026. Em um ciclo curto de desenvolvimento, trabalhamos na criação de uma Landing Page para a campanha da SouJunior no Apoia.se.
Meu papel: UX/UI Designer
Time: Produto, UX/UI, Desenvolvimento, QA e Agile
Método de trabalho: Scrum
Entrega: MVP responsivo para desktop e mobile
Desafio Junior: https://hackathon.soujunior.tech/#/
Quem é a Sou Junior?
Quem é a Sou Junior?
A SouJunior é uma comunidade que conecta pessoas em início de carreira a oportunidades de aprendizado e experiência prática em tecnologia.
Por meio de projetos, voluntariado e mentorias, a iniciativa ajuda seus participantes a desenvolver habilidades e construir experiência para se preparar para o mercado de trabalho.
A SouJunior é uma comunidade que conecta pessoas em início de carreira a oportunidades de aprendizado e experiência prática em tecnologia.
Por meio de projetos, voluntariado e mentorias, a iniciativa ajuda seus participantes a desenvolver habilidades e construir experiência para se preparar para o mercado de trabalho.
O desafio
O desafio
A SouJunior busca aumentar o número de apoiadores para fortalecer sua estrutura e preparar melhor seus voluntários para o mercado de tecnologia.
Com poucos doadores, o desafio é comunicar com clareza por que apoiar, qual impacto o apoio gera e como contribuir.
A partir disso, definimos o principal desafio de UX:
Como comunicar o valor da SouJunior, gerar confiança e facilitar a decisão de apoiar?
A SouJunior busca aumentar o número de apoiadores para fortalecer sua estrutura e preparar melhor seus voluntários para o mercado de tecnologia.
Com poucos doadores, o desafio é comunicar com clareza por que apoiar, qual impacto o apoio gera e como contribuir.
A partir disso, definimos o principal desafio de UX:
Como comunicar o valor da SouJunior, gerar confiança e facilitar a decisão de apoiar?
Meu papel
Meu papel
Atuei como UX/UI Designer da Squad Web Wizards, participando da construção da experiência desde a definição do problema até o acompanhamento da implementação (processo end-to-end).
Minha atuação envolveu:
levantamento e organização das informações;
arquitetura da informação e definição do fluxo;
wireframes;
prototipação de alta fidelidade;
UI e componentes;
responsividade e acessibilidade;
decisões relacionadas à conversão;
alinhamentos com Produto e Desenvolvimento;
Atuei como UX/UI Designer da Squad Web Wizards, participando da construção da experiência desde a definição do problema até o acompanhamento da implementação (processo end-to-end).
Minha atuação envolveu:
levantamento e organização das informações;
arquitetura da informação e definição do fluxo;
wireframes;
prototipação de alta fidelidade;
UI e componentes;
responsividade e acessibilidade;
decisões relacionadas à conversão;
alinhamentos com Produto e Desenvolvimento;
Nosso processo
Nosso processo
O projeto foi conduzido de forma colaborativa e integrada, com Produto, UX/UI, Desenvolvimento, QA e Agilidade atuando em conjunto.
A equipe trabalhou em ciclos curtos de alinhamento, execução e validação, compartilhando decisões e ajustando as soluções ao longo do desenvolvimento.
O projeto foi conduzido de forma colaborativa e integrada, com Produto, UX/UI, Desenvolvimento, QA e Agilidade atuando em conjunto.
A equipe trabalhou em ciclos curtos de alinhamento, execução e validação, compartilhando decisões e ajustando as soluções ao longo do desenvolvimento.
Requisitos de experiência
Requisitos de experiência
A solução foi orientada por seis princípios:
Clareza: propósito da página compreendido rapidamente.
Consistência: padrões visuais e interações coerentes.
Responsividade: adaptação a diferentes telas, com foco em desktop e mobile.
Conversão: CTAs contextualizados para facilitar a ação.
Acessibilidade: contraste, navegação, foco, textos alternativos e teclado.
Escalabilidade: estrutura preparada para evoluções futuras sem complexidade desnecessária.
A solução foi orientada por seis princípios:
Clareza: propósito da página compreendido rapidamente.
Consistência: padrões visuais e interações coerentes.
Responsividade: adaptação a diferentes telas, com foco em desktop e mobile.
Conversão: CTAs contextualizados para facilitar a ação.
Acessibilidade: contraste, navegação, foco, textos alternativos e teclado.
Escalabilidade: estrutura preparada para evoluções futuras sem complexidade desnecessária.
Principais decisões de design
Principais decisões de design
A estratégia transformou o apoio em uma consequência da percepção de valor. A experiência foi construída com storytelling para conduzir o visitante por uma sequência clara:
Entendimento → Impacto → Confiança → Ação
Cada decisão respondeu a uma necessidade do usuário:
Contextualizar: apresentar o problema e o papel da SouJunior.
Evidenciar impacto: combinar dados, histórias e prova social.
Construir confiança: apresentar depoimentos e transparência sobre o uso do apoio.
Facilitar a ação: distribuir CTAs ao longo da narrativa e manter um CTA fixo no mobile.
A estratégia transformou o apoio em uma consequência da percepção de valor. A experiência foi construída com storytelling para conduzir o visitante por uma sequência clara:
Entendimento → Impacto → Confiança → Ação
Cada decisão respondeu a uma necessidade do usuário:
Contextualizar: apresentar o problema e o papel da SouJunior.
Evidenciar impacto: combinar dados, histórias e prova social.
Construir confiança: apresentar depoimentos e transparência sobre o uso do apoio.
Facilitar a ação: distribuir CTAs ao longo da narrativa e manter um CTA fixo no mobile.
Handoff & Desenvolvimento
Handoff & Desenvolvimento
No Figma, estruturei a hierarquia visual, componentes, responsividade e principais interações, organizando o arquivo e documentando as decisões para facilitar o handoff.
Participei de reuniões de alinhamento com Produto, Desenvolvimento, QA e Agilidade para discutir soluções, esclarecer dúvidas e acompanhar a evolução das telas durante a implementação. Mantive o acompanhamento próximo com Desenvolvimento, avaliando a consistência entre o design e o produto construído.
Ao longo do desenvolvimento, ajustei as soluções quando necessário, equilibrando experiência do usuário, objetivos do produto, prazo e viabilidade técnica.
GitHub
https://github.com/SouJunior/hackathon-web-wizards
No Figma, estruturei a hierarquia visual, componentes, responsividade e principais interações, organizando o arquivo e documentando as decisões para facilitar o handoff.
Participei de reuniões de alinhamento com Produto, Desenvolvimento, QA e Agilidade para discutir soluções, esclarecer dúvidas e acompanhar a evolução das telas durante a implementação. Mantive o acompanhamento próximo com Desenvolvimento, avaliando a consistência entre o design e o produto construído.
Ao longo do desenvolvimento, ajustei as soluções quando necessário, equilibrando experiência do usuário, objetivos do produto, prazo e viabilidade técnica.
GitHub
https://github.com/SouJunior/hackathon-web-wizards
Resultado
Resultado
Em duas semanas, minha squad entregou um MVP responsivo para a campanha Apoia.se da SouJunior, integrando UX, UI, Produto, Desenvolvimento e QA.
O projeto conquistou o 2º lugar no Hackathon SouJunior 2026.
A entrega também permitiu acompanhar o processo completo de design: problema → estrutura → interface → implementação → revisão.
Em duas semanas, minha squad entregou um MVP responsivo para a campanha Apoia.se da SouJunior, integrando UX, UI, Produto, Desenvolvimento e QA.
O projeto conquistou o 2º lugar no Hackathon SouJunior 2026.
A entrega também permitiu acompanhar o processo completo de design: problema → estrutura → interface → implementação → revisão.
Oportunidades de evolução
Oportunidades de evolução
Como MVP, o projeto não contou com uma estrutura completa de mensuração.
Entre as oportunidades futuras estão:
integração com CRM;
automações;
acompanhamento do funil;
dashboard;
mensuração de cliques, início e conclusão do apoio.
Por isso, não há dados pós-lançamento que permitam afirmar resultados de conversão.
A hipótese é que uma experiência mais clara e orientada à ação possa favorecer a conversão. Essa hipótese ainda precisaria ser validada por dados.
Como MVP, o projeto não contou com uma estrutura completa de mensuração.
Entre as oportunidades futuras estão:
integração com CRM;
automações;
acompanhamento do funil;
dashboard;
mensuração de cliques, início e conclusão do apoio.
Por isso, não há dados pós-lançamento que permitam afirmar resultados de conversão.
A hipótese é que uma experiência mais clara e orientada à ação possa favorecer a conversão. Essa hipótese ainda precisaria ser validada por dados.
Gostou do projeto?
Gostou do projeto?
Confira outros trabalhos do meu portfólio ou entre em contato comigo:
nataliapires.work@gmail.com
Confira outros trabalhos do meu portfólio ou entre em contato comigo:
nataliapires.work@gmail.com
