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 the home, grant application, the mission, our people, and our impact 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!
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 our initial user testing provided key insights that helped align the designs with client goals.
Due to the 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 consistency across all pages.
During WordPress development, I learned the importance of having organized content and images to streamline the process. I gained valuable experience balancing design aspirations with technical limitations, and adjusted the original designs as needed.