CASE STUDY
Dreamcatchers Youth
Designing a community-centered website to connect students, tutors, and parents
Project Background
Dreamcatchers Youth is an after-school program supporting middle-school students across three Palo Alto schools.
During my six-month tenure as Program Manager at Fletcher Middle School, I noticed communication gaps: tutors arrived late due to missed schedule updates, parents relied on paper flyers, and students often didn't know what activities were planned.
The existing website was static and outdated, offering no real-time information or user-specific navigation. I proposed and led a redesign to create a centralized, accessible communication platform that would serve all three user groups and reduce dependency on manual updates.
Project Scope
Duration
6 months (concept → launch)
Team
1 Product Designer (me), 1 developer, 2 program directors, 1 board advisor
Tools
Figma, Google Forms, Notion, Wix CMS
Constraints
Nonprofit budget, limited technical staff, volunteer-based content updates
Audience
~120 students, 30 tutors, and 60 parents across three schools
The Key Problem
How might we design a website that meets the distinct needs of parents, tutors, and students—while fostering transparency and belonging?
"A single incident crystallized the issue: a tutor arrived an hour late because she hadn't seen an updated testing schedule. That delay resulted in a lost tutoring session and frustration on all sides."
Research & Discovery
I conducted 20 interviews (12 parents, 8 tutors) and 10 student surveys to identify communication breakdowns.
83%
of parents said they "relied on flyers or texts" for updates
70%
of tutors wanted a "one-stop page for schedules and resources"
90%
of students primarily accessed information via mobile
Maria (Parent)
Needs consistent updates and reassurance about program logistics
Alex (Tutor)
Wants clarity, efficiency, and downloadable lesson materials
Jasmin (Student)
Values visual, mobile-friendly design and quick reminders
Design Strategy
Clarity · Accessibility · Warmth
Clarity
Condensed navigation from 8 tabs → 3 core sections; introduced global announcement banner
Accessibility
High-contrast palette, large tap zones, and simplified English for multilingual families
Warmth
Rounded typography and candid photography to reflect the program's welcoming culture
"Families should feel the same sense of care online that they experience in the classroom."
User Testing
Lo-Fi Testing
Participants: 5 tutors · 4 parents · 3 students
- • Parents preferred scrollable mobile layouts with clear "Today" cards
- • Tutors requested grade-level filters and PDF lesson downloads
- • Students wanted photos and short headlines over text-heavy pages
Hi-Fi Testing
Participants: 8 users (3 parents · 3 tutors · 2 students)
88%
located desired info within 10 seconds (old site: 40 seconds)
7 of 8
rated navigation "intuitive" or "very intuitive"
Final Solution
The redesigned website unified communication and empowered staff across all three sites.
Centralized Calendar
Auto-updated by site directors via shared CMS
Responsive Layout
Mobile-first for on-the-go checking
Tutor Portal
Secure area for lesson plans, attendance forms, and announcements
Announcement Banner
Persistent real-time update bar for early dismissals and events
Community Page
Highlights achievements and drives volunteer engagement
Measurable Impact
Within three months of launch:
64%
Missed tutoring sessions dropped due to improved schedule visibility
+42%
Site traffic grew, averaging 900 monthly visits across three campuses
85%
Flyer distribution decreased, saving ~12 staff hours per month
58%
Email inquiries reduced, freeing coordinators to focus on programming
"The new site makes my job easier — I can update schedules for all our campuses in one place."— Program Director
Accessibility & Inclusion
- • Passed WCAG 2.1 AA color-contrast tests
- • Provided bilingual toggle (English/Spanish) for key announcements
- • Added ARIA labels, alt text, and descriptive links for screen-reader users
- • Simplified language to sixth-grade reading level for universal comprehension
Key Takeaways
This project demonstrated how human-centered design can transform communication systems in community programs.
"Good UX doesn't just make things easier — it gives communities time back to focus on what matters most: their students."