Redesigning a Nonprofit’s Digital Experience to Drive Community Engagement
UX Strategy ● Usability Testing ● No-code dev ● Figma
Summary
I led the full UX and visual redesign of the College Park City-University Partnership (CPCUP) website. The goal was to modernize the organization's digital presence, improve accessibility, streamline the information architecture, and create a more intuitive experience for users seeking community resources, news, and programs.
About the Client
The College Park City-University Partnership (CPCUP) is a nonprofit organization that drives collaboration between the City of College Park and the University of Maryland. Through initiatives in housing, education, transportation, and economic development, CPCUP works to enhance the livability, vibrancy, and long-term growth of the community.
Scope of Work
As the sole Product Designer on this project, I led the end-to-end design execution, including:
Conducting stakeholder interviews and usability audits to uncover pain points and goals.
Auditing the existing 30+ page website and restructuring the information architecture.
Designing wireframes, high-fidelity prototypes, and an accessible component library.
Implementing the new design within a WordPress environment and ensuring responsiveness.
Leading usability testing and multiple iteration cycles based on user feedback.
Impact & Results
3x increase
in community participation in housing programs within two months of relaunch.
Navigation depth reduced
from 5 to 4 levels, making it easier to access information.
Accessibility improved
meeting key WCAG 2.1 standards.
89% task success rate
in resource-finding tasks, validated through moderated usability testing.
Role
Product Designer & UX Strategist
Timeline
Sep 2024 - Jan 2025
Tools used
Figma
Figjam
Wordpress
Zoom (User Testing)
Services
Heuristic Evaluation
Usability Audit
Interviews and Surveys
Information Architecture
UX Design
UI Design
Content Strategy
Prototyping
Usability Testing
The Problem
The existing CPCUP website presented several usability and accessibility challenges that hindered user engagement. Through an initial heuristic evaluation, I identified critical issues that needed immediate attention to improve the overall user experience. Additionally, because the site was built on a WordPress platform, I had to design within its technical constraints while ensuring scalability and maintainability.
1. Difficult Navigation
Important details were scattered across pages, and there was no clear content hierarchy. Menus were cluttered or confusing
2. Inconsistent Visual Language
Mismatched fonts, colors, and layouts, and no style guide or design system was in place.
3. Unclear Calls-to-Action
There were limited pathways for user engagement and Buttons and links lacked clarity.
4. Limited Accessibility
Some of the webpages failed basic WCAG 2.1 criteria due to poor contrast, missing alt text, and no keyboard support. The website was also not mobile-friendly.
Problem Statement
How might we restructure and redesign the CPCUP website to surface key information more intuitively, improve accessibility, and better support stakeholders in communicating the organization’s mission, initiatives, and community impact?
My Approach
I followed a user-centered, iterative design process rooted in research and shaped by continuous collaboration with stakeholders.
1. Discovery & Research
Conducted a comprehensive usability audit and stakeholder interviews to uncover key pain points. Performed a comparative analysis of similar community-focused websites to identify best practices.
2. Analysis & Insights
Led card sorting exercises with stakeholders to inform a more intuitive navigation structure and align the site architecture with user expectations.
3. Content Strategy
Restructured over 32 pages to create clear, logical user pathways. Prioritized frequently accessed content to ensure essential information was easy to find and act on.
4. Design
Developed a refreshed design system focused on visual consistency, accessibility, and brand alignment. Implemented the redesigned site using a no-code development platform for rapid deployment.
5. Validation through User Testing
Conducted remote usability testing sessions with returning users to validate design decisions. Iterated on key elements based on real-time feedback to ensure a more seamless user experience.
1. Discovery & Research
Before diving into design, I knew it was critical to understand the why behind user frustrations.
I began with a focused survey to identify the core priorities for the redesign - what needed to change and why it mattered. These early insights highlighted key areas of concern and helped align stakeholders around shared goals from the start.
Next, I conducted a comprehensive usability audit of the existing site, evaluating every touchpoint through the user's lens.
From hidden navigation paths to inconsistent content flow, I mapped the friction points that were quietly eroding the user experience.
In parallel, I stepped back to understand the brand identity CPCUP wanted to convey - one rooted in connection, community, and accessibility. To ground my design decisions in a broader context, I also conducted a competitive analysis of peer organizations' websites, focusing on nonprofits that work in community development, housing support, and university partnerships.
These benchmarks provided valuable insights into sector best practices and inspired strategies for creating a more intuitive and welcoming digital experience.
Surveys & Stakeholder alignment
➞ Difficulty sharing relevant programs.
➞ Desire for up-to-date news and events.
➞ Updated Digital Library presence.
➞ Modern, trustworthy look and feel.
Competitve Analysis
➞ Simple, flat navigation with clear pathways to the programs.
➞ Prominent storytelling elements that build trust and engagement.
➞ Consistent mobile-first design.
Brand Identity Research
➞ Community-driven, welcoming, and action-oriented tone.
➞ Visual language needed to balance professionalism with approachability
➞ Accessibility of information was the core value.
2. Analysis & Insights
With the key problem areas clearly mapped, it was time to reimagine the website experience from the ground up.
I kicked off the redesign by leading a collaborative card-sorting session in FigJam with key stakeholders, including executive directors, program managers, and the communications coordinator. This hands-on exercise helped us rethink the information architecture through a user-centered lens. Together, we surfaced natural content groupings, clarified priorities, and structured information in ways that felt intuitive and purposeful.
As a direct outcome, we were able to streamline the navigation, reducing its depth from five layers to four, making key resources easier to find while maintaining necessary content depth.
Redundant Content Identified
Several pages, especially older program descriptions and archived initiatives, were no longer relevant and created unnecessary clutter.
Buried Key Information
Important resources like upcoming events, current initiatives, and contact details were nested too deep in the hierarchy.
Underused Pages Discovered
Analytics revealed several pages received little to no traffic, indicating poor discoverability or limited value to users.
Overly Complex Navigation
The original five-tier structure overwhelmed users and made content harder to access, especially on mobile.
3. Content Strategy
Building on the new information architecture, I restructured more than 32 pages to create a cleaner, more intentional user flow.
I prioritized high-traffic areas such as community programs, housing initiatives, and upcoming events, ensuring users could quickly find the information they needed with clarity and confidence.
This reorganization not only reduced cognitive load but also aligned the site's structure with the real needs of users and stakeholder priorities, creating a more seamless and user-centered experience.
4. Design
With a solid structure in place, the next step was to turn strategy into a cohesive, accessible, and scalable visual experience.
I built a modular design system directly within WordPress, creating reusable blocks and components that could flex across different content needs. This approach wasn't just about aesthetics - it was about driving consistency, usability, and future-proofing the platform.
By establishing this design foundation, I ensured the visual language aligned with CPCUP’s mission while delivering a seamless, accessible experience for every visitor.
Foundation for the Design System
1. Accessible Color Palette
Ensuring it meets WCAG standards, with a minimum contrast ratio of 4.5:1 to ensure optimal readability.
2. Clear typography hierarchy
Texts optimized for both desktop and mobile, making content easy to scan and digest.
3. Responsive component library
Featured buttons, cards, and menus designed to adapt across all screen sizes.
4. Thoughtfully designed interactive states
Subtle neo-brutalism shadows and lightweight animations to enhance engagement without overwhelming users.
5. Well-documented design guidelines
Enabling the content manager to confidently scale and maintain the system.
5. Validation through User Testing
Design isn’t just about how it looks—it’s about how it works when real people use it.
To ensure the redesign truly met user needs, I conducted usability testing with four returning users - a mix of residents, students, and local partners already familiar with the site. By observing how participants navigated the prototype, I identified friction points and moments of hesitation, turning each interaction into an opportunity to improve clarity, flow, and accessibility.
Testing Focus Areas:
-
Exploring the Homepage
-
Navigation and Information Discovery
-
Key User Interactions (e.g., finding programs, signing up for events)
-
Overall experience in terms of visual design, usability, and accessibility
Additionally, I tested multiple layout variations for high-traffic sections, such as “Programs” and “Events,” to inform design decisions. This iterative, feedback-driven approach enabled us to refine the experience based on actual user behaviors, rather than assumptions.
The result? 89% task success rate, validating that the redesign meaningfully improved navigation, usability, and user satisfaction, bringing the community closer to the content and programs they care about.
Feedback from User Testing
Positive Response to Visual Hierarchy
"I really like how everything is spaced out now—it's so much easier to read without feeling overwhelmed."
~ User 1
Success with Updated Navigation Labels
"The new navigation feels super intuitive. I didn’t have to guess where things might be - everything is labeled exactly how I'd expect."
~ User 2
Appreciation for Responsive Design
"I’m usually on my phone, and now everything just fits perfectly. I didn’t have to zoom in or hunt around for links anymore."
~ User 4
Engaging News Section
"I found myself clicking through multiple updates just because the layout made it easy and interesting to browse."
~ User 3
Renewed and Helpful Digital Library
"Finding resources used to be confusing, but now with the search bar and clear labels, I got what I needed in seconds."
~ User 1
The Solution
With a validated design in place, I managed the transition from prototype to production using a no-code WordPress framework. This approach enabled a smooth handoff and rapid deployment, minimizing friction while preserving the integrity of the design system and ensuring full compliance with accessibility standards.
The redesign not only strengthened CPCUP’s online presence but also established a scalable foundation for future growth, one centered around real user needs. By combining strategic UX thinking with practical implementation, the project positioned CPCUP for long-term success and renewed community engagement.
Streamlined Information Architecture
Created a flatter, more intuitive hierarchy with clear labeling, enabling faster navigation to high-priority content like community programs, strategic initiatives, and upcoming events.
Modular Homepage Design
Designed a flexible, modular homepage layout that acts as a central hub - spotlighting news, featured programs, about the organization, and key calls to action - all easily updateable by the CPCUP team.
Improved and Digestable Content Format
Reworked on content organization for key programs and initiatives to make the resources available easy to read and not overwhlem the users.
Refreshed Visual Design with WCAG Compliance
Applied high-contrast color schemes and accessible UI components, ensuring an inclusive and visually cohesive experience that meets WCAG 2.1 accessibility standards.
Engagement-Driven Interactions and CTAs
Optimized key pathways for event sign-ups and newsletter subscriptions based on user testing insights. Redesigned the News & Events sections with a card-based UI, creating a fresh, scannable experience that significantly improved engagement and readability.
Reflection & Key Takeaways
✦ Aligning user and stakeholder needs is essential
Balancing organizational goals with user expectations was key. Every design decision needed to serve diverse audiences while clearly communicating CPCUP’s mission.
✦ Accessibility starts with mindset
This project reinforced that accessibility isn’t a checklist—it’s a foundational approach, from content structure to contrast ratios and keyboard navigation.
✦ Content clarity drives better engagement
I learned that effective UX isn’t just about visuals—it’s about making the right information easy to find and act on at the right time.
✦ Testing turns assumptions into insights
Real user feedback surfaced opportunities I hadn’t anticipated and helped refine the experience in meaningful, measurable ways.
What will I Bring to Future Projects?
-
A research-led, user-first design mindset
-
Scalable, accessible design systems
-
Cross-functional collaboration
-
Flexibility to adapt and iterate
-
A passion for meaningful, thoughtful UX