Responsive website design for a new non-profit organization
01 / Summary
Honoring Resilience is a new non-profit organization dedicated to helping individuals with adverse experiences heal and break the cycle of generational trauma. They needed a website that would raise awareness about their work and help with fundraising. I worked with the founder of the non-profit to design a website that would build trust and help them bring their vision to life.
Duration: 75 hours
My Role: UX Research, UX Design, UI Design, Responsive Web Design
Deliverables: Full Competitive Analysis, Detailed User Interviews, User Flows, Site Map, Wireframes, User-Interface Designs, High-Fidelity Responsive Prototype
Outcomes: Click-through responsive prototype with homepage, about page, mission page, donation and volunteer flows
Problem
Honoring Resilience is a new non-profit organization in need of a website to initiate fundraising efforts
They currently lack a substantial number of stories or testimonials to enhance the credibility of their website
Objective
Build a responsive website that offers resources and support to individuals facing traumatic experiences
Provide clear and transparent information to establish trust and initiate fundraising efforts that support the mission
Solution
A responsive website featuring a sleek, modern design with cohesive imagery and a color palette that instills trust
A section dedicated to the founder’s personal story to foster a deeper connection with users
A detailed volunteer sign-up page aimed at attracting individuals to further support the mission
02 / Understanding the Problem
User Experience Research
To kick off the research and gain a deeper understanding of the non-profit sector, I interviewed the client to explore her needs and vision for the organization. I also examined other websites to see what they do well and identify areas for improvement. Additionally, I gathered feedback from potential users, including some from my network and others from the non-profit founder’s network.
Competitive Analysis
I reviewed and compared the websites of organizations with similar missions, both local and international. I focused on identifying patterns, structure, the number of calls-to-action (CTAs), and their target audiences. Additionally, I assessed their strengths, weaknesses, and opportunities for improvement.
Key Findings
There was an open niche for trauma-informed care for people experiencing adverse life circumstances
Non-profits rely heavily on donations, and to attract more donors, they use pictures and real success stories
To compensate for the lack of real stories, Honoring Resilience will need to stand out by telling a story of its founder and providing other credibility support, such as health professionals' endorsements
User Interviews
To gain further insight into what motivates people to donate and their expectations of the non-profit website, I interviewed five individuals who have previously donated or volunteered with non-profits. Additionally, I conducted a more in-depth interview with the founder to better understand her personal story and motivations.
Key Findings:
Most users are looking for: clear fund allocation disclosures, impact statistics, real success stories, and information about the board
Users said that excessive focus on donations, outdated design, fear-mongering, and overly emotional imagery were red flags
Users wanted to see clear volunteering information and instructions before signing-up
Who are the users?
After analyzing my research findings, I developed two personas that encapsulate the key pain points and motivations of my interview participants. These personas enabled me to clearly identify my target users and served as a reference point throughout the entire design process.
Cleo Rana
A data-driven thinker with a passion for social justice, she is motivated to support causes that provide clear, measurable impact.
Core Needs: Align contributions with her personal values, particularly related to justice and community healing
Goals & Motivations: Clarity on how her contribution and organization are making an impact, photos of real events
Frustrations: Feels overwhelmed by emotionally manipulative or overly aggressive donation requests
James Carter
After experiencing the transformative power of a mindfulness program during his incarceration, he has dedicated himself to giving back.
Core Needs: Volunteer in roles where he can share his personal experiences to inspire others
Goals & Motivations: Believes in the importance of mentorship to guide others toward healing and reintegration
Frustrations: Lack of transparency about the impact and mission in some non-profits
03 / Solution
User Journey
App Features
During my initial conversation with the non-profit founder, she expressed a desire to create a simple landing page with information about the organization and an option for donations. However, after conducting further research, it became clear that a single page would not effectively establish credibility. We eventually agreed on a more comprehensive approach, outlining the following pages. I explained that these pages do not need to be developed immediately, but can be added as more information and stories become available.
Main Page with explanation of what organization does and a Call-To-Action to Donate
About Page with founder's personal story, non-profit's values and mission
Donation flow
Volunteer sign-up flow
Site Map & User Flows
The site map served as the foundation, integrating research and features while providing a basic structure for the website. After discussions with the developer, we also agreed to create a dashboard for the non-profit’s board to track donations and volunteers; however, this was not designed due to time constraints during the initial phase of the project.
Low & Mid-Fidelity Wireframes
Branding & UI
Color Palette & Logo
The client already had a logo designed and wanted to use similar colors for the website. I created a style tile that included colors, the logo, and typography, which I tested by applying it to the wireframes. I made some adjustments to the colors to improve contrast and ensure the entire palette looked cohesive. We chose Montserrat for headers and body due to its strong and clear character.
Design System
High Fidelity Wireframes
Having established a foundation with user flows, mid-fidelity wireframes, colors, and UI elements, I was able to bring the whole vision together in high-fidelity wireframes.
Testing & Iterations
When I was ready to test my prototype, I created a User Test Plan. This included specific tasks I wanted to evaluate and metrics for measuring success, such as the number of errors encountered during each task, understanding of the non-profit’s purpose, and whether the site felt trustworthy.
I recruited 5 participants and interviewed them over video call.
What worked well:
✅ Users liked multiple donation screens in a flow
✅ Users found the information on the landing page useful and clear
✅ Donation and Volunteer sign-up flows were easy to find and complete
What didn't work:
❌ Donation flow screens didn't have sufficient information, such as information about tax breaks and receipts
❌ The navigation bar was missing the name of the non-profit
❌ The values section was hard to read
Iterations
Donation screens were the ones I iterated on the most, as they were the primary method for the organization to receive donations. I wanted to ensure there were no missing details. I added links to information about taxes, donation security, and an option to print a receipt. After final testing, users were able to complete this flow with ease and confidence.
04 / Outcomes
Responsive website prototype
After multiple user tests and iterations, I presented the final Responsive Prototype to the client. Having a clear volunteer sign-up page will allow Honoring Resilience to build community and gather more phots and stories to include on the website.
Mobile friendly prototype
Conclusion
Designing for Honoring Resilience taught me the importance of creating a positive and approachable user experience, especially in sensitive subject areas. By grounding my work in research and personas, I ensured the design was transparent, concise, and action-oriented, while avoiding visuals that induce anxiety. I focused heavily on the research phase to familiarize myself with the nonprofit space, which made the design process more intuitive and purposeful. While I prioritized essential user-facing screens to meet deadlines, the project gave me valuable experience in responsive design, collaboration with the client and engineers, and industry-specific research.
05 / More Case Studies
Previous Case Study
Recycle Chicago
End-to-end Mobile App Design aimed to help Chicago residents with recycling
Next Case Study
Kraken
The project features adding an educational feature to the Kraken website
