Redesign Saint Elizabeth Church's Website

Identifying the website's problems, defining target users, creating specific personas, information architecture, user task flow, website wireframe and layout, and color theme to redesign Saint Elizabeth Parish's website.

It started by curiousity

I decided to join the Media team 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, 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.

The Problems

As I mentioned earlier, Mr. Nghi was not a coder, and this static website is not friendly for a nontechnical user to update. It was a major hassle for him, and it's insecure because a small mistake can affect the entire page.

The website was hosted at his house using Comcast. Whenever there was heavy rain or storm, or there would be an electrical outage, the website would be down.

Furthermore, the church website lacked information about Catholicism and didn't offer guidance to parishioners on life stages. 

Saint Elizabeth is a big community with three main languages: English, Spanish, and Vietnamese but their office hours (Monday-Friday, 9:00 AM to 4:00 PM) are inconvenient for working people. 

Overview Of The Old Website

The church website had 26 pages in 9 categories with a few functions and display problems.

Functions problems:

• There are six pages of broken links.

• Carousel does not load after going back to the homepage.

• The search engine on the Sunday Bulletin page does not work.

• Dropdown navigation is not automatically closed when users visit the page.

• The Contact form doesn't alert if the user fills in the incorrect email format. 

• After clicking on the "Send" button, there isn't any notification to confirm that the user has successfully sent the message.  

• It takes too long to load the website. 

Display problems:

• The footer is misplaced in the middle of some pages and covers part of important information. 

• Misleading users by having a background for short instructions with a similar look to a button. 

• The two Contact pages that are not clearly labeled. The second Contact page with a bright yellow background hurts the eye.

• The website provides its address on the Contact page with missing the extension (https://stelizabethmilpitas.)

Other Churches’ Websites - Focus On The Good

Define Target Audiences 

This website has two main goals: to provide comprehensive information about the church and the Catholic faith and to offer parishioners a convenient way to download necessary forms or look for resources about Catholics at any time and anywhere. With these goals in mind, we focused on young adults and parents as our target audience.

Solutions

1. Content Management System (CMS): 

The static website will be replaced with a WordPress CMS website. 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 information for the person in charge

. 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 pandemic of COVID-19, Governor Gavin Newsom ordered all Californians to be “Shelter in Place,” and all churches had to remain closed for almost two years. The peak time of the deadly disease happened during the Holy Week and Easter events in 2020. The website allowed staff to make changes on the Home page easily without involving coding knowledge. Additionally, parishioners can safely practice their beliefs by attending online mass at home and getting 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.