Case Study: Coalición Fortaleza
Non-profit Website Redesign
Project Overview
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.
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.
Tools Used
Project Duration
3 week sprint (May 16th - June 6th)
My Role
• Interviews
• Competitor Analysis
• Affinity Map
• Feature Prioritization
• User Flow
• Lo/Hi-Fi Prototypes
• Usability Testing
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.
Design Process
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.
"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
Participant Quotes
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.
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'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.
User Persona
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
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
Ideate
Competitor Analysis
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.
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.
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.
2
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.
Site Map
A site map for the redesign was created to provide 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.
Prototype & Testing
Lo-Fi Prototypes
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.
Hi-Fi Prototypes
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.
Future Iterations