Detroit Non-Profit Website Redesign
Detroit Non-Profit Website
Redesign
Detroit Non-Profit Website
Redesign
UI/UX Design | User Research
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a senior capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
A client-based project, working with a local non-profit to redesign and recreate their website; intending to, with the new website, increase donations, boost community engagement and involvement, and spread awareness about the organization.
Completed in collaboration with Detroit-based Non-profit, Friends of Parkside, as a capstone project.
Details
October 2024 - May 2025
TIMELINE
Figma, Squarespace, Qualtrics
TOOLS
Lead UI/UX Designer on a UX Team
ROLE
UI/UX Design | User Research
DISCIPLINES
Friends of Parkside (FOP), is a grassroots nonprofit organization founded in 1991 by residents of The Villages at Parkside, a public housing community in Detroit. FOP is dedicated to uniting residents, supporting youth, and providing resources to improve community health and well-being.
FOP's website is outdated, difficult to navigate, and misrepresentative of FOP's current initiatives. Consequently, many key stakeholders struggle to find accurate information about programs, events, and initiatives, leading to decreased overall engagement. These issues limit community involvement, reduce donations, and hinder FOP’s ability to collaborate effectively with other organizations.
Challenge
Original Website
To begin our project, we first evaluated Friends of Parkside's current website. We noticed that it was lacking in key information, not responsive, and had no pictures of the organization. Furthermore, it didn't provide users with any clear path on how to get involved with the organization. Overall, it was missing several key components of successful non-profit websites.
User Research
One of the key questions my team and I had was: what population was the website most useful for? We were dealing with several different user groups, from FOP staff members, to Parkside residents, to volunteers, to donors, to partners, to other FOP event participants. We wanted to know which populations would actually use the website, and which populations would most benefit from the website.
To find the answer to our question and discover other key UX requirements for the redesign, we sent out a survey and conducted in-depth user interviews with various user groups. We proceeded to code our interviews and create an affinity map. From that, we discerned what our key ux requirements and personas were.
Our number 1 UX requirement was that the redesign must be built on a website builder platform. This is because FOP would likely not be able to hire a developer, so it was important that we create a website for them that was as easy to implement as possible.
Personas
After concluding our user interviews, my team and I created personas to represent our findings. Our personas reflect four different key user groups: FOP Staff, Parkside Residents/Members, Volunteers, and Attendees who live nearby but not in Parkside.
During our interviews, we found that the population who would benefit the most from the website are Nearby Attendees. These people don't live within the Parkside community but still participate in events. Due to the fact that they don't live within Parkside, Nearby Attendees face barriers to engagement and the website could minimize these barriers.
Information Architecture
The original website is very limited in terms of how many pages it has. Since we would be adding more, we thought it very important to discover how we could improve the information architecture. My team and I conducted card sorts with random participants to do this.
From our card sorts, we created a sitemap to represent the new websites information architecture. We then refined the sitemap based on what would actually be on the website.
Design Approach
Transitioning out of our research phase, we began our design process. We started by creating sketches of each of the pages then creating lo-fi wireframes in Figma based off those sketches. We then presented our wireframes to our client and received feedback. After refining our designs based on feedback, we began work on a squarespace website and rapidly iterated from there.
Final Prototype
We completed a 15+ page Squarespace website and handed that off to Friends of Parkside. We wanted to make implementation as easy as possible for them and by using a website builder like Squarespace and doing all of the work of setting up the site, we believe we set them up for success.
I'm delighted to say that FOP is using the redesigned website we created. View it Here!
Learnings
Over the course of this project, I learned extensively about how to manage client relationships. Some of my key learnings and takeaways:
Adaptability. As a UX Designer my first instinct is always to use Figma. However, my group and I wanted to ensure that we were able to make a positive impact for Friends of Parkside. If we were just handed them off a Figma file, they'd probably like it but there would be no clear path to implementation. I'd never used Squarespace before but approached it with the confidence that I could deliver an effective solution.
Navigating User Groups. One of the hardest aspects of our research was discovering which user group would most likely benefit from the website the most. Our client pointed to one group that they thought would benefit immensely, but through our research we found that this group had little to no barriers to engagement, as opposed to other groups. I would say that our most important insight was our personas.
Communication. I found that open and honest communication between us and our client led to great progress. My team and I enjoyed working with our client and greatly appreciated how they were always so open to our ideas.
Original Website
To begin our project, we first evaluated Friends of Parkside's current website. We noticed that it was lacking in key information, not responsive, and had no pictures of the organization. Furthermore, it didn't provide users with any clear path on how to get involved with the organization. Overall, it was missing several key components of successful non-profit websites.
User Research
One of the key questions my team and I had was: what population was the website most useful for? We were dealing with several different user groups, from FOP staff members, to Parkside residents, to volunteers, to donors, to partners, to other FOP event participants. We wanted to know which populations would actually use the website, and which populations would most benefit from the website.
To find the answer to our question and discover other key UX requirements for the redesign, we sent out a survey and conducted in-depth user interviews with various user groups. We proceeded to code our interviews and create an affinity map. From that, we discerned what our key ux requirements and personas were.
Our number 1 UX requirement was that the redesign must be built on a website builder platform. This is because FOP would likely not be able to hire a developer, so it was important that we create a website for them that was as easy to implement as possible.
Personas
After concluding our user interviews, my team and I created personas to represent our findings. Our personas reflect four different key user groups: FOP Staff, Parkside Residents/Members, Volunteers, and Attendees who live nearby but not in Parkside.
During our interviews, we found that the population who would benefit the most from the website are Nearby Attendees. These people don't live within the Parkside community but still participate in events. Due to the fact that they don't live within Parkside, Nearby Attendees face barriers to engagement and the website could minimize these barriers.
Information Architecture
The original website is very limited in terms of how many pages it has. Since we would be adding more, we thought it very important to discover how we could improve the information architecture. My team and I conducted card sorts with random participants to do this.
From our card sorts, we created a sitemap to represent the new websites information architecture. We then refined the sitemap based on what would actually be on the website.
Design Approach
Transitioning out of our research phase, we began our design process. We started by creating sketches of each of the pages then creating lo-fi wireframes in Figma based off those sketches. We then presented our wireframes to our client and received feedback. After refining our designs based on feedback, we began work on a squarespace website and rapidly iterated from there.
Final Prototype
We completed a 15+ page Squarespace website and handed that off to Friends of Parkside. We wanted to make implementation as easy as possible for them and by using a website builder like Squarespace and doing all of the work of setting up the site, we believe we set them up for success.
I'm delighted to say that FOP is using the redesigned website we created. View it Here!
Learnings
Over the course of this project, I learned extensively about how to manage client relationships. Some of my key learnings and takeaways:
Adaptability. As a UX Designer my first instinct is always to use Figma. However, my group and I wanted to ensure that we were able to make a positive impact for Friends of Parkside. If we were just handed them off a Figma file, they'd probably like it but there would be no clear path to implementation. I'd never used Squarespace before but approached it with the confidence that I could deliver an effective solution.
Navigating User Groups. One of the hardest aspects of our research was discovering which user group would most likely benefit from the website the most. Our client pointed to one group that they thought would benefit immensely, but through our research we found that this group had little to no barriers to engagement, as opposed to other groups. I would say that our most important insight was our personas.
Communication. I found that open and honest communication between us and our client led to great progress. My team and I enjoyed working with our client and greatly appreciated how they were always so open to our ideas.
Original Website
To begin our project, we first evaluated Friends of Parkside's current website. We noticed that it was lacking in key information, not responsive, and had no pictures of the organization. Furthermore, it didn't provide users with any clear path on how to get involved with the organization. Overall, it was missing several key components of successful non-profit websites.
User Research
One of the key questions my team and I had was: what population was the website most useful for? We were dealing with several different user groups, from FOP staff members, to Parkside residents, to volunteers, to donors, to partners, to other FOP event participants. We wanted to know which populations would actually use the website, and which populations would most benefit from the website.
To find the answer to our question and discover other key UX requirements for the redesign, we sent out a survey and conducted in-depth user interviews with various user groups. We proceeded to code our interviews and create an affinity map. From that, we discerned what our key ux requirements and personas were.
Our number 1 UX requirement was that the redesign must be built on a website builder platform. This is because FOP would likely not be able to hire a developer, so it was important that we create a website for them that was as easy to implement as possible.
Personas
After concluding our user interviews, my team and I created personas to represent our findings. Our personas reflect four different key user groups: FOP Staff, Parkside Residents/Members, Volunteers, and Attendees who live nearby but not in Parkside.
During our interviews, we found that the population who would benefit the most from the website are Nearby Attendees. These people don't live within the Parkside community but still participate in events. Due to the fact that they don't live within Parkside, Nearby Attendees face barriers to engagement and the website could minimize these barriers.
Information Architecture
The original website is very limited in terms of how many pages it has. Since we would be adding more, we thought it very important to discover how we could improve the information architecture. My team and I conducted card sorts with random participants to do this.
From our card sorts, we created a sitemap to represent the new websites information architecture. We then refined the sitemap based on what would actually be on the website.
Design Approach
Transitioning out of our research phase, we began our design process. We started by creating sketches of each of the pages then creating lo-fi wireframes in Figma based off those sketches. We then presented our wireframes to our client and received feedback. After refining our designs based on feedback, we began work on a squarespace website and rapidly iterated from there.
Final Prototype
We completed a 15+ page Squarespace website and handed that off to Friends of Parkside. We wanted to make implementation as easy as possible for them and by using a website builder like Squarespace and doing all of the work of setting up the site, we believe we set them up for success.
I'm delighted to say that FOP is using the redesigned website we created. View it Here!
Learnings and Takeaways
Over the course of this project, I learned extensively about how to manage client relationships. Some of my key learnings and takeaways:
Adaptability. As a UX Designer my first instinct is always to use Figma. However, my group and I wanted to ensure that we were able to make a positive impact for Friends of Parkside. If we were just handed them off a Figma file, they'd probably like it but there would be no clear path to implementation. I'd never used Squarespace before but approached it with the confidence that I could deliver an effective solution.
Navigating User Groups. One of the hardest aspects of our research was discovering which user group would most likely benefit from the website the most. Our client pointed to one group that they thought would benefit immensely, but through our research we found that this group had little to no barriers to engagement, as opposed to other groups. I would say that our most important insight was our personas.
Communication. I found that open and honest communication between us and our client led to great progress. My team and I enjoyed working with our client and greatly appreciated how they were always so open to our ideas.
Original Website
To begin our project, we first evaluated Friends of Parkside's current website. We noticed that it was lacking in key information, not responsive, and had no pictures of the organization. Furthermore, it didn't provide users with any clear path on how to get involved with the organization. Overall, it was missing several key components of successful non-profit websites.
User Research
One of the key questions my team and I had was: what population was the website most useful for? We were dealing with several different user groups, from FOP staff members, to Parkside residents, to volunteers, to donors, to partners, to other FOP event participants. We wanted to know which populations would actually use the website, and which populations would most benefit from the website.
To find the answer to our question and discover other key UX requirements for the redesign, we sent out a survey and conducted in-depth user interviews with various user groups. We proceeded to code our interviews and create an affinity map. From that, we discerned what our key ux requirements and personas were.
Our number 1 UX requirement was that the redesign must be built on a website builder platform. This is because FOP would likely not be able to hire a developer, so it was important that we create a website for them that was as easy to implement as possible.
Personas
After concluding our user interviews, my team and I created personas to represent our findings. Our personas reflect four different key user groups: FOP Staff, Parkside Residents/Members, Volunteers, and Attendees who live nearby but not in Parkside.
During our interviews, we found that the population who would benefit the most from the website are Nearby Attendees. These people don't live within the Parkside community but still participate in events. Due to the fact that they don't live within Parkside, Nearby Attendees face barriers to engagement and the website could minimize these barriers.
Information Architecture
The original website is very limited in terms of how many pages it has. Since we would be adding more, we thought it very important to discover how we could improve the information architecture. My team and I conducted card sorts with random participants to do this.
From our card sorts, we created a sitemap to represent the new websites information architecture. We then refined the sitemap based on what would actually be on the website.
Design Approach
Transitioning out of our research phase, we began our design process. We started by creating sketches of each of the pages then creating lo-fi wireframes in Figma based off those sketches. We then presented our wireframes to our client and received feedback. After refining our designs based on feedback, we began work on a squarespace website and rapidly iterated from there.
Final Prototype
We completed a 15+ page Squarespace website and handed that off to Friends of Parkside. We wanted to make implementation as easy as possible for them and by using a website builder like Squarespace and doing all of the work of setting up the site, we believe we set them up for success.
I'm delighted to say that FOP is using the redesigned website we created. View it Here!
Learnings and Takeaways
Over the course of this project, I learned extensively about how to manage client relationships. Some of my key learnings and takeaways:
Adaptability. As a UX Designer my first instinct is always to use Figma. However, my group and I wanted to ensure that we were able to make a positive impact for Friends of Parkside. If we were just handed them off a Figma file, they'd probably like it but there would be no clear path to implementation. I'd never used Squarespace before but approached it with the confidence that I could deliver an effective solution.
Navigating User Groups. One of the hardest aspects of our research was discovering which user group would most likely benefit from the website the most. Our client pointed to one group that they thought would benefit immensely, but through our research we found that this group had little to no barriers to engagement, as opposed to other groups. I would say that our most important insight was our personas.
Communication. I found that open and honest communication between us and our client led to great progress. My team and I enjoyed working with our client and greatly appreciated how they were always so open to our ideas.
Original Website
To begin our project, we first evaluated Friends of Parkside's current website. We noticed that it was lacking in key information, not responsive, and had no pictures of the organization. Furthermore, it didn't provide users with any clear path on how to get involved with the organization. Overall, it was missing several key components of successful non-profit websites.
User Research
One of the key questions my team and I had was: what population was the website most useful for? We were dealing with several different user groups, from FOP staff members, to Parkside residents, to volunteers, to donors, to partners, to other FOP event participants. We wanted to know which populations would actually use the website, and which populations would most benefit from the website.
To find the answer to our question and discover other key UX requirements for the redesign, we sent out a survey and conducted in-depth user interviews with various user groups. We proceeded to code our interviews and create an affinity map. From that, we discerned what our key ux requirements and personas were.
Our number 1 UX requirement was that the redesign must be built on a website builder platform. This is because FOP would likely not be able to hire a developer, so it was important that we create a website for them that was as easy to implement as possible.
Personas
After concluding our user interviews, my team and I created personas to represent our findings. Our personas reflect four different key user groups: FOP Staff, Parkside Residents/Members, Volunteers, and Attendees who live nearby but not in Parkside.
During our interviews, we found that the population who would benefit the most from the website are Nearby Attendees. These people don't live within the Parkside community but still participate in events. Due to the fact that they don't live within Parkside, Nearby Attendees face barriers to engagement and the website could minimize these barriers.
Information Architecture
The original website is very limited in terms of how many pages it has. Since we would be adding more, we thought it very important to discover how we could improve the information architecture. My team and I conducted card sorts with random participants to do this.
From our card sorts, we created a sitemap to represent the new websites information architecture. We then refined the sitemap based on what would actually be on the website.
Design Approach
Transitioning out of our research phase, we began our design process. We started by creating sketches of each of the pages then creating lo-fi wireframes in Figma based off those sketches. We then presented our wireframes to our client and received feedback. After refining our designs based on feedback, we began work on a squarespace website and rapidly iterated from there.
Final Prototype
We completed a 15+ page Squarespace website and handed that off to Friends of Parkside. We wanted to make implementation as easy as possible for them and by using a website builder like Squarespace and doing all of the work of setting up the site, we believe we set them up for success.
I'm delighted to say that FOP is using the redesigned website we created. View it Here!
Learnings and Takeaways
Over the course of this project, I learned extensively about how to manage client relationships. Some of my key learnings and takeaways:
Adaptability. As a UX Designer my first instinct is always to use Figma. However, my group and I wanted to ensure that we were able to make a positive impact for Friends of Parkside. If we were just handed them off a Figma file, they'd probably like it but there would be no clear path to implementation. I'd never used Squarespace before but approached it with the confidence that I could deliver an effective solution.
Navigating User Groups. One of the hardest aspects of our research was discovering which user group would most likely benefit from the website the most. Our client pointed to one group that they thought would benefit immensely, but through our research we found that this group had little to no barriers to engagement, as opposed to other groups. I would say that our most important insight was our personas.
Communication. I found that open and honest communication between us and our client led to great progress. My team and I enjoyed working with our client and greatly appreciated how they were always so open to our ideas.
Next Case Study: NOAA Website Redesign
Next Case Study: VyStar Credit Union UX Internship
Next Case Study: VyStar Credit
Union UX Internship
Next Case Study:
VyStar Credit
Union UX Internship
Next Case Study:
VyStar Credit
Union UX Internship
Next Case Study: VyStar Credit
Union UX Internship
Next Case Study: VyStar Credit Union UX
Internship
I'd Love to hear from you!
I'd Love to hear from you!