Work •

Church Content Website

Expanding the image and online capabilities of a large and growing church.

Live Site
Services
Web DesignFrontend Development
Scope
Responsive Web Design, Content Strategy, Static/Jamstack Development, Frontend Development, Calendar & Donation Integrations, Sanity CMS Integration
Tools
Figma logo. Astro logo. Sanity logo. Svelte logo.
SMCC site header design: A full-width fly-out navigation menu with columns titled 'Welcome', 'Worship', 'Connect', 'Who We Are', and 'Resources' in a dark blue and light blue color palette.'Resources' section design with various categories on a dark blue background and resource card links featuring vibrant images below.'Upcoming Events' section design with event card links grouped by month.

Overview

San Marino Community Church (SMCC) is a large, multi-generational church with many programs and events happening every week. When they reached out to me for a website redesign, they felt that their then-current platform—a template-based website builder tied to a private, proprietary backend owned by a large company—did not meet their needs for custom content management or meaningful design.

I took on this project not just to refresh the visual design of the website, but to help SMCC deeply rethink how the site’s content itself could be restructured to fit the needs of this growing community.

200+

Total Number of Pages

7

Custom Content Schemas

99%

Average Lighthouse Score (Desktop)

Web page design for church resource entries, featuring a dark blue and light blue color palette, bold typography, and a vibrant header image.

Building a Fully Customized Content Management Experience

Enter Sanity Studio, an open-source, headless content management system (CMS) designed for “composable” content creation. Through many content planning sessions with SMCC, we identified the crucial building blocks of content that were most important for the site—recurring groups like events, services, ministries, resources, and people—and developed custom re-usable schema types for each group.

Unlike a more traditional CMS such as WordPress, which forces all content to be conceived as pages or posts, these composable “atoms” of content gave us much greater freedom in structuring and reusing elements across the site.

A screen from the Sanity Studio backend showing 'Resource Post' entries and editable fields associated with an individual post.

Most importantly, the editing experience became much more approachable and productive for members of SMCC’s team. Sanity’s “headless” nature means that all of the custom content schemas live separately from the frontend of the site built in Astro. Editors no longer have to worry about breaking design elements on the site but can focus on content management through a beautiful, multi-player user interface finely tuned for their needs.

In the end, we solved one of SMCC’s major pain points by moving from a rigid, expensive backend system to a flexible, extensible, open-source, and low-cost alternative.
A laptop and mobile phone showing the San Marino Community Church website design on each of these screen sizes.
Web page design for the page titled 'Giving', shown on a laptop screen.

Making Static Feel Dynamic

For the frontend of the site, I chose to utilize the Astro and Svelte frameworks to build an extremely fast, lightweight, performant, and interactive site. Astro was the perfect tool to generate a content-focused website containing over 100 pages and many more images, optimizing for speed, security, accessibility, and SEO at the same time.

Web page design for 'Worship Live' section, with interactive tabs to switch between traditional or contemporary services for the current entry. The page also shows an archived index of many of weekly services.

Astro pre-builds every page each time the site is deployed, ensuring a fast and SEO-friendly end-user experience. But this “static-first” approach doesn’t mean a lack of dynamic features. Numerous interface components add elements of browser-based interactivity, enabling a more engaging user experience.

One notable example is the “Worship Live” page, which utilizes an interactive tab component to switch between multiple service types. Daily site builds ensure this page is always up to date with the latest services, and the tab component allows easy switching between them.

View Live Site