Supporting underserved communities in Southeast San Diego.
Supporting underserved communities in Southeast San Diego.
Supporting underserved communities in Southeast San Diego.
Designing a website to help community members engage with the organization’s mission and events and to showcase the nonprofit’s impact.
Designing a website to help community members engage with the organization’s mission and events and to showcase the nonprofit’s impact.
Designing a website to help community members engage with the organization’s mission and events and to showcase the nonprofit’s impact.
responsive website
responsive website
project
project
client
client
Supporting underserved communities in Southeast San Diego.
Designing a website to help community members engage with the organization’s mission and events and to showcase the nonprofit’s impact.
responsive website
project
client
A platform to promote health awareness, civic engagement, and neighborhood beautification.
A platform to promote health awareness, civic engagement, and neighborhood beautification.
The Urban Collaborative Project (UCP) in San Diego is a nonprofit organization dedicated to empowering underserved communities in Southeastern San Diego — an area affected by environmental hazards, poverty, and limited access to resources.
Our ten-week project team consisted of designers, UX researchers, and developers. As the Communications Lead and designer, I managed our communication with the stakeholders and contributed to researching, prototyping, and implementing on Squarespace. We designed and launched a refreshed, responsive website that communicates UCP’s mission, promotes events, and encourages community action.
The Urban Collaborative Project (UCP) in San Diego is a nonprofit organization dedicated to empowering underserved communities in Southeastern San Diego — an area affected by environmental hazards, poverty, and limited access to resources.
Our ten-week project team consisted of designers, UX researchers, and developers. As the Communications Lead and designer, I managed our communication with the stakeholders and contributed to researching, prototyping, and implementing on Squarespace. We designed and launched a refreshed, responsive website that communicates UCP’s mission, promotes events, and encourages community action.
The Urban Collaborative Project (UCP) in San Diego is a nonprofit organization dedicated to empowering underserved communities in Southeastern San Diego — an area affected by environmental hazards, poverty, and limited access to resources.
Our ten-week project team consisted of designers, UX researchers, and developers. As the Communications Lead and designer, I managed our communication with the stakeholders and contributed to researching, prototyping, and implementing on Squarespace. We designed and launched a refreshed, responsive website that communicates UCP’s mission, promotes events, and encourages community action.
my role
my role
my role
Communications Lead, Designer
Communications Lead, Designer
Communications Lead, Designer
timeline
timeline
timeline
March to June 2025, ten weeks total
March to June 2025, ten weeks total
March to June 2025, ten weeks total
tools and methods
tools and methods
tools and methods
Squarespace, Figma, User Research, Pen and Paper, Canva, Competitive Analysis, Prototyping, User Testing.
Squarespace, Figma, User Research, Pen and Paper, Canva, Competitive Analysis, Prototyping, User Testing.
Squarespace, Figma, User Research, Pen and Paper, Canva, Competitive Analysis, Prototyping, User Testing.
key deliverables
key deliverables
key deliverables
Responsive website and content management manual for future sustainability.
Responsive website and content management manual for future sustainability.
Responsive website and content management manual for future sustainability.
01. defining the problem
01. defining the problem
01. defining the problem
The Problem
The current UCP website’s outdated information, poor usability, and dense text layout prevents community members from engaging with the organization’s mission, recognizing its impact, and taking action.
Our Solution
To address these issues, we designed a modern, visually engaging front-facing website to highlight community projects and results, provide an up-to-date event calendar, and streamline donation and engagement pathways.
The Problem
The current UCP website’s outdated information, poor usability, and dense text layout prevents community members from engaging with the organization’s mission, recognizing its impact, and taking action.
Our Solution
To address these issues, we designed a modern, visually engaging front-facing website to highlight community projects and results, provide an up-to-date event calendar, and streamline donation and engagement pathways.
The Problem
The current UCP website’s outdated information, poor usability, and dense text layout prevents community members from engaging with the organization’s mission, recognizing its impact, and taking action.
Our Solution
To address these issues, we designed a modern, visually engaging front-facing website to highlight community projects and results, provide an up-to-date event calendar, and streamline donation and engagement pathways.
The Problem
The current UCP website’s outdated information, poor usability, and dense text layout prevents community members from engaging with the organization’s mission, recognizing its impact, and taking action.
Our Solution
To address these issues, we designed a modern, visually engaging front-facing website to highlight community projects and results, provide an up-to-date event calendar, and streamline donation and engagement pathways.
02. user research
02. user research
02. user research
Usability Audit
We began with a usability audit of the previous website with six participants to identify pain points. Our key findings include:
No clear call to action for donations, signing up for newsletters, or other forms of engagement.
Overwhelming text blocks, which hurt readability.
Overall visually disengaging design with limited interactivity.
Competitive Analysis
After further communicating with stakeholders about their needs, they provided a list of NPO websites with similar missions that matched their vision. I explored and analyzed each to identify features to bring into our design, including:
Interactive map showcasing past and current projects.
Clear event and volunteer CTAs.
Prominent donation and impact metrics.
Usability Audit
We began with a usability audit of the previous website with six participants to identify pain points. Our key findings include:
No clear call to action for donations, signing up for newsletters, or other forms of engagement.
Overwhelming text blocks, which hurt readability.
Overall visually disengaging design with limited interactivity.
Competitive Analysis
After further communicating with stakeholders about their needs, they provided a list of NPO websites with similar missions that matched their vision. I explored and analyzed each to identify features to bring into our design, including:
Interactive map showcasing past and current projects.
Clear event and volunteer CTAs.
Prominent donation and impact metrics.
Usability Audit
We began with a usability audit of the previous website with six participants to identify pain points. Our key findings include:
No clear call to action for donations, signing up for newsletters, or other forms of engagement.
Overwhelming text blocks, which hurt readability.
Overall visually disengaging design with limited interactivity.
Competitive Analysis
After further communicating with stakeholders about their needs, they provided a list of NPO websites with similar missions that matched their vision. I explored and analyzed each to identify features to bring into our design, including:
Interactive map showcasing past and current projects.
Clear event and volunteer CTAs.
Prominent donation and impact metrics.
Usability Audit
We began with a usability audit of the previous website with six participants to identify pain points. Our key findings include:
No clear call to action for donations, signing up for newsletters, or other forms of engagement.
Overwhelming text blocks, which hurt readability.
Overall visually disengaging design with limited interactivity.
Competitive Analysis
After further communicating with stakeholders about their needs, they provided a list of NPO websites with similar missions that matched their vision. I explored and analyzed each to identify features to bring into our design, including:
Interactive map showcasing past and current projects.
Clear event and volunteer CTAs.
Prominent donation and impact metrics.
Stakeholder Meetings
I scheduled and led weekly meetings with UCP stakeholders to align on priorities and gather feedback throughout the process.
Stakeholder Meetings
I scheduled and led weekly meetings with UCP stakeholders to align on priorities and gather feedback throughout the process.
Stakeholder Meetings
I scheduled and led weekly meetings with UCP stakeholders to align on priorities and gather feedback throughout the process.
Stakeholder Meetings
I scheduled and led weekly meetings with UCP stakeholders to align on priorities and gather feedback throughout the process.
03. ideating the product
03. ideating the product
03. ideating the product
style guide
To maintain consistency between designs, I created a style guide using stakeholder branding. Typography and color choices were made to communicate a warm, bold, and accessible tone. WCAG accessibility guidelines were referenced to ensure designs are accessible to all potential users.
style guide
To maintain consistency between designs, I created a style guide using stakeholder branding. Typography and color choices were made to communicate a warm, bold, and accessible tone. WCAG accessibility guidelines were referenced to ensure designs are accessible to all potential users.
style guide
To maintain consistency between designs, I created a style guide using stakeholder branding. Typography and color choices were made to communicate a warm, bold, and accessible tone. WCAG accessibility guidelines were referenced to ensure designs are accessible to all potential users.
style guide
To maintain consistency between designs, I created a style guide using stakeholder branding. Typography and color choices were made to communicate a warm, bold, and accessible tone. WCAG accessibility guidelines were referenced to ensure designs are accessible to all potential users.
concept generation
Pencil sketches, Figma, and Canva were used to generate key concepts that each served the website with specific purposes. As shown below, the puzzle piece concept was designed to demonstrate the intersectionality of the NPO’s focus areas, and the interactive map was created to demonstrate past and present impact. Our concepts were presented to stakeholders, and iterations were made based on feedback.
concept generation
Pencil sketches, Figma, and Canva were used to generate key concepts that each served the website with specific purposes. As shown below, the puzzle piece concept was designed to demonstrate the intersectionality of the NPO’s focus areas, and the interactive map was created to demonstrate past and present impact. Our concepts were presented to stakeholders, and iterations were made based on feedback.
concept generation
Pencil sketches, Figma, and Canva were used to generate key concepts that each served the website with specific purposes. As shown below, the puzzle piece concept was designed to demonstrate the intersectionality of the NPO’s focus areas, and the interactive map was created to demonstrate past and present impact. Our concepts were presented to stakeholders, and iterations were made based on feedback.
concept generation
Pencil sketches, Figma, and Canva were used to generate key concepts that each served the website with specific purposes. As shown below, the puzzle piece concept was designed to demonstrate the intersectionality of the NPO’s focus areas, and the interactive map was created to demonstrate past and present impact. Our concepts were presented to stakeholders, and iterations were made based on feedback.
low-fidelity designs
We used Figma to design low-fidelity designs to explore how concepts fit together and which layouts worked best to communicate information architecture. These went through several iterations.
low-fidelity designs
We used Figma to design low-fidelity designs to explore how concepts fit together and which layouts worked best to communicate information architecture. These went through several iterations.
low-fidelity designs
We used Figma to design low-fidelity designs to explore how concepts fit together and which layouts worked best to communicate information architecture. These went through several iterations.
low-fidelity designs
We used Figma to design low-fidelity designs to explore how concepts fit together and which layouts worked best to communicate information architecture. These went through several iterations.
secondary User interviews
I communicated our team’s need for secondary user interviews and organized meetings with representatives from the UCP community, agency (CalTrans), and UCP administrators. Our designs at this stage were presented to each interviewee. Their suggestions were taken into account to:
Increase emphasis on multi-cultural aspects which should speak to all ethnic populations in the Southeastern San Diego area.
Increase ease of access to signing up for events on the Event Calendar.
secondary User interviews
I communicated our team’s need for secondary user interviews and organized meetings with representatives from the UCP community, agency (CalTrans), and UCP administrators. Our designs at this stage were presented to each interviewee. Their suggestions were taken into account to:
Increase emphasis on multi-cultural aspects which should speak to all ethnic populations in the Southeastern San Diego area.
Increase ease of access to signing up for events on the Event Calendar.
secondary User interviews
I communicated our team’s need for secondary user interviews and organized meetings with representatives from the UCP community, agency (CalTrans), and UCP administrators. Our designs at this stage were presented to each interviewee. Their suggestions were taken into account to:
Increase emphasis on multi-cultural aspects which should speak to all ethnic populations in the Southeastern San Diego area.
Increase ease of access to signing up for events on the Event Calendar.
secondary User interviews
I communicated our team’s need for secondary user interviews and organized meetings with representatives from the UCP community, agency (CalTrans), and UCP administrators. Our designs at this stage were presented to each interviewee. Their suggestions were taken into account to:
Increase emphasis on multi-cultural aspects which should speak to all ethnic populations in the Southeastern San Diego area.
Increase ease of access to signing up for events on the Event Calendar.
03. building the deliverable
03. building the deliverable
04. building the deliverable
squarespace implementation
After user testing and iterating based on feedback, we began implementing designs in Squarespace. More complex features were custom-coded, while I focused on layout, styling, and page structure as a designer.
final deliverables
At the end of the ten week period, we completed the Squarespace implementation and handed off the responsive website to the NPO. We also included a Content Management Manual that detailed how to edit photos or text on the Squarespace site and how to work our coding implementations.
squarespace implementation
After user testing and iterating based on feedback, we began implementing designs in Squarespace. More complex features were custom-coded, while I focused on layout, styling, and page structure as a designer.
our deliverables
At the end of the ten week period, we completed the Squarespace implementation and handed off the responsive website to the NPO. We also included a Content Management Manual that detailed how to edit photos or text on the Squarespace site and how to work our coding implementations.
squarespace implementation
After user testing and iterating based on feedback, we began implementing designs in Squarespace. More complex features were custom-coded, while I focused on layout, styling, and page structure as a designer.
our deliverables
At the end of the ten week period, we completed the Squarespace implementation and handed off the responsive website to the NPO. We also included a Content Management Manual that detailed how to edit photos or text on the Squarespace site and how to work our coding implementations.
squarespace implementation
After user testing and iterating based on feedback, we began implementing designs in Squarespace. More complex features were custom-coded, while I focused on layout, styling, and page structure as a designer.
final deliverables
At the end of the ten week period, we completed the Squarespace implementation and handed off the responsive website to the NPO. We also included a Content Management Manual that detailed how to edit photos or text on the Squarespace site and how to work our coding implementations.
04. final thoughts
04. final thoughts
05. final thoughts
key outcomes
Our final product aims to help the organization expand its impact and encourage engagement with the community. This was achieved by keeping the following aspects in mind while designing:
Usability and Navigation: Enhanced usability and navigation so visitors could find information quickly and intuitively, greatly improving overall experience.
Emphasize Impact: Showcased UCP’s projects and impact more prominently through our interactive map.
Fostering Engagement: Added features such as an interactive calendar of events and volunteer opportunities, which strengthens connections with users.
Content Management Manual: Empowers UCP staff to keep the site current without requiring ongoing technical support, ensuring its long-term sustainability and relevance.
next steps and impact
The site has been handed off to UCP for content and photo updates, and is ready for public launch following stakeholder review.
reflections
Working on this project gave me a deeper appreciation for the power of design in supporting meaningful, community-driven work. It was both humbling and rewarding to collaborate with a local nonprofit and help bring their mission to life online.
As the Communications Lead, I learned a lot about how to effectively relay information between stakeholders and my team. I often took initiative to ensure consistent communication, which helped us stay aligned throughout the design process. I also grew in my ability to both contribute my design vision and collaborate openly — because our team had multiple designers, it was important to both share my own vision and stay open to other ideas. We were successful in aligning our designs to create a consistent deliverable in the end, which couldn’t be done without our willingness to listen to each other and consider fresh perspectives.
One of the biggest challenges we faced was the tight 10-week timeline. I quickly discovered how crucial it is to plan ahead and enforce realistic internal deadlines. Another challenge was the delay in receiving finalized content and imagery from the organization. To address this, we created flexible layouts using placeholder content, and provided a manual to address any technical issues that might arise. Looking back, I think we would have benefited from additional rounds of testing using the final prototypes and further reiteration, if given more time.
This experience taught me how to balance creativity, collaboration, and structure—skills I’ll bring into future design projects.
key outcomes
Our final product aims to help the organization expand its impact and encourage engagement with the community. This was achieved by keeping the following aspects in mind while designing:
Usability and Navigation: Enhanced usability and navigation so visitors could find information quickly and intuitively, greatly improving overall experience.
Emphasize Impact: Showcased UCP’s projects and impact more prominently through our interactive map.
Fostering Engagement: Added features such as an interactive calendar of events and volunteer opportunities, which strengthens connections with users.
Content Management Manual: Empowers UCP staff to keep the site current without requiring ongoing technical support, ensuring its long-term sustainability and relevance.
next steps and impact
The site has been handed off to UCP for content and photo updates, and is ready for public launch following stakeholder review.
reflections
Working on this project gave me a deeper appreciation for the power of design in supporting meaningful, community-driven work. It was both humbling and rewarding to collaborate with a local nonprofit and help bring their mission to life online.
As the Communications Lead, I learned a lot about how to effectively relay information between stakeholders and my team. I often took initiative to ensure consistent communication, which helped us stay aligned throughout the design process. I also grew in my ability to both contribute my design vision and collaborate openly — because our team had multiple designers, it was important to both share my own vision and stay open to other ideas. We were successful in aligning our designs to create a consistent deliverable in the end, which couldn’t be done without our willingness to listen to each other and consider fresh perspectives.
One of the biggest challenges we faced was the tight 10-week timeline. I quickly discovered how crucial it is to plan ahead and enforce realistic internal deadlines. Another challenge was the delay in receiving finalized content and imagery from the organization. To address this, we created flexible layouts using placeholder content, and provided a manual to address any technical issues that might arise. Looking back, I think we would have benefited from additional rounds of testing using the final prototypes and further reiteration, if given more time.
This experience taught me how to balance creativity, collaboration, and structure—skills I’ll bring into future design projects.
key outcomes
Our final product aims to help the organization expand its impact and encourage engagement with the community. This was achieved by keeping the following aspects in mind while designing:
Usability and Navigation: Enhanced usability and navigation so visitors could find information quickly and intuitively, greatly improving overall experience.
Emphasize Impact: Showcased UCP’s projects and impact more prominently through our interactive map.
Fostering Engagement: Added features such as an interactive calendar of events and volunteer opportunities, which strengthens connections with users.
Content Management Manual: Empowers UCP staff to keep the site current without requiring ongoing technical support, ensuring its long-term sustainability and relevance.
next steps and impact
The site has been handed off to UCP for content and photo updates, and is ready for public launch following stakeholder review.
reflections
Working on this project gave me a deeper appreciation for the power of design in supporting meaningful, community-driven work. It was both humbling and rewarding to collaborate with a local nonprofit and help bring their mission to life online.
As the Communications Lead, I learned a lot about how to effectively relay information between stakeholders and my team. I often took initiative to ensure consistent communication, which helped us stay aligned throughout the design process. I also grew in my ability to both contribute my design vision and collaborate openly — because our team had multiple designers, it was important to both share my own vision and stay open to other ideas. We were successful in aligning our designs to create a consistent deliverable in the end, which couldn’t be done without our willingness to listen to each other and consider fresh perspectives.
One of the biggest challenges we faced was the tight 10-week timeline. I quickly discovered how crucial it is to plan ahead and enforce realistic internal deadlines. Another challenge was the delay in receiving finalized content and imagery from the organization. To address this, we created flexible layouts using placeholder content, and provided a manual to address any technical issues that might arise. Looking back, I think we would have benefited from additional rounds of testing using the final prototypes and further reiteration, if given more time.
This experience taught me how to balance creativity, collaboration, and structure—skills I’ll bring into future design projects.
key outcomes
Our final product aims to help the organization expand its impact and encourage engagement with the community. This was achieved by keeping the following aspects in mind while designing:
Usability and Navigation: Enhanced usability and navigation so visitors could find information quickly and intuitively, greatly improving overall experience.
Emphasize Impact: Showcased UCP’s projects and impact more prominently through our interactive map.
Fostering Engagement: Added features such as an interactive calendar of events and volunteer opportunities, which strengthens connections with users.
Content Management Manual: Empowers UCP staff to keep the site current without requiring ongoing technical support, ensuring its long-term sustainability and relevance.
next steps and impact
The site has been handed off to UCP for content and photo updates, and is ready for public launch following stakeholder review.
reflections
Working on this project gave me a deeper appreciation for the power of design in supporting meaningful, community-driven work. It was both humbling and rewarding to collaborate with a local nonprofit and help bring their mission to life online.
As the Communications Lead, I learned a lot about how to effectively relay information between stakeholders and my team. I often took initiative to ensure consistent communication, which helped us stay aligned throughout the design process. I also grew in my ability to both contribute my design vision and collaborate openly — because our team had multiple designers, it was important to both share my own vision and stay open to other ideas. We were successful in aligning our designs to create a consistent deliverable in the end, which couldn’t be done without our willingness to listen to each other and consider fresh perspectives.
One of the biggest challenges we faced was the tight 10-week timeline. I quickly discovered how crucial it is to plan ahead and enforce realistic internal deadlines. Another challenge was the delay in receiving finalized content and imagery from the organization. To address this, we created flexible layouts using placeholder content, and provided a manual to address any technical issues that might arise. Looking back, I think we would have benefited from additional rounds of testing using the final prototypes and further reiteration, if given more time.
This experience taught me how to balance creativity, collaboration, and structure—skills I’ll bring into future design projects.
the team!
the team!
Alice Guo
Rachel Anton
Uchenna Emerueh
Brandi Hoxworth
Alice Guo
Rachel Anton
Uchenna Emerueh
Brandi Hoxworth
Alice Guo
Rachel Anton
Uchenna Emerueh
Brandi Hoxworth
Jordan Figone
Justin Dang
Jaythen Peralta
Seth Chng
Alice Guo
Rachel Anton
Uchenna Emerueh
Brandi Hoxworth
the team
the team
Jordan Figone
Justin Dang
Jaythen Peralta
Seth Chng
Jordan Figone
Justin Dang
Jaythen Peralta
Seth Chng
Jordan Figone
Justin Dang
Jaythen Peralta
Seth Chng
the team
