Free Our Vote is a nonprofit organization working to eliminate disenfranchisement and fines-based barriers to voting. Our team was tasked with designing a new website to better represent the nonprofit’s re-brand, appeal to donors and partners, and clarify their mission to broader audiences ahead of the 2024 election cycle.
Free Our Vote develops tech solutions to assemble complex court and corrections records to determine voter eligibility. We fundraise to pay off court debt, negotiate with clerks of the court to reduce amounts owed, and inform newly eligible voters through mailers and texts.
Develop web scrapers with open-source and Al tools to pull criminal, court, and contact information data.
Leverage APIs and publicly requestable records to acquire additional records.
Present partners with lists of individuals to contact, including mailing address and cell numbers.
Develop RCTs and evaluate programs for interested partners.
Negotiate with clerks of court to waive balances. Pay remaining balances.
Use statistical methods and complex matching logic to link disparate datasets.
Determine which individuals qualify or identify relevant barriers, e.g., fines, fees, restitution, to eligibility.
Isolate jurisdictions where funding achieves greatest impact.
How did we start?
Our work began with a comprehensive need-finding phase which included:
Clear Purpose, Stronger Impact: Competitor Analysis & Literature Review
League of Women Voters
League of Women Voters
VoteRiders
US VOTE Foundation
Campaign Legal Center
Competitor Strengths
Clear Navigation & Structured Content
Sites like VoteRiders and LWV use structured layouts and state filters to make voter info easy to find.
Positive Visual Trust & Institutional Branding
U.S. Vote Foundation and VoteRiders offer tailored experiences for niche groups (e.g., overseas voters,
multilingual users), improving usability and engagement for diverse audiences.
🧠 A moment to reflect...
Design isn’t just about aesthetics—it’s about how clearly a mission shows up in every interaction.
Before aligning on layout or colors, we asked: How do we translate advocacy into interface?
We weren’t just
designing a website—we were designing a digital front door to a movement.
With that lens, our design strategy began.
Building a Modular Design System
● Sketched low-fi wireframes for pages (Home, About, Partners, Donate) to explore layout and flow.
● Assigned pages across designers and aligned on structure through weekly critiques.
● Iterated wireframes based on client feedback to improve hierarchy and clarity.
Early-stage wireframes exploring consistent layout patterns across pages.
Design System & Brand Integration
● Sketched low-fi wireframes for pages (Home, About, Partners, Donate) to explore layout and flow.
● Assigned pages across designers and aligned on structure through weekly critiques.
● Iterated wireframes based on client feedback to improve hierarchy and clarity.
01: Brand Typography & Voice
Rubik was selected as the primary
typeface for its clean, modern tone
and legibility across headings and
body text.
02: Logo Guidelines & Contrast Rules
To preserve logo legibility, a quick-reference
matrix helped designers test blue and red
background pairings against the logo mark.
02: Logo Guidelines & Contrast Rules
To preserve logo legibility, a quick-reference
matrix helped designers test blue and red
background pairings against the logo mark.
Featuring Focus: Rethinking the Donation Experience
① Problem
The original Donate flow lacked visual hierarchy, clarity, and persuasive storytelling.
There was no clear answer to: Why donate now?
The page was text-heavy, hard to navigate, and missing impact context — which likely contributed to drop-off.
✅ Strong branding
Logo & tagline establish a clear
organizational identity.
✅ Emotionally resonant imagery
Illustration reinforces civic
engagement theme.
❌ Weak call to action
No clear prompt or urgency to donate.
❌ Text-heavy and Hard to Scan
Lacks visual hierarchy & persuasive
highlights.
② Solution: Research Meets Strategy
We drew from civic tech benchmarks to guide actionable design:
💡 Impact stats + strong CTAs boost conversions → Led with mission headline and “26% turnout
boost” chart.
🤝 Trust signals build credibility → Added partner logos and testimonials.
Turning Design into Reality
Converted final designs from Figma into interactive, mobile-responsible prototypes in Framer
Navigated shared account constraints and collaborated asynchronously to avoid conflicts.
Developed sticky navigation, drop-downs, interactive FAQs, and responsive footer components.
💻 Built Interactive Prototypes in Framer
Outcome: Simplicity drives action → Designed a clean, low-friction form
for mobile and desktop.
📌 REFLECTIONS
Designing as a Mindset
I focused on ensuring consistency & accessibility across the platform. It taught me
how foundational systems can set the tone for scalability & usability.
Cross-Functional Collaboration
Working closely with developers was a huge part of our success. This helped me refine features quickly &
communicate technical needs clearly. I learned how to balance stakeholder goals with real implementation constraints.
Systematic Accessibility
I designed with accessibility in mind—not just through color contrast, but also with iconography, type scaling, and
consistent navigation to support diverse users.
Iteration Moves You Forward
Constant testing and revision taught me that iteration isn't just a phase— it's a mindset. I grew more comfortable with
adapting on the fly and letting go of polished ideas in favor of functional ones.
Thank you for taking the time to read! 🌟