Objective
Time
Role
Tools
Impact Metrics
The redesigned navigation and content structure helped visitors discover and explore youth programs more effectively. After launch, we monitored site analytics to evaluate engagement and navigation behavior.
+21%
–36%
+32%
About
Foryouth Initiative
What began as a structurally overwhelming and outdated website became a clearer, more confident digital presence for For Youth Initiative. By restructuring the site’s information architecture and simplifying navigation, I helped transform an experience the team hesitated to share into one that better serves youth while strengthening trust with donors and partners.
Discovery
Nabulé specializes in branding, product design, marketing, and social media, helping businesses build strong, impactful identities and digital experiences.
Design & Strategy
Nabulé specializes in branding, product design, marketing, and social media, helping businesses build strong, impactful identities and digital experiences.
Nabulé specializes in branding, product design, marketing, and social media, helping businesses build strong, impactful identities and digital experiences.
Chapter 1
The Breaking Point
When the website’s structure no longer supported the organization’s growth.
When Structure Became a Liability
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.
—Manager, FYI on Keele & Community Engagement
"There are too many pages — even we get lost.”
—Development Director
"Some of our most important programs are buried."
—Program Lead
This wasn’t a design refresh problem. It was a structural one.
Before redesigning visually, I mapped the existing structure to understand where breakdowns were happening.
Key Structural Observations
1. Uneven Content Distribution
“What We Do” contained 5 subcategories, while “Work With Us” had none.
2. Redundant Pathways
Programs, scholarships, and mentorship initiatives were scattered across sections.
3. No Clear Primary Audience
Youth, donors, volunteers, and board members were all treated equally at the top level.
Chapter 2
The Audit
Beyond structural imbalance, the audit revealed deeper issues affecting credibility, audience clarity, and long-term sustainability.
Credibility & Visual Trust
As the organization evolved, the website’s entry experience introduced structural friction. Navigation complexity and unclear calls to action created hesitation at the very first interaction. A heuristic review identified excessive cognitive load at entry, driven by eight equal-weight navigation items and a non-specific primary CTA.
1
3
2
1
Navigation Overload
Eight top-level items created unnecessary decision friction at entry.
2
Generic Global CTA
The primary CTA lacked specificity, reducing decisiveness.
3
Organization-Centered IA
The menu reflected internal structure rather than user goals.
Unclear Audience Pathways
FYI serves multiple audiences — youth, donors, volunteers, and partners. However, the homepage did not distinguish intent-based pathways, making it difficult for each group to quickly identify where to go next.
1
Unsegmented Audiences
Support seekers and donors were funneled through the same hierarchy.
2
Competing Homepage Priorities
Programs, impact, testimonials, and donations carried equal prominence.
3
Message Before Direction
Mission storytelling preceded clear action pathways.
Decision Fatigue & Clutter
As content expanded, pages became dense and visually flat. Without clear hierarchy or a defined primary action, users were required to process large amounts of information before understanding what to do next.
1
Low Scannability
Long-form paragraphs limited quick comprehension.
2
Flat Content Hierarchy
Text, media, and CTAs lacked clear prioritization within the page.
3
Missing Conversion Anchor
Content concluded without directing users toward a singular next step.
Content audits revealed inconsistent hierarchy and limited scannability across program pages.
Chapter 3
Rebuilding the Foundation
From Fragmentation to Focus
Seven primary navigation categories created overlap and decision friction at entry. The restructuring reduced the navigation to four clear sections by merging related pages, eliminating redundancy, and consolidating overlapping content. The examples below illustrate the key structural shifts that simplified the overall system.
Navigation Consolidation
"About FYI"
Merged into 1
page "About FYI"
Merged into 1
page "Our Team & Leadership"
Program Reorganization
"Programs & Services"
Moved into programs and services page
Created subpages and organized services and programs depending on category.
Unnecessary page (deleted)
Content Simplification
Renamed to “Stories & Impact”
Agreed with stakeholders to delete for now
Unnecessary page (deleted)
Unnecessary page (deleted)
Unnecessary page (deleted)
Designing the Information Architecture
Programs were centralized, redundant pages removed, and audience pathways clarified. The result was a streamlined navigation system with reduced depth and improved scannability.
7 Main Pages → 4 Main Pages
Chapter 4
Designing for Dual Audiences
FYI serves two fundamentally different audiences: youth seeking immediate support and supporters evaluating credibility. Designing for both required intentional hierarchy, differentiated pathways, and a visual system that balanced warmth with trust.
Youth-First Entry Points
Rather than relying on navigation literacy, I introduced high-visibility, plain-language entry points that map to common youth concerns.
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.
Trust & Impact for Supporters
The previous structure mixed volunteering, donations, and job postings, weakening clarity and trust signals. Supporters needed clearer ways to understand FYI’s impact and how they could contribute. I introduced dedicated spaces for storytelling and structured entry points for supporter actions.
Stories and Impact
Get Involved
Chapter 5
Translating Strategy Into Structure
With the architecture and experience strategy defined, the final step was translating these decisions into a clear and scalable website structure.
Visual System Refresh
The previous interface relied heavily on text and lacked visual hierarchy. I refreshed the visual system to emphasize action, clarity, and warmth while maintaining FYI’s brand identity.
Scholarship page Before
Scholarship page After
Page-Level Structure
Each primary navigation item now leads to a dedicated landing page. These pages introduce the section and surface the most relevant subpages, allowing users to quickly understand available content without navigating deeper into the site.
Primary Landing Pages:
Programs & Services
Programs and services were centralized under a dedicated section and organized by impact area. This structure allows youth to quickly identify relevant support while providing a clearer overview of FYI’s offerings.
Impact Areas
Academic Support
Tutoring and academic mentoring.
Employment Success
Career readiness and job training.
Youth Justice & Reintegration
Justice navigation and reintegration.
Newcomer Advancement
Programs for newcomer youth.
Chapter 6
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.
Before
Programs difficult to discover.
After
Clear pathways to youth services.
Academic Support
Employment Services
Youth Justice
Newcomer Advancement
Next Steps
1
Highlight workshops, mentorship, and community events.
2
Connect youth directly with program coordinators.
3
Centralized guides and tools for youth support.
4
Multilingual support and improved accessibility.
Designing for behavior. Designing for impact.
Next
Project
