SafeHaven
Website for Donors and Families
Building a Flexible, Inclusive, and Future-Proof Digital Platform for SafeHaven
We partnered with The Local Collective to rebuild SafeHaven’s website in Framer with a focus on long-term performance and scalability. We created a responsive component system, introduced thoughtful interaction patterns, and set up the foundation for SafeHaven to easily launch future content and campaigns without added development overhead.
Services
UX/UI Design Responsive Design Framer Development Accessibility Design Systems
tech
Figma Framer TypeScript Google Tag Manager
Timeline
MVP 1 month Full site 2 months Ongoing
Team
The Local Collective Kevin + Carlos
Problem
SafeHaven needed a website that actively moved donors and families to act — not slow them down. The client felt their previous site made it difficult to find key information, delayed decision-making, and required too much effort to maintain or update. Our objective was to surface high-value actions immediately, design a modular system in Framer we could fully assemble ourselves, and prove clear impact through faster performance, AA-level accessibility, and intuitive donation pathways.
Solution
In collaboration with TLC, we mapped user journeys to confirm intuitive navigation and whether a secure donation flow could live directly inside Framer. That clarity helped define the true boundaries of the build. We treated the About page as a pilot — establishing definitive rules for typography, spacing, and colour, then translating those into a flexible, responsive component system. The full site was then assembled from 40+ reusable modules. Every page was built from the same toolkit — ensuring brand consistency and familiarity for users, enabling us to launch the entire experience within one month.
Impact
Research And Framing
Families needed straightforward access to programs and support. Donors needed a clear narrative, rapid access to financials and reports, and transparency of where their money is going to build trust. We validated our model on the About page — transforming a dense text block into a series of scannable, purpose-driven sections. That structure became the foundation for every page that followed.
Collaborating to Refine Modules
We defined clear rules for what becomes a module, documented all state variations, and aligned on what SafeHaven editors would control after launch. Working closely with The Local Collective, we designed each page to balance clarity and emotional impact — allowing their storytelling and stakeholder strategy to shine, while ensuring every interaction felt intuitive and purposeful.
Building Smart, Accessible Systems
We built custom Framer components to keep content lean and maintainable: a rich-text grid that reflows one CMS field into 1–4 columns, and a CSV-to-table formatter that turns financials into responsive, accessible tables — no manual fixes needed. We also shipped a slot-based carousel with custom navigation, keyboard focus, and reduced-motion support. Together, these systems keep storytelling engaging and inclusive while letting editors publish fast with consistent performance.
Finished Product
Results
The Donate Success funnel in GA4 tracks completed donations and supports post launch experiments. The library now includes 40 plus modules, which cut manual work and let us assemble pages quickly. Annual Reports were published from the same system without custom layouts.
Next steps
Partner with SafeHaven to keep the site current, train editors on Framer, review performance and accessibility on a regular cadence, and build new requests as modules so updates stay fast and consistent.