The Colonel Renee Rubin Foundation
Overview: Colonel Renee Rubin Private Foundation (CRRPF) is a non-profit that serves veterans, and focuses on military women, healing veterans and service animals.
Timeline: 4 weeks
My Role: I was the team lead and collaborated with Grecia Dwyer on all stages of the project.
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
I really enjoyed collaborating on this project with Grecia and The Colonel Renee Rubin Private Foundation. I learned so much about color theory as we decided on colors for their brand identity. The user testing offered invaluable insights into aligning our designs with the client. Due to the tight project turnaround, we didn't have time for user testing after creating high-fidelity mockups. Next time I would structure the project so we'd have time for that second round of testing.
I also learned how to effectively communicate design decisions and changes with my partner. This ensured there was consistency across all pages. Looking forward to more UX collaborations!