Coalicion Fortaleza
Responsive Website Redesign
PROJECT OVERVIEW
Team
3 UX Designers
Tools
Figma, InVision, Trello, Slack, Affinity Designer, Affinity Photo
Problem
The current website is disorganized and does not take the users preferences into account and is designed more like a landing page than a fully functioning website.
During this project we develop a responsive website that reflects the needs and direction of a non-profit organization of our choice.
Through a process of research and engagement with Coalicion Fortaleza we will understand its mission , its target user, and it’s goals as an organization.
The challenge will be to design a responsive website that accurately reflects the stakeholder and addresses their specific needs.
My Role
Team Lead, UX Researcher, Interaction Designer, Graphic Designer
Timeframe
4 Weeks
Solution
Engage with the stakeholder to identify the main purpose of their organization and conduct research which supports building a platform that will best serve their needs.
DESIGN PROCESS
Discover
Preliminary Research
Stakeholder Interview
User Survey
User Interviews
Affinity Diagram
Competitive Analysis
Define
User Persona
User Insights
Problem Statement
Ideate
Feature Prioritization
Style Guide
Site Map
Design
Wireframing
Prototyping
Testing
Final Design
DISCOVER
Preliminary Research
We began by doing some preliminary research online to gain a rough understanding of the organization. Coalicion Fortaleza was born from the struggle caused by 2020 the Alameda Fires. The fires scorched over 2,600 homes, resulting in a large displacement of Rogue Valley’s low-income, Latinx and Indigenous neighborhoods. The aftermath of this disaster revealed just how climate vulnerable, economically exploited and politically underrepresented these communities have been.
Coalicion Fortaleza is a non-profit dedicated to empower these communities to collectively shape their own destiny and solutions in the face of impending climate change.
“No decisions made about us, without us”
Stakeholder Interview
To gain important insight into how to approach the website design, we interviewed Erica Ledesma, Executive Director of Coalicion Fortaleza.
Erica represented a fierce passion for and her cause and effecting positive change in the community in which she was born and raised. She shared that the organization was fairly young and was in the midst of its first major project; to purchase Talent Mobile Estates and establish it to be the first-ever Resident Owned Community of Southern Oregon.
We learned that the website should raise awareness about the fires and the core issues impacting the historically marginalized communities of the Rogue Valley. It should serve as a library of resources and community events for these communities.
Importantly, It must appeal not only to the families and community it serves, but also inspire potential donors and volunteers to take action and participate.
Be an accessible library of resources for the Latinx and Indigenous communities of the Rogue Valley.
Raise awareness and share the organization’s impactful story in a legible way.
Inspire potential partners and volunteers to participate, take action, and donate.
User Survey
User Interviews
We created an affinity diagram to organize the information we gained through the interviews. We grouped the data to better understand the common issues users experience on the current website. We defined the categories needing the most attention by grouping supporting statements we heard mentioned frequently by our user group.
Erica Ledesma
Executive Director
The resulting data we collected suggests that the user is presented with a lot of text information but is ineffective in delivering precise clear messaging. The user can gather why an organization should exist around around the issue, but has difficulty deciphering what types of action Coalicion Fortaleza is taking to address it. In other words, “what exactly are they doing to help?”
We can also presume that the content does not inspires the user to financially participate in their cause, even though everyone felt the cause was noble.
Our team conducted 5 remote moderated user tests observing how each user interacts with the current website. We followed each test with interviews to gain insight about how users perceived their experience and what we can do to mold that to the stakeholders needs.
Support the mission of Coalicion Fortaleza in delivering an impactful message and bolstering community empowerment through resource acquisition and direct community support.
Objectives:
Learn how user want to navigate the website. Are they able to find what they need? Does the website make it easy to find what they want?
The Website should:
We began with a digital survey completed by 16 people to collect quantitative data regarding the effectiveness of the current site.
Goal:
Affinity Diagram
Learn about how the user absorbs information. Is the messaging effective and understandable?
Learn what type of content reflects organization impact. Does the user feel motivated to take action?
Competitive Analysis
Walls of text obscure the ability to quickly digest the intended message in its entirety.
How and what the organization is achieving is ineffectively represented.
The website operates like a landing page and lacks intuitive organization and navigation.
The current imagery is relevant, but users are more motivated when they see real people.
Alongside a detailed analysis of our own client’s website, we also explored other non-profits in a similar lane in order to get a few ideas of how they present themselves in the online space. Two organizations stood out amongst the crowd.
DEFINE
User Persona
We began the definition phase by establishing a user persona based on our all of the information collected during the discovery phase prior. Our team decided that we needed to focus on 2 main types of user. One for someone who seeks to engage with the resources as well as those who are looking to donate time or money to the cause. These are real community members, with real voices, and real lives.
User Insights
Donor insights
Yahaira wants to help and is willing to donate both time and money, but needs to be certain that the money is funding real relief.
Problem Statement
Patron insights
Jairo needs to begin rebuilding his life around his family and wants access to more resources. He needs to have clear direction in order to take sustainable action.
Currently, Coalicion Fortaleza’s website is a wall of text which is organized like a landing page, yet does not successfully convey its impact in the community. Users understand the issue at hand and feel it is a worthy cause requiring attention, but feel unmotivated to participate. How can we tell Coalicion Fortaleza’s story to inspires partnership while also maintaining it as a library of resources for the Latinx and indigenous communities of the Rogue Valley?
IDEATE
Oppurtunities
The site would be more have more impact if it showed images of their actions or future plans
By chunking the information into sections we can highlight a clearer message/mission statement for the user and bring the most important information to the forefront
Highlighting an impactful data section can clarify the importance of the organization i.e. funds donated, funds allocated, number of people impacted, projects completed, number of people assisted etc.
Feature Prioritization
Site Map
We approached the subject of navigation by chunking all related sections of the existing site. This involved its own series of information chunking. A fair deal of ideation was also required here as we needed to add missing and other necessary sections based on features we wanted to address. With all the potential pages and sections we did a Card Sorting exercise to group all the related components together. After a series of adding, and renaming, and organizing relevant sections, we were able to build the optimal site map.
With a solid grasp on the type of content we will be delivering, we began refining the style and feel of the website. This was yet another opportunity to deliver the types of emotions and feelings that Coalicion Fortaleza wants to be associated with.
Voice
Content should be delivered from the voice of the team that comprises Coalicion Fortalza; culturally-empowered women of color. The content should emote a feeling of resilience, strength, unity, cultural overstanding, and fierce love for the community they embody and support. The user should immediately understand “que somos juntos, we are in this together and we will persevere, recover, and thrive.
Logo Rework
As a team we performed an I like/What if/I wish exercise to explore what potential solutions we might employ to improve the websites functionality. We narrowed down the results using a voting system, then organized them on a matrix in order to identify the solutions which yielded the most impact given the complexity/difficulty of the task.
Style Guide
Typography
I redesigned the logo be more graphically clean and deliver a stronger message about what Coalicion Fortaleza is. The idea of climate change served as a connecting theme and through line in this process.
Graphic Patterns
I designed graphic patterns that could be used throughout the site by breaking apart different elements of the logo and repurposing them into various different symbols. These can be reconfigured as needed.
Color Pallette
Graphic Treatments
By creating graphic mockups I was able to demonstrate how all graphic elements will interact and relate. I considered color, their weighted value, type proportions, graphic spacing, and overall accessibility.
DESIGN
Wireframes
After sketching various potential designs, our team came together to build a rough wireframe of what type of content we would be presenting and how we might organize it to cultivate the best experience for our target user. We kept color and style as minimal as possible in order to keep the focus on content and organization.
Sketch
With the main page structure of our page built out we were able to easily apply visual aesthetics established in our style guide, and establish more intentional copy. This lead us to a Mid-fidelity and Hi-Fidelity Prototype.
Lo-fi Wireframes
Prototyping
Mid-fi Prototype
Hi-fi Prototype
Testing
We developed our mid-fidelity prototype into a high fidelity prototype. We found a few points of weakness which we needed to develop, change, or remove completely in order to better achieve our goals achieve our intended goals.
Navigation Bar
Navigation links should be unique to the nav bar unlike the button used for the rest of the page
The navigation links and elements are currently too squashed together, and the “Donate” button specifically is floating awkwardly with no regard to space. We need to increase and hone spacing to increase legibility.
The current navigation does not reflect what page the user is currently on. We need to show breadcrumbs so that there is no confusion in what is being explored.
General
Typography is currently too big making the page seem “cartoonish”. Reduce to a reasonable size with consideration to accessibility.
Some sections look a bit flat. Add some graphic patterns and background shadows to card and images to improve the illusion of depth.
Create color consistency between buttons and backgrounds
Final Design
After receiving feedback on our design we applied the necessary changes to get to the current product design. Although it is not a complete final product, it is much closer to meeting the stakeholders current needs.
Conclusion & Resolution
Our final result came much closer to the needs of our client, however there are more improvements that could be made in order to better accomplish new goals and ideas that would ultimately benefit Coalicion Fortaleza as an organization.
Future Project Developments
Given more time and resources the following we would take the following steps to further pursue better outcomes for this project:
Complete all the pages laid out in our site map
Complete mobile prototyping
Collect more photographs that reflect actual volunteers and beneficiaries of the organization
Project Reflection
This project went well overall, and also presented some (maybe not so) unique obstacles that challenged the overall design process.
One of the more difficult things to address as the team lead, was how to effectively divide project tasks amongst my team, especially since one of our team members was effectively absent throughout the project, making it increasingly difficult to ensure quality while also meeting deadlines. I felt responsible to pick up the slack so ended up taking on much more than what my role would entail.
On the one hand I felt proud of my many personal contributions to this project. I personally did all the graphic design of the logo and graphic patterns used on this project along with all of the interactive prototyping on top facilitation of all team discussion and problem solving. The downside of this was feeling overwhelmed and short on time. Even though this is a natural consequence of “staff shortage” I wonder: “could i have handled this situation in a more productive way?”
Overall, I am extremely happy with the result of our product and the contributions made from my other team member to pull everything together in time to present our case study, although admittedly we could have had a more cohesive presentation had we finalized earlier in order to get everyone on the same page.
On September 8th of 2020 the Almeda Fire scorched over 2,600 homes displacing the Rogue Valley’s historically low-income, Latinx and Indigenous neighborhoods and revealed just how climate vulnerable, economically exploited and politically underrepresented these communities have been.
Coalicion Fortaleza is an organization led by culturally empowered women of color. Born from the struggle caused by the Alameda Fires, Coalicion Fortaleza is dedicated to empower these same communities to collectively shape their own destiny and solutions in the face of impending climate change.
“No decisions made about us, without us”
I tied the logo to the cause by playing to motifs reflected by the Sun and flowers.
The Sun symbolizes warmth, rising, and the welcoming of a new day.
Flowers reflect ideas such as growth, planting seeds, and resilience.
Shows images of the real people who’ve they’ve impacted.
Has a bold info graphic showing their impact with real data.
They have action items summarized with icons.
Has clearly marked pathways for the type of user browsing.
Has a section dedicated to their social media and local media presence.