SafeHaven
Website for Donors and Families
Crafting a Modular, Responsive & Accessible Website for SafeHaven
I partnered with The Local Collective and my collaborator Carlos to rebuild SafeHaven in Framer. I designed and built a responsive component library, added small TypeScript helpers for layout and motion, and set the site up to grow cleanly over time.
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 site that moved donors and families to action. The old site buried key tasks, slowed users, and was hard to maintain. Our goal was to clarify top tasks, ship a modular system in Framer that we assembled ourselves, and prove impact through faster load, AA accessibility, and cleaner paths to donate and support.
Solution
We started by auditing the old site, mapping donor and family journeys, and validating whether a donation form could be embedded in Framer. That allowed us to define the real boundaries of the build. From there, we treated the About page as a pilot. We established rules for type, spacing, and color, then used those rules to codify a flexible library of responsive modules. We assembled the site with more than forty components. Each page was constructed from the same toolkit, which kept everything consistent while making it possible to hit a tight one month deadline.
Impact
Research And Framing
Donors needed a clear story, quick access to reports, and a confident donate path. Families needed direct routes to services and support. The About page proved the model. We turned a long, text heavy page into scannable modules that set the pattern for the rest of the site.
Co-Design
I defined what becomes a module, which states matter, and what editors control. Carlos partnered on select modules and on aligning the system with the approved Figma direction. We assembled every page ourselves so TLC could focus on content, client management and discovery.
Smart Code, Clean Content
I built a rich text grid that reflows one CMS field into up to four columns. It saved hours of manual pasting and solved the breakpoint problem where three columns cannot become two gracefully. I built a CSV to table formatter that turned uploaded financials into responsive, accessible tables. It removed copy paste errors and kept tables usable on mobile. I built a slot based carousel with custom buttons, keyboard focus, and reduced motion support. It kept storytelling dynamic and inclusive.
My Process
Finished Product
What I learned
Test early, ship a slice, gather feedback.
Build as components to keep updates consistent and fast.
Invest in custom helpers save time and build smarter.
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.