St. John Baptist Church – Website Redesign

The Goal

To modernize the church’s website with a welcoming, user-friendly experience that reflects their mission, strengthens community engagement, and makes it easy for members and visitors to navigate, connect, and participate—whether online or on mobile.

Problem

The previous website had an outdated layout, poor mobile responsiveness, and a confusing navigation structure. Key features like event updates, ministry info, and online giving were difficult to find, leading to lower engagement and accessibility issues for both new visitors and long-time members.

Solution

I led a full UX redesign, creating four homepage layout options focused on simplicity, clarity, and mobile optimization. Through interactive Figma prototypes, I tested different menu styles, restructured the site’s information architecture, and designed a clean, modern interface that supports the church’s values. A structured feedback loop allowed leadership and community members to help shape the final design, ensuring alignment with real user needs.

Role

UX Designer & Creative Director

Timeline 

March 4 - April 2, 2025

Tools

Figma

Adobe Photoshop

Adobe Illustrator

Realm

Team

Just Me!

Setting Expectation

This project was a collaborative, iterative redesign focused on clarity, accessibility, and community input. As the sole UX designer and creative lead, I worked closely with church leadership to identify pain points, explore design directions, and test navigation patterns. The goal wasn’t just a visual refresh—but a thoughtful user experience that serves both first-time visitors and longtime members. Feedback was central to the process, and each design decision was made with usability and inclusivity in mind. What you’ll see here is the first iteration—clean, functional, and ready to grow with the church’s evolving needs.

Research

Before jumping into design, I conducted foundational research to understand the needs of both church leadership and the broader congregation. The research phase focused on identifying key usability issues, content gaps, and missed opportunities for engagement.

User Pain Points Identified

  • Difficult navigation and buried content
  • Non-responsive mobile design
  • No clear calls to action for donations or event participation
  • Outdated visuals and text that didn’t reflect the church’s warmth or mission

    • Key Activities

  • Stakeholder Interviews: Met with church leaders to understand their vision, priorities, and challenges with the current site.
  • Content Audit: Reviewed the existing website to map out structure, assess outdated content, and note areas lacking clarity or relevance.
  • Competitive Analysis: Studied websites from other churches and nonprofit organizations to gather inspiration and benchmark design standards for faith-based digital experiences.

    • Insight Summary

    Members wanted a website that felt welcoming, was easy to navigate, and offered quick access to service times, ministries, and ways to get involved. Leadership needed a platform that could grow with the church and better support outreach.

    This research directly informed the content strategy, layout choices, and interaction design presented in the first round of prototypes.

    Design Process

    My design process for the St. John Baptist Church website was rooted in human-centered design principles and focused on delivering clarity, warmth, and accessibility for users of all ages and tech experience levels. I followed an iterative workflow, allowing space for stakeholder feedback and refinement

    Define

  • Analyzed stakeholder goals and user needs gathered during research
  • Identified core content priorities: worship services, ministries, giving, events, and community outreach
  • Outlined technical requirements for responsiveness, clarity, and future scalability

    • Structure

  • Developed a new information architecture to streamline navigation and eliminate content clutter
  • Reimagined the homepage to serve as a dynamic hub with clear calls to action and quick paths to high-interest areas
  • Designed navigation variations to test menu behavior and user preference

    • Prototype

  • Created four unique homepage mockups with varying menu styles (left-fixed, top-centered, top-left, hidden pop-out)
  • Used Figma to build interactive, scrollable prototypes with early visual identity and content layouts
  • Focused on readability, simplicity, and engagement

    • Text & Refine

  • Developed a feedback form with targeted UX questions on layout clarity, navigation ease, and tone
  • Shared prototypes with church leadership and select members to collect impressions and preferences
  • Used feedback to identify the strongest layout direction and fine-tune details

    • Prepare for Launch

  • Outlined next steps for content population, testing, and rollout
  • Provided guidance for user onboarding and long-term content management
  • Designed with scalability in mind to support future features like sermons, newsletters, and volunteer sign-ups

    • See the Live Site

    © All rights reserved
    Using Format