Orangewood Foundation is a nonprofit organization in Orange County, California, dedicated to empowering young people facing or at risk of challenges such as homelessness and trafficking. Through a range of programs and support services, the organization helps youth work toward gaining independence and building their future.

Orangewood’s digital presence was split between two distinct websites, one dedicated to supporting youth by helping them find programs and resources, and the other focused on the wider community looking to learn, donate, volunteer, or get involved in other ways. While each site provided important information, this fragmented digital experience made navigation and content discovery more complicated for users and created extra challenges for content upkeep.

The goal of this project was to merge these sites into one streamlined website, with clear, intuitive navigation tailored to the needs of different audiences. Youth looking for support needed quick and easy access to programs and relevant resources, even with limited tech access or familiarity. Community members needed equally direct pathways to understand the organization’s work, get involved, and contribute.

Scalability was just as important as usability. Orangewood needed a site that could grow with them, one that would make it easy for their team to add new content or create pages without a major redesign. This meant designing a modular, component-based system that maintains a consistent, welcoming experience while allowing the flexibility to adapt and expand as the organization’s work evolves.

The project began with a detailed audit of the two existing websites, along with competitive research to identify opportunities for improvement. From there, a new sitemap was created to simplify user journeys and bring all content under one unified structure. This was followed by wireframing and UI design, focused on creating a clear and accessible information architecture, both at the overall site level and within individual pages, to ensure content flowed smoothly.

The visual design built on and refined Orangewood Foundation’s existing brand, elevating it into a polished, welcoming look. A modular component library was created to provide flexibility and scalability, making it easy for the team to add or update content while keeping the site consistent.

As the Web Designer on this project at Column Five Media, I led the UX and UI from the initial audit through final UI design, developer handoff, and design QA. I collaborated closely with our internal team, the client, and developers to bring the vision to life and deliver an impactful user experience.

Navigation was a key priority for the Orangewood team, especially to help youth quickly find the support they need. We designed the top navigation to feature all four program categories in the Programs dropdown, each expanding on hover to reveal every program within. This puts every program just one click away from the homepage and makes content discovery feel quick and intuitive. We applied the same approach to community links, grouping all “Get Involved” content under one clear category for easy access.

On the “Our Programs” page, users can filter by category to narrow results instantly. Each program is built from a flexible template, giving the Orangewood team the tools to add new programs as their offerings grow, ensuring the system stays scalable and easy to manage.