Our House: Redesigning a Home for Youth After Foster Care
A full UX and visual redesign for a nonprofit supporting youth transitioning out of foster care. I led information architecture, usability improvements, and stakeholder collaboration to create a more welcoming and empowering site for both youth and supporters.
View Full Prototype
Role
Project Manager & UX Designer
team
5 Designers, Group Project
timeline
Tools
Figma, Miro, Wix, Google Drive
The Problem: Overwhelmed at First Click
The original Programs & Services page overwhelmed users with too much information at once. We broke it into two clear paths, Mentoring and Youth Programs, each with cleaner structure, visual hierarchy, and clearer calls to action.
before
After
Our Goals: How We Hoped the Redesign Would Help
Build Trust
Design a site that feels approachable and aligned with Our House’s values.
Simplify Navigation
Help users find what they need quickly without confusion or overwhelm.
Improve Usability
Ensure content is readable, mobile-friendly, and accessible across devices.
Personas: Who Are We Designing For?
We focused on two key audiences. We mapped their different motivations and pain points through personas and task flows, derived from early interviews and stakeholder discussions.
Christine
Youth/Mentee
Needs: Clear info on programs & events
Pain Point: Site is overwhelming
Goal: Feel supported while staying independent
Connor
Needs: Understand how to help & join
Pain Point: Not sure how to get started
Goal: Be a mentor like his loved ones never had
Key Barriers to Usability
We began with heuristic evaluations and stakeholder interviews to identify usability issues and organizational needs.
Key issues we uncovered
1
Confusing navigation with overlapping menu categories
2
Dense pages lacking hierarchy
3
A homepage that didn’t reflect Our House’s impact
Our Design Question
After identifying pain points from our research, we synthesized a central design challenge:
How might we create a site structure that meets the needs of both service-seeking individuals and supporters, while reducing confusion and maintenance burden?
UX Research: Listening to Users Helped Us Prioritize
We interviewed 8 participants, including youth who have experienced foster care and nonprofit supporters. We also conducted card sorts and usability testing of the original site.
Affinity Diagram
What We Learned
Users wanted clear entry points: "Where do I start?" was a common question.
Service-seekers needed trust and clarity.
Donors cared about impact, but found it hard to see what Our House achieved.
The sitemap confused all user types.
We used dot-voting to identify and prioritize key user concerns.
These insights helped shape our top design priorities.
Sketching Out New Possibilities
To kick off our design process, we explored different information architectures and layout directions. I led low-fidelity sketching sessions that helped us debate what content to prioritize and where key links should surface.
Client Feedback
Wanted the homepage to be more emotionally engaging
Asked for better pathways to “Get Involved” and “Programs”
Based on this, we iterated on the structure of the homepage hero, info cards, and navigation model.
Testing, Iterating, and Testing Again
Mid-Fidelity Testing Highlights
I tested the wireframes using a user interview guide to evaluate comprehension and navigation. Feedback included:
"This is way easier to understand."
-P3, Mentee
Key Changes Based on Feedback
1
Added short nav descriptions
2
Created summary cards linking to deeper content
3
Increased white space for clarity
mid-fi wireframes
From This → To This
Our client wanted a site that felt emotionally engaging, easy to navigate, and aligned with their mission. Each page was redesigned to guide users with clarity, warmth, and accessible pathways to action.
View Full Prototype
homepage
Before
The original homepage felt dense and uninviting, with minimal visual hierarchy and no clear introduction to Our House’s mission or audience. Key pathways like “Get Involved” and “Donate” were hard to find.
After
We redesigned the homepage to clearly introduce the mission, highlight the core audiences (youth, mentors, supporters), and guide users with visual cards and strong calls to action.
before
after
youth programs
Before
The Youth Programs page was long and difficult to navigate, with large blocks of unbroken text and a static carousel that was easy to skip.
After
We reorganized the page using expandable sections and icon-supported headings, helping users quickly scan offerings and find programs relevant to them.
before
after
Donate
Before
Donation options were buried in text and lacked clarity, making it difficult for supporters to know how to contribute or take action.
After
We introduced clear donation paths (money, time, resources), interactive buttons, and welcoming copy, making it easier to give and feel more connected to the cause and confident in their impact.
before
after
What This Project Taught Me
This project helped me grow as a researcher, designer, and collaborator.
MY BIGGEST TAKEAWAYS
Listen, then lead.
Facilitating stakeholder meetings helped us prioritize user needs while aligning with organizational constraints.
Make feedback loops early and often.
Our mid-fidelity testing shaped key layout decisions and improved clarity.
Designing for complexity requires clarity.
Balancing two audiences taught me how to simplify without losing depth.
Let's Connect!