Bethany Bible Church

UX Design Internship  •  April 2022 - July 2023

Objective

This part-time internship took place from April 2022 to July 2023. During this time, I was tasked with optimizing the visitor experience across online and in person touchpoints to increase event registration following a church split.


TEAM
• Jake Losen, Supervisor
• Lisa Rice, Volunteer Marketer
• Abigail Lorincz, Designer

ROLE

I participated in all research activities that led to redesigns of our church and daycare websites using ChurchCo and Webflow, respectively. I was also responsible for several graphic design initiatives. This case study covers the work done to improve the church website.

IMPACT
• Mobile responsive design
• 62% faster task completion
• Increase in digital event registrations

Find and Join Groups

• Browse groups by age and interest
• One-click sign up modal
• Full integration with Planning Center

Volunteer

• View opportunities by interest, skill, or age
• Read volunteer responsibilities

Access the Calendar

• See upcoming and past events
• Register to attend and get directions

Watch Live Online

• Livestream on the website, YouTube, or Facebook
• View countdown to the next stream
• Take notes, give, or request prayer

CONTEXT

Performing strategic research following a church split

Bethany Bible Church is a Michigan based church that split in March 2022. Attendance dropped from 300 to 150, resulting in weaker finances, overworked volunteers, and lingering conflict. Before I started my work, I spoke with stakeholders to devise a list of assumptions and constraints to base my research around:

Assumptions

• Past and present church members have different motivations for connecting with Bethany Bible Church
• The website is a primary communication channel for church activities and events
• Users access the website most often using mobile devices

Constraints

• Some users are resistant to change (particularly older users and those affected by the split)
• Limited funding for the project, resulting in a mandatory use of ChurchCo

COMPETITIVE ANALYSIS

Learning how local churches communicate their values online

After speaking with stakeholders, I performed a competitive analysis to understand how non-denominational churches communicate their values online. The goal was to uncover how churches strategically leverage websites and mobile apps to connect with local communities.

Goals

• Evaluate how churches communicate their values
• Identify opportunities to optimize Bethany's digital presence

Insights

• UI should reflect church beliefs and culture
• Website page names should be familiar (Jakob's Law)
See Detailed Analysis
A graph comparing and contrasting the user experience of five non-denominational churches.

INTERVIEWS

Understanding the context of the split with interviews

Once I knew how local churches use their websites to engage the community, I conducted open-ended interviews with Bethany members to understand their perception of the church split and how this influences their interactions with the website. A few patterns emerged from these discussions:

"I can never find what I am looking for. Things aren't grouped together logically."

Overwhelmingly, people told me they desired to use the website more but found it difficult to find information and complete routine tasks. In many cases, I found that many users would abandon uncompleted tasks on the website and seek in-person alternatives.

"I don't feel like the website matches our services. Why are there stock photos?"

Most users felt the website failed to communicate the vision of the church. The use of stock photos was off-putting to many because it reinforced that the organization lacked a clear, community-centric identity.

Affinity mapping revealed critical information architecture issues

When searching for patterns and themes in users' responses, it became clear the information architecture of the website would need revision to correct navigational issues and reengage church members with online services.

DEFINING THE PROBLEM

Synthesizing usability issues to prioritize design changes

My interviews gave me first-hand knowledge of specific pages and features that were unintuitive to frequent users of the website. I gathered these issues to discuss with the team which improvements should be made next.

Content arrangement is confusing

• Users could not differentiate between active and inactive events
• Users disliked having to open a Google calendar for event details

Current UI does not reflect church identity

• Users said the stock photos felt impersonal
• Some individuals felt the UI mismatched their in-person experience

Missing features leave user goals unmet

• Users wished they could filter sermons and groups
• Users desired a "virtual bulletin board" that felt more familiar

Sitemap

Revising the information architecture to mirror user flows

Knowing navigational challenges were problematic for church visitors and members, I developed a sitemap to restructure how the website pages are grouped. The new information architecture closely models the typical journey visitors take when they connect with the church in-person.

Goals

• Recategorize and group similar content
• Plan for high-level user flows

Insights

• Pages should target members or visitors
• Home page should display dynamic events and news

Structuring new page layouts with a wireframe deck

With the sitemap finalized, I had a list of pages to design, but still lacked insight into users' preferences for the appearance and functionality of each page. I invited a few users to arrange wireframe cards, enabling us to create low-fidelity blueprints, identify potential usability issues early, and reiterate our solutions as discussions revealed more information.

Prototyping

Preparing a ChurchCo prototype for testing

Having identified the website's issues and ideated low-fidelity solutions, I then created a prototype to validate our decisions with end users. My preference would have been to prototype using Figma or Adobe XD, however, ChurchCo had several development limitations. To avoid designing solutions that couldn't be implemented, we decided to work directly in ChurchCo. Wherever possible, I used low-fidelity assets to speed up the prototyping process.

Dashboard mockup
Dashboard mockup

Original Home

Ideally, the home page should welcome visitors, display service times, communicate core values, and provide a clear path for contacting the church

Pros

• Quick access to livestream, about us, and preregistration
• Clear welcome message and display of service times
• Hero image shows the church building

Cons

• No clear path for members seeking to join a group
• Images are outdated and do not reflect church split
• Some text is illegible due to poor color contrast

Revised Home

The redesign is more community-focused. Easy access to events, in card and calendar form, allows the user to explore what's happening at Bethany without switching pages

Pros

• Dynamic list of events promotes community involvement
• Quick access to livestream, sermons, events, plan a visit
• Subnavigation bar enables faster browsing

Cons

• Text overlaid on images weakens accessibility
• Multiple call to actions may distract users
• No welcome message for visitors
More ui comparisons
Dashboard mockup
Dashboard mockup

Original Sermons

The sermons page allows members to catch up on recent messages and visitors to explore past teachings before visiting in person

Revised Sermons

The redesign is more flexible. Users can now listen on multiple platforms or access the archives to lookup specific sermons
Dashboard mockup
Dashboard mockup

Original Sermons

The sermons page allows members to catch up on recent messages and visitors to explore past teachings before visiting in person

Revised Sermons

The redesign is more flexible. Users can now listen on multiple platforms or access the archives to lookup specific sermons
Dashboard mockup
Dashboard mockup

Original Plan a Visit

The plan a visit page should empower first-time visitors to attend an upcoming service with realistic expectations

Revised Plan a Visit

The redesign equips visitors with knowledge of church beliefs, directions, service times, and programs for kids

User Testing

Validating the design changes with usability testing

I conducted usability testing with 5 individuals, ages 30 to 67. Testing covered task completion, first impressions, perceived ease of use, and suggestions for improvement.

View Testing Form

Revising elements based on user feedback

Streamlining the in-person experience

Following the same human-centered design process as the website, I updated the bulletin to improve how information about upcoming events is communicated in print form. I simplified the layout, grouped similar content, highlighted salient announcements, and improved legibility. Of the 5 individuals I asked for feedback, 100% preferred the new design.

Original Bulletin

Revised Bulletin

Dashboard mockupDashboard mockup

Church Map

Daycare Map

Dashboard mockupDashboard mockup

Lessons Learned

Reflecting on my internship: A tale of constraints

1. Design a sustainable, scalable solution. Designing a website for multigenerational users with strong emotional ties to the organization was challenging. The project pushed me to consider how changing the logic behind existing user flows would affect members' interactions with the church. I tried my best to present a design that functioned well while still feeling familiar. This presented a tradeoff between novelty and consistency.

2. Use feedback to uncover personal limitations. Throughout my internship, there were times when I thought I knew how to go about solving a problem, but then I would discuss my approach with users who would provide a perspective that challenged my own. By seeking feedback in all phases of the design process, I was able to develop designs that better reflected what users truly wanted.

3. Define what success looks like early. Having to use ChurchCo's website builder forced me to make several compromises. If I were to start the process over again, I would spend more time testing the boundaries of the website builder to understand my constraints. Nevertheless, these challenges reinforced the importance of communicating with your team early and often to ensure the designs can be successfully implemented as planned.

I appreciate your time!

To everyone who has ever read, critiqued, or shared my work - thank you.