Bike Anjo - Redesign institucional
Período: Maio a outubro de 2025 | 5 meses
Time:
Baixa fidelidade: 2 UX Designers + 1 UX Writer + 3 devs
Alta fidelidade: 1 UX Designer + 1 QA + 3 devs
Problema
O site da Bike Anjo estava fora do ar há 5 anos.
A ONG, ativa em centenas de cidades desde 2010, estava operando apenas por redes sociais. Sem canal próprio, não havia caminho claro para quem queria aprender a pedalar nem para quem queria ensinar.
Minha participação
Redesign end-to-end como principal designer.
Conduzi da arquitetura de informação ao handoff com os desenvolvedores, incluindo AI building para componentes funcionais.
Resultados
2
Semanas salvas
Cronograma reduzido via AI building
0
Erros estruturais
Aprovação de QA sem correções semânticas
100%
Contraste acessível em todos os componentes
22 telas produzidas
Front-end completo em staging
+100 componentes
Design system do zero + handoff com Storybook
01 - Contexto
Problemas estruturais
Mapeei todas as páginas do site antigo antes de desenhar qualquer tela. Quando entrei o time já estava produzindo a homepage. Então propus pausar porque avançar sem estruturar uma arquitetura geraria retrabalho.
Isso revelou cinco problemas:
Arquitetura centrada na ONG: a navbar comunicava a instituição (‘Quem Somos’, ‘O Que Fazemos’, ‘Blog’) sem caminhos para quem precisa de ajuda ou quer ajudar
Aprendiz invisível: nenhuma área dedicada ao perfil mais importante
Páginas de redirecionamento: existiam páginas com o intuito único de te levar a outra área, sem conteúdo próprio
Ausência de saída: ao entrar em uma página por engano não havia como voltar nem buscar outro destino.
Blocos de texto sem quebra: conteúdo extenso, de biografias a listas de articulações, tudo exigia scroll contínuo.
02 - Barreira emocional
Criei duas personas com base nos 15 anos de dados históricos da ONG. A base existente identificou o padrão mais relevante.
Insight central
Se problema da Maria é medo, então o site precisa ser acolhedor e não institucional.
Esse insight, projetado com base em dados históricos e confirmado nos testes, reorganizou a hierarquia da homepage e tom de voz do site.
03 - Arquitetura por perfil
Nova arquitetura de informação
Receba Ajuda: fluxo dedicado a aprendizes, com busca de articulações locais
Ofereça Ajuda: fluxo dedicado a voluntários, com informações sobre o curso de formação da ONG, área de doação e ajuda institucional
Iniciativas: campanhas, projetos e eventos reunidos em um fluxo único
Sobre Nós: conteúdo institucional, dicas, transparência financeira e histórico
Botão de doação fixo no header: baseado em benchmark com Pimp my Carroça, Greenpeace e AACD.
04 - Agente e ai building
Agente LLM para copy
Criei uma IA conversacional no ChatGPT para tirar a sobrecarga da UX Writer.
O objetivo foi auxiliar na escrita das 22 páginas dentro do prazo.
Problema principal: a IA tendia a usar termos como “obrigade” e “companheires”, o que exigiu finetuning, já que isso gerava aversão em parte do público, segundo a cliente.
Trade-off: Garantimos conteúdo testável mas abdicamos da escrita 100% autoral.
AI Building: prototipagem com código
Desenvolvi duas features utilizando Cursor e V0 para garantir uma interatividade precisa e reduzir o cronograma.
Handoff: Componentes linkados ao wireframe do Figma, código revisado com devs nas weeklys. Cada entrega codada eliminou 2 a 3 dias de dev, agregando no total de 2 semanas reduzidas (somado ao storybook).
05 - Testes e evidência
Testes de usabilidade
Roteiro
Aprendiz e Voluntário com roteiros próprios
Atividades
Tarefas contextualizadas por perfil, em complexidade crescente e debriefing com Likert 1 a 5
Amostra
7 sessões, conduzi 5 e a UX Writer conduziu 2 com roteiro que forneci
Diversidade
Regiões: Sul, Sudeste, Centro-Oeste e Nordeste
Faixas etárias: 18 a 55 anos.
Hipóteses testadas:
A organização por perfil (Receba Ajuda / Ofereça Ajuda) facilitaria a navegação
A hierarquia da homepage facilitaria compreensão da proposta em menos de 2 cliques
O conteúdo de dicas seria localizável de forma autônoma pela navegação principal
O botão de doação seria identificado sem fricção no header
Padrão de fricção principal
Hipótese 3 falhou. As dicas para pedalar e ensinar não estavam encontráveis e nenhum participante percorreu o caminho esperado.
Decisões derivadas de evidência
06 - Design system
Design review
Identifiquei 4 cores de marca sem semântica definida. Botões podiam ser de qualquer cor dependendo da tela.
Propus WCAG AA para o site inteiro. Comprometer a leitura para baixa visão contradiria os valores de inclusão da ONG. Aprovação sem resistências.
Biblioteca e handoff
Apresentei gradualmente aos stakeholders: foundations, componentes isolados e finalmente aplicações em wireframes.
Entreguei os componentes em formato Storybook, plug-and-play para devs.
07 - Impacto e conclusões
Resultados qualitativos
"Achava o site antigo muito fixo nas informações, elas estavam escondidas. Agora a pessoa consegue tirar dúvidas."
— Nenci, voluntária veterana de 1,5 ano
"Sentimento bom! Alegria por entender o projeto."
— Deyse, 55 anos, professora, aprendiz
Corrigi o único ponto cego estrutural (dicas no submenu) antes da alta fidelidade.
Aprendizados
Entregas estáticas são limitantes
Entregando componentes com código ajudei a reduzir o cronograma e reassegurei fidelidade na interface, atualmente considero AI building parte do meu trabalho.
Acelerar exige desapego e sacrifícios
Em prol da velocidade o texto perdeu autoria e o código das features perdeu limpeza. Mas garantimos tudo testável no prazo e uma revisão humana controlou a perda de qualidade.
Métricas qualitativas ofereceram respostas parciais
Likert e feedback validaram usabilidade e clareza, mas não cubriram CTR, bounce rate ou tempo na página. O site está em staging, essas métricas só existirão em produção.
Próximos passos
Acompanhar e comparar métricas quando disponíveis
Sistema de match aprendiz-voluntário (back-end)
Área logada com perfil e histórico de pedaladas
Mapa de rotas seguras integrado ao buscador
