FrederickDesign Studio

Portfolio

Work Built to Last.

Selected work, shown in full. A live bookkeeping product you can log into and use right now, and a nonprofit rebuilt across web and mobile.

01

Meridian Bookkeeping

Studio Demo • Site + CRM + Mobile App • Live2026

A complete bookkeeping practice, built from scratch: a cinematic marketing site, plus the full client-and-practice CRM that runs the business behind it. Dashboard, clients, invoicing, documents, and month-end close.

Meridian Bookkeeping homepage

The organization

Meridian Bookkeeping is a studio demonstration build: a complete digital presence for a premium small-business bookkeeping practice in the San Francisco Bay Area. It exists to answer the question every service business asks, which is what custom actually buys you over a template. So I built the whole thing, the marketing site and the software the business would run on, as one working system rather than flat mockups.

The challenge

Most bookkeepers, contractors, clinics, and studios get a brochure website: a pretty template that ends at 'Contact us.' The real work of the business happens somewhere else entirely. Managing clients, collecting documents, sending invoices, closing the books each month. All of it lives in spreadsheets, email threads, and disconnected tools. The challenge was to show the alternative end to end: a marketing site and a genuine operating system for the practice, sharing one brand, one design language, and one standard of speed and polish.

My approach

One brand, two surfaces

A distinct identity carried across both the public site and the private app, so the whole thing reads as one product: a Sora display face, off-white on true black with a single blue accent, and a quiet ledger motif.

It actually runs

Every screen is data-driven from a single typed dataset, so nothing on it is a flat image. Navigate the CRM, open a client, read the numbers.

Wired for real

All data flows through one accessor layer with a clean seam: swap the seed for a live database or the QuickBooks API and the interface never changes. The demo is the front end of a real build.

Performance as a feature

Server-rendered pages, a custom SVG revenue chart instead of a heavy charting library, and an image pipeline that crushes 10 MB photos to roughly 100 KB with no visible loss. A template can't match that.

Built to be used

A working sign-in, real routing, and a consistent component system throughout.

Inside the build

A branded, secure sign-in for the client and practice portal.
A branded, secure sign-in for the client and practice portal.
The client book: ten businesses with generated avatars, engagement tiers, and close status at a glance.
The client book: ten businesses with generated avatars, engagement tiers, and close status at a glance.
A single client, with invoices, document intake, profile, notes, and open items in one view.
A single client, with invoices, document intake, profile, notes, and open items in one view.
Invoicing with real status, reconciled to the dashboard totals: paid, sent, overdue, draft.
Invoicing with real status, reconciled to the dashboard totals: paid, sent, overdue, draft.
Document intake: exactly what's received, needed, and in review for the month-end close.
Document intake: exactly what's received, needed, and in review for the month-end close.
The month-end close board, with every client's books tracked from to-do to done.
The month-end close board, with every client's books tracked from to-do to done.
A companion mobile app: send documents, see what's needed, and pay from your phone (iOS & Android).
A companion mobile app: send documents, see what's needed, and pay from your phone (iOS & Android).

What I built

  • A cinematic marketing site: animated hero, services, a secure-portal preview, and a working contact form
  • A gated client & practice portal with a branded, role-aware sign-in
  • An owner's dashboard: live KPIs, a custom revenue chart, a needs-attention queue, and an activity feed
  • A searchable client directory with a detail page for every business
  • Invoicing that reconciles to the dashboard, with real status: paid, sent, overdue, draft
  • A document-intake tracker tied to each month-end close
  • A close task board spanning the whole book of business
  • An image pipeline that takes 10 MB photos down to ~100 KB without visible loss
  • A companion mobile-app concept, so clients upload, track, and pay from their phone

The outcome

It's the clearest proof I have that Frederick Design Studio builds custom software rather than templates: a live marketing site you can visit, backed by a fully-built client-and-practice CRM shown here in full, with dashboard, clients, invoices, documents, and a month-end close. I designed, built, and populated the whole thing as a capability demonstration.

Built with

Next.js 16React 19TypeScriptServer ComponentsTailwind CSS 4GSAPCustom SVG Chartssharp
02

Mending Indigenous Spirits

Full-Stack Build • UX/UI • Pro Bono2025

A digital home for Indigenous wellness, culture, and community, across web and mobile.

Mending Indigenous Spirits homepage

The organization

Mending Indigenous Spirits is a Northern California 501(c)(3) nonprofit creating and connecting Indigenous communities through wellness, culture, and healing. It supports relatives walking the Red Road and Wellbriety frameworks of recovery, survivors of domestic violence, unhoused relatives, BIPOC community members, youth and elders, families affected by Missing and Murdered Indigenous Persons (MMIP), and Two-Spirit relatives, with patience, understanding, and respect.

The challenge

The organization does a great deal: recovery meetings, cultural events, an artisan market, trainings, and a wellness team. It had no cohesive home for any of it. It needed a space that could carry a wide, growing range of programs without feeling cluttered; serve a largely mobile community often reaching out in vulnerable moments, with calm and dignity; and honor Indigenous culture in its look and language rather than treating it as decoration. And it needed to live across web and mobile, not just as a website.

My approach

Discovery rooted in the mission

I mapped the full range of programs into a clear information architecture before any design began: Vision, Team, Events, Wellbriety meetings, Artisan Market, Shared Journeys, and Trainings.

A calm, ceremonial system

Deep charcoal grounds, teal and warm-gold accents, and elegant serif headings that read as reverent and steady: present, never loud.

Patterns that scale

Reusable card grids, event cards, a scrollable meeting-flyer grid, and a filterable team directory, so new content gets added rather than redesigned.

Built for the people it serves

Mobile-first, accessible, and fast, with the paths that matter most always close at hand: find a meeting, get involved, donate.

Full-stack, plus companion apps

A site built on Node and Express, extended by iOS and Android applications that carry the same protected space onto phones.

Inside the build

Our Vision: the 501(c)(3) mission and who it serves, stated plainly and with respect.
Our Vision: the 501(c)(3) mission and who it serves, stated plainly and with respect.
The wellness-team directory, filterable, with founding leadership and full bios.
The wellness-team directory, filterable, with founding leadership and full bios.
Events: recurring drumming circles, gatherings, and cultural celebrations.
Events: recurring drumming circles, gatherings, and cultural celebrations.
Wellbriety meeting flyers in a scannable, continuously-updated grid.
Wellbriety meeting flyers in a scannable, continuously-updated grid.
Contact: clear, low-friction paths to reach out, get involved, and donate.
Contact: clear, low-friction paths to reach out, get involved, and donate.

What I built

  • A mission-first homepage routing people to eight core areas of the community
  • An "Our Vision" page stating the 501(c)(3) mission and exactly who it serves
  • A wellness-team directory with filters and full leadership bios
  • An events hub for recurring circles, gatherings, and cultural celebrations
  • A Wellbriety meeting-flyer grid for Indigenous-led recovery meetings
  • Indigenous Artisan Market, Shared Journeys, and Certificates & Trainings
  • Clear contact and donation paths, plus companion iOS & Android apps

The outcome

A single, dignified home for a wide-ranging community program, on the web and in people's pockets. The structure gives the organization room to grow without a redesign, the identity reflects the culture it serves, and the most important paths are never more than a tap away. Built pro bono, held to the same standard as paid work.

Built with

HTMLCSSJavaScriptNode.jsExpressiOS AppAndroid App

In the studio now

Currently in progress

Work underway, shown in confidence. Live links and the full story go up as each client launches.

Doula Practice, Northern California

Website + Mobile Concept

In private preview

A website and companion mobile concept for a birth-work practice serving Northern California, Arizona, and Texas. Beyond the marketing site, the build includes an advocacy toolkit of cultural birth protocols and patient-rights references to support families through labor. In private preview ahead of launch.

Full-stack buildUX/UIAdvocacy toolkit

Interested in working together?

Tell me what you’re building. If I’m not the right studio for it, I’ll say so.