Contact

Work

About

Contact

Work

About

SafeHaven

Website for Donors and Families

Crafting a Modular, Responsive Experience for SafeHaven

I partnered with The Local Collective and my collaborator Carlos to rebuild SafeHaven in Framer. I designed a responsive component library, added small custom code for flexible layouts and motion, and set the site up to grow cleanly over time.

Book a Call

Services

UX/UI Design Responsive Design Framer Development Accessibility Design Systems

tech

Figma Framer TypeScript

TImeline

MVP 1 month Full site 2 months Ongoing

Team

The Local Collective Kevin + Carlos

The Ask

Make the site simple for donors and families, easy for editors to maintain, and consistent across pages. Align the refreshed brand in Figma with a production-ready system and hit a tight launch tied to a funding announcement. Success meant a working MVP in 1 month and a donate flow with a measurable CTR lift

The Solution

Start small and make it systemic. I used the About page to define rules for type, spacing, color, and accessibility, then rebuilt those rules as reusable Framer modules with simple controls for color, layout, media, columns, and CTAs. When real content needed more flexibility, I added light TypeScript helpers and purposeful motion that supports key actions like donate.

Visit SafeHaven.to

Research and Framing

First, I clarified the audiences and their top tasks. Donors needed a clear story, quick access to annual reports, and a confident path to donate. Families needed direct routes to support information. I audited the old site, mapped tasks, and benchmarked strong nonprofit patterns to reduce friction on a tight timeline. Next, I set the rules the system would follow. I defined a mobile first type scale and spacing, checked color contrast, and fixed heading order for screen readers. The About page became our pilot to prove these rules on real long form content and translate them into modules used across the site.

Designing With Feasibility In Mind

TLC’s design team, Carlos, and I co-designed the modules together. While they developed the mockups in Figma, I ran feasibility checks in Framer and refined patterns with them so each section could be built once and reused. We aligned early on what should be a component, which states we needed, and which knobs would matter for editors. Once designs were locked, I translated them to Framer and built the library. Each module is editable with variables for color, layout, media, columns, and CTAs, and includes desktop, tablet, and mobile variants with clamp-based type. A single change updates everywhere, which keeps pages consistent and speeds up iteration.

Smart Code, Flexible Content

Some pages were heavy on copy and data, so I built small helpers to keep content clean and easy to edit. I wrote a rich text grid that takes one CMS field and reflows paragraphs across four, three, two, or one column while balancing lines for a magazine feel at any width. For financials, I added a CSV to table formatter that stays readable on mobile without manual tweaks. I also built a slot based carousel that accepts any number of items, with custom buttons, keyboard focus, and reduced motion awareness. Subtle motion cues highlight the donate path and give feedback on interactions, keeping the site lively without hurting performance or accessibility.

My Process

Define and de-risk

I start by naming who we are designing for and what they need to do fast. I audit the current flows, review strong patterns in the space, and test key tech early. For SafeHaven that meant confirming the donation embed worked in Framer, and setting baseline rules for type, spacing, contrast, and headings so accessibility is built in from the start.

Define and de-risk

I start by naming who we are designing for and what they need to do fast. I audit the current flows, review strong patterns in the space, and test key tech early. For SafeHaven that meant confirming the donation embed worked in Framer, and setting baseline rules for type, spacing, contrast, and headings so accessibility is built in from the start.

Define and de-risk

I start by naming who we are designing for and what they need to do fast. I audit the current flows, review strong patterns in the space, and test key tech early. For SafeHaven that meant confirming the donation embed worked in Framer, and setting baseline rules for type, spacing, contrast, and headings so accessibility is built in from the start.

Co-design into modules

With TLC and Carlos I shape the sections in Figma while checking feasibility in Framer. We agree on what becomes a component, which states matter, and which editor controls are needed. I translate that into a reusable module library in Framer with variables for color, layout, media, columns, and CTAs. Each module carries its own responsive type so it swaps cleanly across desktop, tablet, and mobile.

Co-design into modules

With TLC and Carlos I shape the sections in Figma while checking feasibility in Framer. We agree on what becomes a component, which states matter, and which editor controls are needed. I translate that into a reusable module library in Framer with variables for color, layout, media, columns, and CTAs. Each module carries its own responsive type so it swaps cleanly across desktop, tablet, and mobile.

Co-design into modules

With TLC and Carlos I shape the sections in Figma while checking feasibility in Framer. We agree on what becomes a component, which states matter, and which editor controls are needed. I translate that into a reusable module library in Framer with variables for color, layout, media, columns, and CTAs. Each module carries its own responsive type so it swaps cleanly across desktop, tablet, and mobile.

Ship lean, measure, iterate

We launch the essential pages first, QA for contrast, focus order, performance, and smooth motion, then cut over the domain. Post-launch I add CMS collections where needed, fix bugs, and extend pages using the same modules. For SafeHaven this meant rolling out reports and minutes after MVP while we continued refining based on client feedback.

This loop repeats for every new page or feature: define and de-risk → co-design into modules → ship, measure, iterate.

Ship lean, measure, iterate

We launch the essential pages first, QA for contrast, focus order, performance, and smooth motion, then cut over the domain. Post-launch I add CMS collections where needed, fix bugs, and extend pages using the same modules. For SafeHaven this meant rolling out reports and minutes after MVP while we continued refining based on client feedback.

This loop repeats for every new page or feature: define and de-risk → co-design into modules → ship, measure, iterate.

Ship lean, measure, iterate

We launch the essential pages first, QA for contrast, focus order, performance, and smooth motion, then cut over the domain. Post-launch I add CMS collections where needed, fix bugs, and extend pages using the same modules. For SafeHaven this meant rolling out reports and minutes after MVP while we continued refining based on client feedback.

This loop repeats for every new page or feature: define and de-risk → co-design into modules → ship, measure, iterate.

What I learned

  • Small, well named systems ship faster and scale better than one off pages.

  • Designing for simple CMS editing upfront prevents content debt.

  • Motion should guide one decision at a time, not decorate everything.

Impact & Next Steps

45%

45%

45%

45%

45%

45%

300%

this is a Title

300%

this is a Title

300%

this is a Title

45%

Another one

45%

Another one

45%

Another one

Launch Lean, Scale Fast

Partner with us to cut complexity and accelerate your growth.

Let's Chat

SafeHaven

SafeHaven

SafeHaven

SafeHaven

SafeHaven

SafeHaven

Thrive Therapy

Textme.bio

Thrive Therapy

Textme.bio

Thrive Therapy

Textme.bio