Skip to content

A website my church can keep up to date.

How I redesigned and built Northpark’s website to help people find what they need and let staff manage recurring content in Planning Center.


Northpark’s redesigned homepage.

Video 1 of 4: The rebuilt Northpark Church page open in Chrome

Broken uploads revealed bigger problems.

Northpark has been my church since I moved to Raleigh in June 2025. In March 2026, its WordPress site stopped accepting image uploads. Staff could no longer add the images they needed for events, groups, and other updates.

I had worked with WordPress before, so I volunteered to help.

The upload error that prevented staff from adding new images.

An outdated WordPress installation was causing plugin issues. Fixing the immediate problem was straightforward, but the site’s maintenance problems ran deeper. The staff member who built it had left, and nobody on the current team knew how to maintain it.

The site was slow, information was difficult to find, and its design no longer reflected the church. Service times were buried in the footer. Routine updates depended on the few people who knew their way around WordPress.

Northpark's previous homepage design
Service times in the footer.

Over the next two months, a troubleshooting conversation became a proposal for a full rebuild. I worked with Stephanie Nobles, Northpark’s Executive Pastor, to define the scope, then took responsibility for the design and development.

The goal was a website that helped people find what they needed and that the church could keep current with the staff it already had.

Three users, not one.

I reviewed around 20 church websites to understand common approaches to navigation, content, and visual design. Two audiences shaped most of those experiences: first-time visitors deciding whether to attend and existing members looking for sermons, events, or ways to participate.

Northpark needed to serve both. Service times and what-to-expect information needed to be easy to find. Members needed direct paths to the content and activities they returned for.

Reference sites reviewed for visitor information, member navigation, and content organization.

The sermon archive showed how much useful content the old site concealed. Northpark had branded, well-produced messages dating back to 2018, but they lived under “Media” in a dropdown labeled “Message Archive.”

Messages belonged to named series, yet the archive presented them as a long list without grouping, filters, or search. Anything beyond the first page took effort to find.

Sermons were nested under Media → Message Archive.
The archive listed sermons without series browsing, filters, or search.

The third audience was the staff maintaining all of this.

Northpark already managed groups, events, registrations, and giving funds in Planning Center. The website had no connection to it, so staff manually entered the same information in WordPress whenever something changed.

Stephanie described the dependency plainly:

“If I’m out for the week, nothing on the site gets updated.”

The rebuild needed to make Northpark easier to understand for visitors, easier to navigate for members, and easier to maintain for staff.

Giving each page a clear purpose.

Stephanie is also a designer, so we developed the visual direction through working sessions. We reviewed reference sites together and settled on an editorial approach with large typography and photographs of the actual congregation.

I used Northpark’s existing brand fonts—Barlow Condensed for headlines and Gotham for body copy—to give the site a more consistent expression of the church’s identity.

Northpark’s existing brand fonts paired with photography of the congregation.

The old site gave many actions equal emphasis. I worked with Stephanie to establish a hierarchy: Connect became the primary call to action across the site, with Give and Prayer Request as secondary actions. Other destinations became navigation.

I also consolidated four pages covering the church’s story, mission, beliefs, and team into one About page. Visitors could understand Northpark without piecing together overlapping pages.

One About page brings together the church’s story, mission, beliefs, and team.

These changes gave the site a clearer structure. Each page had a purpose, and recurring actions appeared consistently.

Making the sermon library discoverable.

The sermon library needed more than a new layout. It needed to make the relationships already present in the content visible.

I moved Sermons into the main navigation and used series as the primary way to browse. The latest series leads the page, while older series appear as collections.

The latest series leads the library, with earlier series organized as collections

For someone looking for a particular message, I added filters for series or individual messages, speaker, and year, alongside search. Readers could explore a collection or narrow the library to something specific.

Staff upload each sermon once, and the page uses its associated information to organize it.

Search and filters help members narrow the library to a particular message.

Northpark already had years of carefully produced content. The redesign gave people a practical way to discover it.

Carrying the design through to production.

I designed the site in Figma and built it in Next.js with Claude Code, using a shared component system to carry decisions between the two.

Starting with shadcn/ui and Tailwind, I customized the components and Figma variables into NorthparkUI. Key Figma components were mapped to their code counterparts, giving me a consistent reference as I implemented each page.

NorthparkUI components used across the site
Shared variables define the site’s typography, color, and spacing

I worked page by page: design the layout, implement it, inspect the result in the browser, and refine it against the Figma reference. That review extended beyond static appearance. Hover, pressed, open, and closed states needed explicit attention. A component could match the design in a screenshot while still feeling unfinished when someone interacted with it.

I manually tested pages in Chrome and Safari, on an iPad, and on real phones. Northpark’s team reviewed Vercel previews and left comments directly on the pages, keeping feedback attached to the part of the site it concerned.

Owning both design and implementation let me follow those details through to the working experience.

Deciding where the website should stop.

The most consequential implementation decision concerned the boundary between the website and Planning Center.

Groups, events, registrations, and giving funds already lived in Planning Center. I connected those content types to the site so staff could continue managing them in one place.

A group created in Planning Center appears on the website; a closed group disappears. Events arrive with their images, descriptions, and registration links. Giving links select the appropriate fund, while payment remains in Planning Center.

Event information managed in Planning Center appears on the website.

Forms required a different approach.

I initially built custom, step-by-step forms backed by the Planning Center API. They matched the website and let visitors complete a request without leaving it.

During development, I found that the custom forms did not reliably track changes to their definitions in Planning Center. Staff could update a form there while the website continued presenting an older version.

Explored approach: custom Connect forms, later replaced by Planning Center’s hosted forms.

Maintaining both versions would have recreated the dependency on a developer that we were trying to remove. It also introduced the risk of failed submissions.

A cleaner-looking experience was not worth a missed prayer, connect, or baptism request. I changed the approach to open Planning Center’s own forms in a new tab, keeping their definitions and submissions together.

Northpark’s editing interface focuses on page content and sermon uploads.

I applied the same maintenance principle to Sanity. Its editing interface focuses on what Northpark staff need to change: page content and sermon uploads. Recurring information already managed in Planning Center flows into the site automatically.

What the rebuild delivered.

I designed and built 13 responsive pages in about six weeks from the first Figma frame.

The rebuild gives newcomers clearer paths to visitor information and gives members a searchable sermon library and consistent access to events, groups, and forms.

For staff, it removes duplicate entry for four recurring content types: groups, events, registrations, and giving funds. Planning Center remains the place to manage them. Sanity provides a focused space for website content and sermon publishing.

The operational change is central to the design: keeping the website current should fit into the church’s existing work.

What Northpark proved for me.

Northpark showed me that I could carry a project from its initial scope through design and implementation, using AI-assisted development to build and refine the working site.

The responsibility extended beyond how the pages looked. I had to decide how content moved between systems, which interactions needed more attention, and where a custom solution would create work the church could not sustain.

Those decisions shaped the service I wanted to offer through Sobeit Studio: modern, accessible websites for ministries, designed around the people who use and maintain them.

Northpark became its founding project.