Impact Metrics
+21%
Increase in program page discovery
–36%
Reduction in drop-off on key pages
+32%
More time spent exploring programs
*Based on Squarespace analytics comparing Jan–Dec 2025 vs Jan 2026 post-launch.
The redesigned navigation and content structure helped visitors discover and explore youth programs more effectively. After launch, I monitored site analytics to evaluate engagement and navigation behavior.
Objective
Redesign the website to create a welcoming experience for youth while improving clarity and trust for donors and partners.
Time
3-Month Engagement (Nov 2025 – Jan 2026)
Role
UX/UI Designer, UX Researcher, Interaction Designer.
Tools
Figma and Squarespace
About
Foryouth Initiative
FYI’s website had grown into a complex and difficult-to-navigate experience. Key programs were buried, and even internal teams lacked confidence directing users to the site. This created a critical issue: youth struggled to find support, while donors lacked clarity and trust.I redesigned the site structure and navigation to simplify access, reduce overwhelm, and better support both audiences.
Chapter 1
The Problem
The website had grown to 7+ primary pages with overlapping content, creating navigation overload. Key programs were buried, making it difficult for users to quickly find support. Even internal teams struggled to confidently guide people through the site.
Where the experience was breaking down
When I was first introduced to For Youth Initiative, the team admitted something difficult: they didn’t feel confident sending people to their own website.
Generic CTA
"We don’t feel confident sending people to our own website."
—Manager, FYI on Keele & Community Engagement
"There are too many pages — even we get lost.”
—Development Director
This wasn’t a visual design issue. It was a structural problem.
How I uncovered this
Conducted stakeholder interviews with FYI team members (Anne, Cristian) and reviewed internal documentation. Patterns across conversations revealed consistent navigation confusion and lack of confidence in directing users.
Key themes emerged consistently:
The team lacked confidence directing users to the website
Important programs were difficult to find and often buried
The site had grown too large, making it difficult to maintain
There was a need to improve clarity and credibility to better attract donors and partners
Chapter 2
Key Insights
A site audit and stakeholder conversations revealed three core issues impacting usability and trust.
1
Navigation Overload
Insight
7+ top-level pages created confusion at entry, with users unsure where to begin.
Why it mattered
Users struggled to quickly understand where to go.
2
Unclear Audience Pathways
Insight
Youth and donors followed the same paths despite having different goals.
Why it mattered
Different needs were not clearly supported.
3
Organization-Centered IA
Insight
Content followed internal categories, forcing users to figure out where to go.
Why it mattered
Users had to “figure out the system” instead of being guided.
Old Information Architecture
The site structure revealed fragmentation, uneven content distribution, and a lack of clear prioritization across user needs.
Chapter 3
Design Decisions
The audit revealed a structural problem, not a visual one. To reduce cognitive load and clarify pathways, I simplified the information architecture and introduced clear, intent-based pathways to reduce entry friction.
Simplifying Navigation (New IA)
Insight: Navigation overload created friction at entry.
Action: I reduced 7+ top-level items into 4 clear categories by merging overlapping content and removing redundancy. Outcome: This allowed users to quickly understand where to go.
7 Main Pages → 4 Main Pages
While this required merging some content and redefining categories, the simplified structure reduced cognitive load for users and aligned better with the team’s ability to maintain the site over time.
Audience Pathways
Insight: Youth and supporters were forced through the same experience despite having different goals.
Action: I designed clear, intent-based entry points on the homepage, enabling users to immediately identify their path. Outcome: This reduced decision friction at entry and created a more guided, goal-oriented experience.
Multiple Paths to Support
Buttons map common youth concerns to the right resources.
Action-Oriented Homepage
Visual hierarchy prioritizes clear actions instead of dense text.
Structuring Content for Clarity & Trust
Insight: Content lacked clear hierarchy and mixed storytelling with action, making it difficult for users to understand impact and next steps.
Action: I separated storytelling (Stories & Impact) from action-oriented pathways (Get Involved), creating clearer structure and prioritization.
Outcome: This improved clarity and made both impact and actions easier to understand.
Stories and Impact
Get Involved
Chapter 4
Before Vs After
Translating structural decisions into a clearer, more action-driven experience.
From Hard-to-Scan Content to Clear Action
Before
Hard to scan, no clear next step.
After
Clear hierarchy and a focused primary action.
From Scattered Content to Structured Support
Before
Programs spread across pages, hard to navigate.
After
Centralized into clear categories for faster access.
From Mixed Messaging to Clear Intent
Before
Opportunities were fragmented by internal categories, forcing users to self-navigate.
After
A unified “Get Involved” hub organized opportunities by user intent, simplifying exploration.
Chapter 5
Outcomes & Reflection
In this chapter, I reflect on the outcomes of the FYI redesign and share key learnings from designing for multiple audiences within a real nonprofit environment.
The Reflection
The redesign revealed how strongly structure shapes access. By separating pathways for youth seeking support and supporters evaluating FYI’s impact, the site now guides each audience toward the information most relevant to them.
If I were to iterate further, I would validate the new IA through usability testing to measure task success and refine pathways based on real user behavior.
Before
Programs difficult to discover.
After
Clear pathways to youth services.
Academic Support
Employment Services
Youth Justice
Newcomer Advancement
Next Steps
1
Events & Engagement
Highlight workshops, mentorship, and community events.
2
Direct Program Contact
Connect youth directly with program coordinators.
3
Resource Hub
Centralized guides and tools for youth support.
4
Accessibility & Language
Multilingual support and improved accessibility.
Designing for behavior. Designing for impact.
Next
Project
