True
Freedom
Responsibility
Team
1 designer (me), Founder/SME,
1 developer
Timeline
Rebuilt the information architecture and topic taxonomy for a 300 + article nonprofit website and delivered a tokens-first design system to improve findability, consistency, and accessibility across all content touchpoints.
Design handoff completed; full rollout planned for Q1 2026.
OUTCOMES
Task success: 50% → 77% (+27 pp, n = 8)
Time-to-content: 170 s → 100 s (–41%)
Clarity: +1.2 / 5 Likert
Unmoderated hi-fi prototype tests (n = 8); indicative, not statistically significant.
PROBLEM
Legacy IA and inconsistent topic structure caused 60 % drop-offs after two clicks and an average 2 min 50 s to find relevant content.
We needed to realign information architecture with the brand’s calm, human-centered tone.
BRAND & TONE WORKSHOP (90 MIN)
Facilitated a short alignment workshop using affinity mapping to cluster tone words and audience mindsets.
This ensured the new IA reflected the brand’s calm, supportive, and human-centered personality.
HYPOTHESIS
If we rebuild the IA and topic taxonomy and introduce consistent browse and search patterns, users will locate teachings faster and complete tasks with higher accuracy.
Baseline task success = 50% on legacy site.
GOALS
Reduce time-to-content by ≥ 35% (vs baseline click-path tests).
Increase task success by ≥ +20 pp (“Find topic → Open article”).
Establish tokens-first design system with AA color contrast.
PROJECT AT A GLANCE
Deliverables: IA & taxonomy, navigation patterns (menus, topic hubs, related content), type-ahead search, article templates, tokenized design system.
Process: 5 interviews · heuristic review · hybrid card sorting · unmoderated click-tests (n = 8) · rapid prototyping.
Constraints: Limited analytics · no live A/B · validated through usability testing.
BEFORE
Users faced a long, scroll-heavy list of topics where repeated clicks redirected to external sites (Quora), breaking the reading experience.
Pain points:
Overloaded, unstructured navigation.
Users lost context when leaving the site.
Chaotic layout with no hierarchy.
AFTER - STRUCTURED HUB:
Topics were moved into a persistent left-hand navigation panel, where each click opens a dedicated article page with related content.
Clear information architecture provides orientation.
Users always know their place in the flow.
Full articles with headings and structured layouts enable deeper engagement.
The experience remains within the platform (no external redirects).
RESEARCH SNAPSHOT
Methods:
Mixed-method evaluation combining interviews, competitive scan, and hybrid card sorting.
5 user interviews (scenario: Find and open a relevant article).
Competitive scan (navigation, search/browse, result cards, related content).
Hybrid card-sorting (topic clustering + synonym capture).
Unmoderated click-tests (n=8) on hi-fi prototype.
Key Insights → Design Changes:
• Fuzzy terms → Topic hubs + synonym map
• Inconsistent metadata → Taxonomy-driven related rules
• Walls of text → Result cards + type-ahead
• Long mobile intros → Summary above the fold
IA & TOPIC TAXONOMY
We restructured the site’s IA into a clear hierarchy: Sections → Topic Hubs → Articles.
This ensures intuitive navigation and clear context at every step.
• Identified Strengths: mission-driven team, safe space, real-life impact.
• Weakness: outdated design, inconsistent tone, confusing structure.
KEY DECISIONS & TRADE-OFFS
Topic hubs over deep nav trees to shorten “fuzzy → focused” journeys.
Trade-off: requires more upfront tagging work.
Result cards + type-ahead instead of paragraph-style results.
Trade-off: additional design effort for snippets and labels.
Related-content rules via taxonomy rather than manual curation.
Trade-off: depends on consistent metadata quality.
Tokens-first system (color, spacing, typography, radius).
Trade-off: initial refactor of legacy CSS.
AA color contrast enforced at the token level.
Trade-off: narrows the available brand shade range.
I built a tokenized library of small atomic components (buttons, inputs, cards) that combine into larger patterns (navigation bars, content grids).
Typography was chosen for clarity and brand alignment.
Buttons are visually distinct and accessible, and color tokens balance warmth with AA contrast.
