Role: UX Designer
Tools: Figma, Notion, Miro
Boon Church realized its outdated website was underperforming and failing to meet the expectations of its growing community.
Outdated Design: The old website lacked a modern look, which made the church seem less welcoming and credible to new visitors.
Poor Navigation: Users struggled to find key information like service times, events, or contact details due to unclear structure.
Small, Hard-to-Read Text: Font sizes were too small for many users, especially older members, creating accessibility issues.
Missing Engagement Features: The lack of interactive elements like a chat feature or updated sermon access reduced engagement.
Limited Access to Important Pages: Users had to scroll or click multiple times just to reach commonly visited pages like “Staff” or “Contact.”
Unclear Donation Path: The “Support Us” (donation) button was not prominent enough, leading to missed opportunities for giving.
Lack of Map Integration: No clickable address or location link made it harder for first-time visitors to find the church.
Design a new website that makes it easier for church members and newcomers to:
Quickly access important information (services, sermons, events)
Connect with the church community
Participate in giving and volunteering
Stay updated with church news
Feel welcomed and supported—both in-person and online
The new design also aimed to support church staff with an easier-to-manage content system and a clear structure aligned with modern UX practices.
I began with a review of Boon Church’s existing site to understand pain points and performance gaps. This revealed a lack of clarity, outdated content, and poor accessibility—especially on mobile.
To understand broader church website trends, I analyzed platforms from similar churches, including Anglican Network Church, Spring Church, and HS Baptist Church. This helped identify what worked (e.g., simple CTAs, bold service info) and what didn’t (e.g., cluttered menus, broken links).
I conducted interviews with church members to learn about their experiences using the website. These discussions gave insight into their frustrations, expectations, and emotional needs when interacting with church platforms.
Key User Needs
From research, I identified essential features the site needed:
Clear service times and church location
Updated events calendar
Sermons and online worship archive
Staff directory and church leadership info
Donation (Support Us) functionality
Church beliefs and community service info
Based on user research, I developed two core personas representing primary user types: a returning church member and a newcomer looking to visit or watch a sermon online. These personas guided every design decision.
I reframed the core problems into “How Might We” questions to spark solution thinking, such as:
How might we help users quickly find key content like sermons or staff info?
How might we make giving feel easy and impactful?
How might we support people who are new or hesitant to reach out?
I prioritized a focused set of MVPs based on user and business goals:
Highlight service times and sermons on homepage
Simple navigation with quick access to top pages
Responsive, mobile-friendly layout
Engaging, inviting visual identity
Structure & Flow
I created a sitemap to define the website structure and key content areas.
Then, I mapped user flows to visualize how people would navigate the site—from discovering the homepage to donating, joining a service, or exploring events.
I sketched and prototyped low-fidelity wireframes in Figma for key pages:
Homepage
Service Info
Sermons
Church Activities
Contact & Staff Directory
These prototypes were tested for usability and clarity.
I tested the prototype with five real users and gathered feedback as they completed tasks (e.g., finding a sermon, checking event details, donating).
Fonts were too small to read comfortably
Users weren’t sure if they could click the Sunday Service section to watch sermons
“Support Us” button wasn’t prominent enough
Users wanted quicker access to Staff and Contact pages
Sermon dates were unclear
Users wanted the address linked to a map for directions
Increased font size for better readability
Added clear, clickable sermon CTAs
Made “Support Us” button bold and sticky
Added direct shortcuts to Staff and Contact pages on homepage
Clarified sermon dates and added visual hierarchy
Embedded a map link with the address
“Now I feel comfortable asking questions—I just use the online chat.”
—Church Member
Nonprofit websites aren’t about selling—they’re about inviting, guiding, and building trust
Genuine, warm design goes a long way in user engagement
Usability testing revealed small tweaks that made a big difference
Calls to action are essential for participation and connection
After hearing that users were hesitant to ask faith-based questions in person, I added an anonymous online chat feature—giving people a safe, private space to engage.
The redesigned Boon Church website provides a stronger foundation for connection, faith, and community building. The new platform is:
Mobile-friendly
Easy to navigate
Aligned with users’ real needs
Welcoming and engaging for both new and returning visitors