Back
desktop website macbook mockup

Church Without Borders Website Re-Design

Project Overview

Project Date: 2023

It has been many years since Church Without Borders first launched their website. Over that time the site has undergone change but never a full re-design. It was my task to update the site content and visual design and to improve its usability.

As the sole UX/UI designer, I was responsible for all of the research and design for this project. I started with user research, a usability heuristic evaluation, and a usability test. I did this to empathize with the site users and to identify the pain points worth addressing in the re-design.

With the invaluable insights gained from this research, I began the iterative process of prototyping and testing design solutions until the desired outcome was met. After the design was finished, I coordinated with the church pastor and a photographer to update the site's written and visual content.

Pain Points

  1. Community group sign up
  2. Membership class sign up
  3. Latest sermon video

Empathize

Developing personas

Before I began designing the website, I first created three personas based on the user research. Each of the three personas represents a type of person who is likely to use the church's website. There are three main groups that were identified through the research.

  • Newcomer Nate: Those who are new to the church
  • Member Mary: Those who are active members in the church
  • Leader Larry: Those who serve in a leadership role at the church
Personas.pdf

Define

Usability Test and Evaluation Results

After conducting a usability test with 5 participants and a heuristic evaluation, 5 main usability issues were uncovered. These 5 issues were addressed in the re-design.

  • 80% of the participants in the usability test had trouble signing up for a community group
  • 60% of the participants in the usability test struggled to find the membership class sign up page
  • 60% of the participants in the usability test had trouble finding the latest sermon video recording
  • 80% of the participants said the website does not have enough pictures of the church
  • Consistent signifiers for clickable elements on the site were not used

Prototype & Test

01. Community Group Sign Up

Original Design

80% of the participants in the usability test had trouble signing up for the community group. In the original design, all of the groups lived on one page with one sign up form. The images were used as links to purchase the study guides.

Image of the original site for the community groups page
New Design

In-order to fix this issue I created a separate page for each group. Each page has a sign-up form, basic information about the group, and a link to purchase the study guide.

After creating the initial prototype and testing it with a few users, I confirmed that all of the users were able to sign up for the group without any difficulty. However, I did get feedback about the label for the study guide link. I ended up changing it from "Link to Study Guide" to "Purchase Study Guide".

Image of community groups page design for prototype View Community Groups Design File

02. Membership Class Sign Up

Original Design

60% of the participants in the usability test struggled to find the membership class sign up page. In the original design, the membership page could be accessed only on the home page; it did not live in the global navigation. Also, some participants thought there was not enough information on the class.

Image of the original design for the membership class sign up page
New Design

In the first prototype I created, I moved the membership page to the global navigation so that users could find it easily. However, after testing I realized that this drew more attention to the page than was needed. Since the membership page is not frequently visited it does not make sense to put it so high on the navigation hierarchy.

map of the first site navigational hierarchy I tried

After conducting a card sorting activity with users, I decided to change "Ministries" to "Get Involved" and to move the membership page under this group.

card sorting activity card sorting activity
information architecture revised membership page final design

03. Latest Sermon Video

Original Design

60% of the participants in the usability test had trouble finding the latest sermon video recording.

Additionally, three of the participants expressed frustration with the lack of dates and labels for the sermons. And two of the participants expected there to be video recordings on the sermon page and were surprised to find only audio files.

design for the sermons page on the original site
New Design

To address this issue I included the most recent sermon video on the "sermons" page, with a clearly marked label. I also included dates for all the sermon series and links to both the video and audio files.

This solution worked very well upon further testing. All of the participants found the video within 5 seconds without any difficulty.

However, I realized that users were trying to click on the images, so I added a link to the YouTube and SoundCloud playlist when the user hovers over the image.

new design for sermons page

Reflection

This was by far the most thorough usability test that I have facilitated.

I found it very interesting that the main issues I uncovered in the usability test were issues that I had identified in the heuristic evaluation. And although I uncovered many more issues than I expected, my time constraints forced me to choose the three issues which had the most impact.

Looking back on this project, I am pleased with the outcome and with how the design process went.

Top of Page