Embedded Files
Redesigned the website experience for a Nashville nonprofit serving young adults aging out of foster care, restructuring four key pages to reduce information overload and create clear pathways for users seeking support.
CONTEXT
CONTEXT
Website Redesign
ROLE
ROLE
UX Designer (Volunteer)
UX Designer (Volunteer)
TIMELINE
TIMELINE
Nov 2025 - Feb 2026
OVERVIEW
OVERVIEW
The Problem
The Problem
Monroe Harding's existing website lacked clear structure across its program pages. For young adults already navigating complex circumstances; transitioning out of foster care, seeking housing, or looking for educational support. Landing on a page dense with information and no clear hierarchy made it difficult to understand what was available and what to do next.
The core challenge: the pages had the right content but no system. No clear entry points, no logical progression, and no visual language to help users orient themselves or take action.
SCOPE
SCOPE
Pages Designed
Pages Designed
I was responsible for four pages - two existing pages that needed a full structural redesign, and two new pages created to support proper navigation under the Resource Center.
01 Supportive Housing
Restructured an information-heavy page to clearly communicate two distinct housing tracks: Bright Futures and Private Pay, with an application flow, an FAQ accordion, and a testimonial section to build trust.
02 Resource Center
Redesigned the hub page to serve as a clear launchpad to sub-resources, with navigational cards, a program highlight, and a community feel that reflects the center's welcoming environment.
03 Financial Literacy - New Page
Designed a new page for the Opportunity Passport™ program, introducing the program's three components with a visual layout and FAQ section to address common eligibility questions.
04 Education - New Page
Built a new page surfacing four education pathways (HiSET, Online Diploma, Post-Secondary, Tutoring) alongside scholarship and graduation celebration highlights, with a testimonial carousel.
DESIGN WORK
DESIGN WORK
What I Contributed
What I Contributed
Information Architecture
Restructured page content into logical sections with clear hierarchy using banners, body content, FAQs, testimonials, and CTAs in a consistent pattern across all four pages.
Navigation Design
Introduced navigational card components to connect resource sub-pages, reducing the need for users to backtrack and creating a discoverable, cross-linked site structure.
Layout & Wireframes
Produced Low-Fi and Hi-Fi wireframes for all four pages, applying the Monroe Harding brand guide including color system, typography, section styles, and CTA button standards.
Accessibility Considerations
Kept body content below hero banners for screen reader compatibility, maintained contrast-compliant color choices, and ensured CTA language was descriptive and action-oriented.
CONTRAINTS
CONTRAINTS
Working Within the Brand
Working Within the Brand
The design required full adherence to Monroe Harding's established style guide — a defined color palette, Inter typography, specific section treatments, and CTA button styling. This wasn't a blank canvas.
The challenge was making the brand system work harder: using it to create visual rhythm and guide the eye rather than just applying it uniformly. Choosing when to use the deep teal sections versus the lighter blue, and where to introduce the coral CTA, became the primary tools for creating hierarchy within the constraint.
Selecting imagery that was both accessible and emotionally resonant for the target audience, was an additional layer of intentionality required throughout.
OUTCOME
OUTCOME
Results and Impact
Results and Impact
✦ Transformed four unstructured pages into a coherent, navigable section of the site with consistent layout patterns.
✦ Created two net-new pages that surface previously buried program content and provide proper entry points from the Resource Center hub.
✦ Established an FAQ interaction model and testimonial component reused across all four pages, reducing cognitive load for users with multiple questions.
✦ Delivered wireframes ready for handoff, aligned to the existing brand guide and sitemap.
Page updated
Google Sites
Report abuse