Improving Community Engagement with Digital Platforms

This case study details the comprehensive process involved in redesigning Saint Elizabeth Parish's website, which serves three distinct communities. This included identifying the old website issues and user pain points, defining target users, creating user personas, and enhancing information architecture.

It Started With Curiosity

I decided to join the Media team as a volunteer website designer at Saint Elizabeth church in Milpitas in the third week of January 2018 after they introduced an app named "myParish." I had learned about UX/UI design for mobile apps at Mission College a few months ago, but I did not have a chance to hand in an actual application used by the Catholic community. Cool! I wanted to learn. 

I was curious and excited to discover how the app could improve users' religious lives. Through the app, I visited my church's website. The website was outdated, malfunctioning, and slow. I was also frustrated by the misleading interaction, design, and lack of necessary information. I wanted to challenge myself and apply fresh knowledge from website design and UX/UI design to this large-scale project. Hence, I emailed the Media team to introduce myself and asked to join them. 

After talking with a team member who was managing the website, I found out the person who built the website years ago was no longer available to help, and they did not have a technical person to fix these bugs. Mr. Nghi was the main person who took care of all digital media activities. When discussing the church website, I felt complete sympathy for his duty in managing and updating the website weekly by editing raw HTML pages without coding background knowledge. Such a difficult job and this technical burden should not happen for a big organization! Therefore, I decided to contribute my time to improving digital communication and website management to the next level.

Overview of the Saint Elizabeth Church Community 

In 2018, the church had over 35 groups across three languages: English, Spanish, and Vietnamese, with a total of more than 2,000 parishioners. Approximately 700 students, aged 5 - 15, attended Religious Education in the three native languages. Among them, around 300 Vietnamese students stayed after school to join the Vietnamese Eucharistic Youth Movement (or TNTT) and attend Saturday evening mass.

The Problems

Here are the key issues of the old website:

Difficult to Manage and Update: The static website required direct content editing from the code editor, making it challenging for the non-coder web publisher to handle this task weekly.

Unreliable Hosting: The website was hosted locally via Comcast, leading to frequent downtime during adverse weather or power outages.

Lack of Content: The site provided insufficient information about Catholicism and offered no guidance for parishioners on life stages.

Misleading Design: Call-to-action (CTA) buttons and decorative items were similar in shape and color, causing confusion.

Confusing Navigation: There were two contact pages with the same label, "Contact," which confused users about which form they needed to use.

Malfunctions:

• Six out of 26 links from the navigation menu were broken.

• The search engine did not work.

• The contact form failed to detect incorrect email formats or send submission confirmations.

• The footer was misplaced in the middle of some pages, covering part of the content.

Besides, the office opening hours (Monday - Friday: 9:00 AM - 4:00 PM) were inconvenient for those who work 9 to 5.

Other Churches’ Websites - Focus On The Good

Define Target Audiences 

After conducting hallway interviews with parishioners after Sunday mass, I gathered their needs and wants, which led me to narrow down to two main target users who I believed would use the website the most: parents and new parishioners.

Solutions

1. Content Management System (CMS): 

The static website will be replaced with a WordPress CMS website, using the Theme 2018. This platform is easier for non-technical staff to update and manage.

2. Enhanced Content: 

The website will offer more resources, especially regarding the Sacraments. This section will have detailed information on:

. Converting to Catholicism

. Registration forms

. Contact details for each departmental coordinator

. Step-by-step details and instructions for receiving each Sacrament, from newborn to funeral.

3. Religious Education Resources: 

Common Prayers will be available in three languages (English, Spanish, and Vietnamese) to assist students and new converts in learning at their own pace.

4. Downloadable Forms:

For the convenience of parents, all registration forms for Religious Education will be available for download.

5. Homepage Content: 

Mass times, reconciliation, and special event schedules (e.g., Christmas, Easter) will be prominently displayed on the homepage for easy access.

The homepage will also showcase the weekly bulletin and other relevant posts.

6. Connecting the Community: 

Our church has over 35 groups across three language communities: English, Spanish, and Vietnamese. The website will list all groups and activities, along with the coordinators' contact information, to facilitate new parishioner integration.

7. Supporting the Community: 

The website will offer resources about social support groups and services available to those in need.

8. Contact: 

The Contact form is simpler, straightforward, and less hassle for users to leave their message.

The footer has the office's open hours and connects with Google Maps to help new visitors get directions more easily. 

The Struggles Behind the Scene

Redesigning the church website was a good experience in soft and core skills. It took a lot of work to organize a large website with multiple communities and group activities. 

When I began the project, the office staff was also undergoing personnel changes, which presented an initial challenge in gathering the necessary information and resources for the website.  

I can't recall how many times I revisited the initial phase of defining problems and redesigning the information architecture. Numerous questions arose: Who were the target users? Did the website sufficiently address their needs and goals? Was the information architecture, sitemap, and user task flow logical? What information should be included, and what could be removed?

The website took 8 months to complete. Building a site using WordPress was relatively easy, but putting the puzzles together required considerable time to think and plan carefully.

Launching Update

The site was launched on August 8, 2018, with some benefits:

- Using CMS WordPress allows noncoders to manage, edit, and update the information on the website more easily without touching any backend code.

- The information is helpful and convenient for three types of users: parents who have children attending religious education, converters, and new parishioners. 

- During the COVID-19 pandemic, Governor Gavin Newsom ordered all Californians to "Shelter in Place," leading to the closure of all churches for almost two years. The peak of the deadly disease occurred during the Holy Week and Easter events in 2020. The website allowed staff to easily make changes on the homepage without requiring coding knowledge. Additionally, parishioners could safely practice their beliefs by attending online mass at home and receiving updates from the church and the Diocese.

- The CMS system allows connecting with other external apps and services directly, such as Online Giving or Venmo, which were a significant source of income for the church during the two years of shutting down.