Bike Anjo - Institucional redesign
Period: May to October 2025 | 5 months
Team:
Low fidelity: 2 UX Designers + 1 UX Writer + 3 devs
High fidelity: 1 UX Designer + 1 QA + 3 devs
Problem
Bike Anjo's website had been down for 5 years.
The NGO, active in hundreds of cities since 2010, was operating through social media alone. Without a dedicated channel, there was no clear path for people who wanted to learn to ride or for those who wanted to teach.
My participation
End-to-end redesign as principal designer.
I led from information architecture through developer handoff, including AI building for functional components.
Results
2
Schedule reduced via AI building
0
Estructural errors
QA approval with no semantic corrections
100%
Accessible contrast across all components
22 screens produced
Full front-end in staging
+100 components
Design system from scratch + Storybook handoff
01 - Context
Structural problems
I mapped every page of the old site before designing any screen
When I joined, the team was already producing the homepage. I proposed pausing because moving forward without a structured architecture would generate rework.
This revealed five problems:
Organization-centered architecture: the navbar was talking institution only ("About Us," "What We Do," "Blog") and had no paths for people who need help or want to help
Invisible learner: no dedicated area for the most important user profile
Redirect pages: pages existed solely to send you somewhere else, with no content of their own
No return: entering a page by mistake left no way to go back or find another destination
Text blocks without break: lengthy content, from bios to lists of local chapters, everything demanded continuous scrolling
02 - Emotional barrier
I created two personas based on the NGO's 15 years of historical data. The existing base identified the most relevant pattern.
Main insight
If Maria's problem is fear, then the site needs to feel welcoming, not institutional.
This insight, grounded in historical data and confirmed through testing, reorganized the homepage hierarchy and the site's tone of voice.
03 - Architecture by profile
New information architecture
Get Help: flow dedicated to learners, with local chapter search engine
Offer Help: flow dedicated to volunteers, with information about the NGO's training program, donation area, and institutional support
Initiatives: campaigns, projects, and events gathered in a single flow
About Us: institutional content, tips, financial transparency, and history
Fixed donation button in the header: based on benchmarks with Pimp my Carroça, Greenpeace, and AACD
04 - Agent and ai building
LLM copy agent
I built a conversational AI with ChatGPT to take pressure off our UX Writer.
The goal was to support writing the whole 22 pages within the deadline.
Main problem: the AI tended to use terms like "obrigade" and "companheires" (gender-neutral neologisms in Portuguese), which required fine-tuning since this generated pushback from part of the audience, according to the client.
Trade-off: We secured testable content but gave up fully authoral writing.
AI Building: coded prototyping
I developed two features using Cursor and V0 to ensure precise interactivity and to shorten our schedule.
Handoff: Components commented as links on Figma wireframes, code reviewed with devs during weeklies. Each coded delivery eliminated 2 to 3 dev days, adding up to 2 weeks reduced in total (combined with Storybook).
05 - Testing and evidence
Usability test
Script
Separate scripts for Learner and Volunteer profiles
Activities
Profile-contextualized tasks in increasing complexity, with Likert 1–5 debriefing
Sample
7 sessions; I conducted 5 and the UX Writer conducted 2 using the script I provided
Diversity
Regions: South, Southeast, Central-West, and Northeast.
Age range: 18 to 55
Hypotheses tested:
Profile-based organization (Get Help / Offer Help) would ease navigation
Homepage hierarchy would convey the value proposition in under 2 clicks
Tips content would be independently findable through the main navigation
The donation button would be identified without friction in the header
Main friction pattern
Hypothesis 3 failed. Tips for riding and teaching were not findable, and no participant followed the expected path.
Evidence-driven decisions
06 - Design system
Design review
I identified 4 brand colors with no defined semantics. Buttons could be any color depending on the screen.
I proposed WCAG AA for the entire site. Compromising readability for low-vision users would contradict the NGO's inclusion values. Approved without resistance.
Library and handoff
I presented gradually to stakeholders: foundations, isolated components, and finally applications in wireframes.
I delivered components in Storybook format, plug-and-play for devs.
07 - Impact and conclusions
Qualitative results
"I thought the old site was too fixed on information; it was hidden. Now people can get their questions answered."
— Nenci, veteran volunteer of 1.5 years
"Good feeling! Happy to understand the project."
— Deyse, 55, teacher, learner
I fixed the only structural blind spot (tips buried in the submenu) before high fidelity.
Learnings
Static deliveries feel limiting.
Delivering components with code helped reduce the schedule and ensured interface fidelity. I now consider AI building part of my practice.
Speed requires detachment and sacrifice.
In favor of velocity, the text lost authorship and the feature code lost cleanliness. But we kept everything testable on schedule, and human review controlled the quality loss.
Qualitative metrics offered partial answers.
Likert and feedback validated usability and clarity but did not cover CTR, bounce rate, or time on page. The site is in staging; those metrics will only exist in production.
Next steps
Track and compare metrics when available
Learner-volunteer matching system (back-end)
Logged-in area with profile and ride history
Safe route map integrated with the local chapter search
