Case Study: Coalición Fortaleza
Non-profit Website Redesign
Non-profit Website Redesign
Project Overview
The Problem
The Problem
The Problem
Coalición Fortaleza’s website doesn’t display their actionable items efficiently, has too many walls of text, and doesn’t have an obvious place to showcase upcoming events.
Coalición Fortaleza’s website doesn’t display their actionable items efficiently, has too many walls of text, and doesn’t have an obvious place to showcase upcoming events.
Coalición Fortaleza’s website doesn’t display their actionable items efficiently, has too many walls of text, and doesn’t have an obvious place to showcase upcoming events.
The Solution
The Solution
The Solution
Redesign the organization's website to clearly highlight the work that they are doing, in order to increase donations and volunteer support. This includes information hierarchy and visibility of calls to action.
Redesign the organization's website to clearly highlight the work that they are doing, in order to increase donations and volunteer support. This includes information hierarchy and visibility of calls to action.
Redesign the organization's website to clearly highlight the work that they are doing, in order to increase donations and volunteer support. This includes information hierarchy and visibility of calls to action.
Tools Used
Tools Used
Tools Used
Project Duration
Project Duration
Project Duration
3 week sprint (May 16th - June 6th)
3 week sprint (May 16th - June 6th)
3 week sprint (May 16th - June 6th)
My Role
My Role
My Role
• Interviews
• Competitor Analysis
• Affinity Map
• Feature Prioritization
• User Flow
• Lo/Hi-Fi Prototypes
• Usability Testing
• Interviews
• Competitor Analysis
• Affinity Map
• Feature Prioritization
• User Flow
• Lo/Hi-Fi Prototypes
• Usability Testing
• Interviews
• Competitor Analysis
• Affinity Map
• Feature Prioritization
• User Flow
• Lo/Hi-Fi Prototypes
• Usability Testing
About the Organization
About the Organization
About the Organization
Coalición Fortaleza is a non-profit built in the wake of the Almeda fires. They provide support resources for Latino/a/x families, in hopes of fostering community growth for those displaced by the fires. Their main actionable item is providing resident owned communities (ROCs) for those displaced by the fires.
Coalición Fortaleza is a non-profit built in the wake of the Almeda fires. They provide support resources for Latino/a/x families, in hopes of fostering community growth for those displaced by the fires. Their main actionable item is providing resident owned communities (ROCs) for those displaced by the fires.
Coalición Fortaleza is a non-profit built in the wake of the Almeda fires. They provide support resources for Latino/a/x families, in hopes of fostering community growth for those displaced by the fires. Their main actionable item is providing resident owned communities (ROCs) for those displaced by the fires.
Design Process
Empathize
Define
Ideate
Prototype
Testing
Empathize
Define
Ideate
Prototype
Testing
Empathize
Define
Ideate
Prototype
Testing
Empathize
Stakeholder Interview
We sat down with Erica Ledesma, Executive Director of Coalición Fortaleza, to discuss the purpose of the non-profit and the identity of the website.
We sat down with Erica Ledesma, Executive Director of Coalición Fortaleza, to discuss the purpose of the non-profit and the identity of the website.
We sat down with Erica Ledesma, Executive Director of Coalición Fortaleza, to discuss the purpose of the non-profit and the identity of the website.
"The main functions of the website are to engage in fundraising, storytelling, and provide resources for those who need them."
"We want to appeal to people who can donate as well as people who need resources."
"We want to appeal to people who can donate as well as people who need resources."
"The main functions of the website are to engage in fundraising, storytelling, and provide resources for those who need them."
"The main functions of the website are to engage in fundraising, storytelling, and provide resources for those who need them."
"We want to appeal to people who can donate as well as people who need resources."
User Interviews
We continued the research by conducting three qualitative, semi-structured interviews, on what users thought of the website. Participants were given time to explore the existing site freely, then answered 10 questions about their first impressions.
We continued the research by conducting interviews on what users thought of the website. Participants were given time to explore the existing site freely, then answered 10 questions about their first impressions.
We continued the research by conducting interviews on what users thought of the website. Participants were given time to explore the existing site freely, then answered 10 questions about their first impressions.
3 Qualitative
3 Qualitative
Semi-structured interviews
Semi-structured interviews
Participant Quotes
Participant Quotes
Participant Quotes
“The imagery is beautiful, but I connect more with seeing real people.”
“The imagery is beautiful, but I connect more with seeing real people.”
"The mission statement was unclear, I had to re-read and re-read to feel like I understood."
"The mission statement was unclear, I had to re-read and re-read to feel like I understood."
“The home page is full of text walls. It takes too much time to gather the vision. The people involved and the art should come first.”
“The home page is full of text walls. It takes too much time to gather the vision. The people involved and the art should come first.”
“The imagery is beautiful, but I connect more with seeing real people.”
Define
User Insight
We believe that structuring the website to highlight how the coalition is changing people's lives, and showing how they facilitate resources and aid, will build trust and drive engagement.
We believe that structuring the website to highlight how the coalition is changing people's lives, and showing how they facilitate resources and aid, will build trust and drive engagement.
We believe that structuring the website to highlight how the coalition is changing people's lives, and showing how they facilitate resources and aid, will build trust and drive engagement.
By creating a clear vision for the cause through our design, the website will convey the organization's mission more effectively.
By creating a clear vision for the cause through our design, the website will convey the organization's mission more effectively.
By creating a clear vision for the cause through our design, the website will convey the organization's mission more effectively.
★ There is great opportunity to show outreach to the community from the coalition.
★ There is great opportunity to show outreach to the community from the coalition.
★ There is great opportunity to show outreach to the community from the coalition.
★ There's a theme of users wanting to know where their donations are going.
★ There's a theme of users wanting to know where their donations are going.
★ There's a theme of users wanting to know where their donations are going.
★ Want to know what resources are readily available to those being given assistance.
★ Want to know what resources are readily available to those being given assistance.
★ Want to know what resources are readily available to those being given assistance.
User Persona
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
This user persona is a culmination of personality traits, goals, pain points, and actions of people we interviewed.
Yahaira Padilla
Age: 34
Occupation: Restaurant Owner
Location: Ashland, OR
Education: B.A Poli-sci
Pain Points
Has friends and family who lost their home in the Almeda fires
Does not feel represented in the political decision making
Interests
Community activism
Finding new opportunities to help disenfranchised groups
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Yahaira Padilla
Age: 34
Occupation: Restaurant Owner
Location: Ashland, OR
Education: B.A Poli-sci
Pain Points
Has friends and family who lost their home in the Almeda fires
Does not feel represented in the political decision making
Interests
Community activism
Finding new opportunities to help disenfranchised groups
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Yahaira Padilla
Age: 34
Occupation: Restaurant Owner
Location: Ashland, OR
Education: B.A Poli-sci
Pain Points
Has friends and family who lost their home in the Almeda fires
Does not feel represented in the political decision making
Interests
Community activism
Finding new opportunities to help disenfranchised groups
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Goals / Needs
Create stability for her friends and other families in need
See the community recover
Recovery efforts lead by people of the Latinx community
Affinity Diagram
We created an affinity diagram to organize the information gained through the interviews. We grouped the data to better understand the common issues users experience on the current website. Link to full affinity diagram.
We created an affinity diagram to organize the information gained through the interviews. We grouped the data to better understand the common issues users experience on the current website. Link to full affinity diagram.
Design
Purpose
Feelings / Positives
Questions / Suggestions
Design
Purpose
Feelings / Positives
Questions / Suggestions
Design
Purpose
Feelings / Positives
Questions / Suggestions
Ideate
Competitor Analysis
We analyzed four different websites to identify impactful solutions for our website redesign.
We analyzed four different websites to identify impactful solutions for our website redesign.
We analyzed four different websites to identify impactful solutions for our website redesign.
Donations are made easy by offering preset amounts and opportunities to make “passive” donations.
Donations are made easy by offering preset amounts and opportunities to make “passive” donations.
Donations are made easy by offering preset amounts and opportunities to make “passive” donations.
Using relevant imagery reinforces community involvement and shows proof of action.
Using relevant imagery reinforces community involvement and shows proof of action.
Using relevant imagery reinforces community involvement and shows proof of action.
Clear and simple messaging allows the user to quickly understand the purpose and identity of the organization.
Clear and simple messaging allows the user to quickly understand the purpose and identity of the organization.
Clear and simple messaging allows the user to quickly understand the purpose and identity of the organization.
Reducing text and requiring user action to reach certain information will increase engagement.
Reducing text and requiring user action to reach certain information will increase engagement.
Reducing text and requiring user action to reach certain information will increase engagement.
Feature Prioritization
1
Based on what participants said during the interviews, along with the information gathered during the competitor analyses, we conducted an “I Like, I Wish, What If” exercise.
Based on what participants said during the interviews, along with the information gathered during the competitor analyses, we conducted an “I Like, I Wish, What If” exercise.
Based on what participants said during the interviews, along with the information gathered during the competitor analyses, we conducted an “I Like, I Wish, What If” exercise.
2
Each member of our team placed icons on the stickies to indicate what features they wanted to implement into the redesign.
Each member of our team placed icons on the stickies to indicate what features they wanted to implement into the redesign.
Each member of our team placed icons on the stickies to indicate what features they wanted to implement into the redesign.
3
We placed the stickies with the most icons on them into the feature prioritization matrix.
We placed the stickies with the most icons on them into the feature prioritization matrix.
We placed the stickies with the most icons on them into the feature prioritization matrix.
Site Map
A site map for the redesign was created to provide a framework for making sketches and the lo-fi prototype.
A site map for the redesign was created to provide a framework for making sketches and the lo-fi prototype.
A site map for the redesign was created as a framework for making sketches and the lo-fi prototype.
User Flow
From the framework of the site map, a basic user flow was created for someone looking to donate to Coalición Fortaleza.
From the framework of the site map, a basic user flow was created for someone looking to donate to Coalición Fortaleza.
From the framework of the site map, a basic user flow was created for someone looking to donate to Coalición Fortaleza.
Prototype & Testing
Prototype & Testing
Lo-Fi Prototypes
Lo-Fi Prototype Images
Click an image to see a larger and higher resolution version.
Click an image to see a larger and higher resolution version.
Mobile Version
Mobile Version
Home
Home
What We Do
What We Do
Our Team
Our Team
Desktop Version
Mobile Version
Desktop Version
Desktop Version
Home
Home
What We Do
What We Do
Our Team
Our Team
Usability Tests
We created 3 tasks to test users on if our redesign was easy to navigate, impactful, and engaging. Plus signs indicate positives, and minus signs are for areas for improvement.
We created 3 tasks to test users on if our redesign was easy to navigate, impactful, and engaging. Plus signs indicate positives, and minus signs are for areas for improvement.
We created 3 tasks to test users on if our redesign was easy to navigate, impactful, and engaging. Plus signs indicate positives, and minus signs are for areas for improvement.
1
Find out what Coalición Fortaleza does.
Task
Task
Results
Results
1
Find out what Coalición Fortaleza does.
Find out what Coalición Fortaleza does.
Correctly read paragraph on home page or went to 'What We Do' page.
Correctly read paragraph on home page or went to 'What We Do' page.
Lack of headers on paragraphs/sections make it time consuming to scan for the info you want.
Lack of headers on paragraphs/sections make it time consuming to scan for the info you want.
2
Send a question to Coalición Fortaleza.
Send a question to Coalición Fortaleza.
100% of participants went straight to 'Contact Us' page and found the message widget.
100% of participants went straight to 'Contact Us' page and found the message widget.
Not intuitive whether the message successfully sent or not.
Not intuitive whether the message successfully sent or not.
Hard to read text on Submit button.
Hard to read text on Submit button.
3
Find an upcoming event.
Find an upcoming event.
Once the events slider was found, participants liked the structure of the cards and information provided on them.
Once the events slider was found, participants liked the structure of the cards and information provided on them.
75% of participants went to 'Get Involved' page first.
75% of participants went to 'Get Involved' page first.
Section headers and images may help direct attention.
Section headers and images may help direct attention.
3
Find an upcoming event.
2
Send a question to Coalición Fortaleza.
Hi-Fi Prototypes
Hi-Fi Prototype
After testing, we made one more iteration on the prototypes, implementing the feedback gained.
After testing, we made one more iteration on the prototypes, implementing the feedback gained.
After testing, we made one more iteration on the prototypes, implementing the feedback gained.
This is a link to the fully-interactable desktop version of the Figma prototype, feel free to click around! For the mobile version, use the prototype in your web browser and select the 'Mobile' flow, or reduce your window size.
This is a link to the fully-interactable mobile version of the Figma prototype, feel free to tap around! For the desktop version, use a larger device.
This is a link to the fully-interactable desktop version of the Figma prototype, feel free to explore! For the mobile version, use the prototype in your web browser and select the 'Mobile' flow, or reduce your window size.
Conclusion
Conclusion
Conclusion
Future Iterations
The requirements for the project were to create only three pages, therefore the Contact Us, Get Involved, and Donation pages were not fully completed.
Future iterations of the site can expand on this groundwork.Many of the individuals affected are elderly and low-income migrant workers. English may not be their first language, so offering a translation increases the accessibility of the site.
A language toggle button could provide this accomdation.Talking to the Executive Director of the organization was invaluable for empathizing with those affected.
However, we didn’t interview people actively using the site for support, which would’ve taken this a step further.
The requirements for the project were to create only three pages, therefore the Contact Us, Get Involved, and Donation pages were not fully completed.
Future iterations of the site can expand on this groundwork.
Many of the individuals affected are elderly and low-income migrant workers. English may not be their first language, so offering a translation increases the accessibility of the site.
A language toggle button could provide this accomdation.
Talking to the Executive Director of the organization was invaluable for empathizing with those affected.
However, we didn’t interview people actively using the site for support, which would’ve taken this a step further.