The Colonel Renee Rubin Foundation
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.
Timeline: 8 weeks total (4 weeks for UX/UI Design + 4 weeks for Development)
My Role:
​
-
UX/UI Designer: Led user research, information architecture, wireframes, and high-fidelity mockups.
-
Sole Developer: Built and launched the full WordPress website.
The Challenge
CRRPF does not have a website and needs one to support their mission in helping veterans and their families.
The Solution
Design a website that aligns to their mission, and centralizes the grant application and donation processes.
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?
Gathering everything we learned in the competitor analysis, we asked 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?
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 Flow
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. We asked them to complete tasks to test the grant application and donation flow.
All participants easily navigated through both user flows. Below are key findings:
-
100% of participants liked the “Our Partners” section of the homepage, the progress bar for the grant application, and the donation thank you page
Homepage:
-
Change “Core Priorities” to be right below “Serving Our Veterans”
-
Create a pie chart for the expense ratio and convey a message that is more universally recognized
-
Change the “News” tab to be under “Our Impact” to make navigation bar cleaner
-
Shorten the length of homepage
Grant Application
-
Add a list of required items to complete grant application in “Create an Account”
-
Create an application portal and include an application status update
-
Include asterisk for required documents and helper text for nature of request
.png)
Donation
-
Provide option to make a donation anonymous
-
Include non-profit ID# and contact info
User Interface
The client wanted the website to have a “vintage meets contemporary” aesthetic. We chose dark blue as a primary color, as it is one color representing veterans, and to align with Colonel Renee Rubin’s background in the Navy. To maintain visual consistency, we developed the following style guide:
Mockup & 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
Working 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.