Nonprofit Website Design & Development
Client: The Colonel Renee Rubin Private Foundation
Timeline: 8 weeks
My Role: UX/UI Designer & Developer
Overview
The Colonel Renee Rubin Private Foundation (CRRPF) is a nonprofit organization that provides grants to veterans, with a specific focus on supporting military women and service animals. I led user research, information architecture, wireframes, and high-fidelity mockups before developing the complete WordPress website.
The Challenge
CRRPF lacked a digital presence to effectively communicate their mission and reach veterans in need of support, limiting their ability to connect with beneficiaries and expand their impact.
The Solution
Design a website that showcases CRRPF's mission, streamlines the grant application process, and provides accessible resources for veterans, military women, and service animal organizations.
Competitor Research
We researched 3 direct and 2 indirect competitors to identify strengths and areas of opportunities. We analyzed the user flows for the grant application and donation process, priority features, and philanthropic site marketing.
How Might We?
Based on our competitor analysis findings, we used the following questions to guide our solution ideation:
-
How might we help CRRPF achieve their mission of supporting veterans and their families?
-
How might we design a non-profit website that centralizes the grant application process and encourages donors to contribute and networks the mission accurately?
User Personas
We identified and defined 2 different personas to understand who the users would be.
Applying to a grant
Donating to the nonprofit
Sitemap
We created a sitemap to provide a clear outline of the website structure for effective user engagement.
User Flows
We created 2 user flows that outlined the key actions users would have on the website. These included:
Applying for a grant
Making a donation
.png)
Sketch
I completed Crazy 8’s to sketch out ideas for the homepage. Then sketched more detail into one option:
Wireframes
I created wireframes in Figma for Home, Grant Application, The Mission, Our People, and Our Impact pages. Here are 4 of 14 pages:
Usability Testing
We conducted moderated user testing with 4 participants to evaluate the grant application and donation processes. Participants completed tasks that tested both user flows.
All participants successfully navigated through both processes and responded positively to the "Our Partners" section on the homepage, the grant application progress bar, and the donation confirmation page.
We identified and addressed 3 key user issues:
User Problem #1
Before: Users found the navigation cluttered and difficult to use. The expense ratio was confusing, and the homepage felt too lengthy.
After: We moved the "News" tab under "Our Impact" to streamline navigation, added a clear pie chart for the expense ratio, and simplified the messaging.
User Problem #2
Before: Users lacked clarity on grant application requirements. There was no way to check application status, and the application form didn't indicate which fields were required.
.png)
After: We added a requirements list on the "Create an Account" page, created an application portal with status tracking, and marked required fields with asterisks and helper text.
User Problem #3
Before: Users wanted to make anonymous donations.
After: We added an option to make a donation anonymous.
User Interface
The client wanted a "vintage meets contemporary" aesthetic. We selected dark blue as the primary color to honor veterans and reflect Colonel Renee Rubin's Navy background. To ensure visual consistency, we developed the following style guide:
Prototype
After user testing, we iterated on our designs, applied the style guide, and created a functioning prototype in Figma. I focused on the user flow for the grant application, "Who We Are", and "Our Impact". Check it out!
Impact
The website was well-received by the board members, who noted it effectively communicates the foundation's mission and streamlines grant applications and donations.
Key outcomes:
-
Increased grant submissions through reduced friction in the application process (reported by client post-launch)
-
Established a secure and compliant online donation system
-
Strengthened professional credibility, leading to new networking opportunities and positive feedback
Learnings
Collaborating with Grecia and The Colonel Renee Rubin Private Foundation was a rewarding experience. I learned so much about color theory during brand development, and initial user testing provided key insights that helped align the designs with client goals.
With a tight timeline, we couldn't conduct user testing after the high-fidelity mockups - a step I'll prioritize in future projects. I also improved my ability to communicate design decisions, which helped maintain visual and functional consistency across pages.
During WordPress development, I learned the importance of having organized content and images for a smoother build process. I gained valuable experience balancing design aspirations with technical limitations, and adjusted the original designs as needed.