top of page

Christ Community Church
Montreat (EPC)

Website Redesign

Christ Community Church: Montreat is an Evangelical Presbyterian Church (EPC) located on the campus of Montreat College in North Carolina. They value their community outreach, youth programs, and supporting mission work worldwide.

CCCM stacked logo.png
Gaither Hall.jpg

Opportunity

The communications coordinator of the church approached our team with two issues: an existing reputation of being the “rich” church in town, and their website not being as easily accessible for the elderly congregants, who may not be as “tech-savvy”. As the UI Lead, my design goals were to better tell the story of who they are and their “vibe” so they are more welcoming to newcomers, especially college students, and to create a more user-friendly website for their older members.

My Tools

  • Comparative Analysis

  • Competitive Analysis

  • Style Guide

  • Design Studio

  • Sketches

  • Wireframes

  • Prototyping

  • Figma

My Role

UI Design Lead

My Team

Abby Smith

(UX Research Lead)

Tanaira Morgan

(Information Architect)

Constraints

Desktop Website

Squarespace Hosting

Timeline

2.5 Weeks

Final Prototype

Click on the image below to view

Redesign MacBook Pro 16.png

Current Homepage

Site Audit

After meeting with our client and discussing the problems they were facing, my team evaluated the current site by comparing its layout and features against websites from other churches and community-centric organizations to see what they did differently. This would also allow me as the UI lead to analyze what design decisions others made that could possibly benefit our client. Some of these design takeaways were:

C+C Analysis (2).png

[Homepage Header]

The denomination of the church was initially unclear

Depending on the monitor size your navigation bar changes from a drop-down menu bar to a hamburger menu, which is a three-lined collapsed navigation bar (circled)

Site Evaluation.png
  1. Inconsistent button sizes

  2. Inconsistent fonts & font sizes

  3. Multiple buttons near each other for the same thing

  4. Multiple addresses, some without labels

Overall, there was no clear organization on the homepage.

Current Site
190922+CCCM+JN-0017.jpg

What's It Like?

After examining other sites, our researcher surveyed 28 people to learn about demographics, how often they visit the website, and what they go onto the website forWe then interviewed 7 of those people to learn what is important to them in church.

 

These participants were asked to complete 3 tasks on the current site to find specific pain points in their experience. As they were completing these tasks, we also asked them questions regarding what is important to them about the church and how they would describe it. This would tell me which specific features and tasks I should design for and what emotion I was going to drive. These were the following tasks:

Find Sunday Livestream

Sign-Up for Volunteer Opportunities

Find Sunday School Classes

Research

What We Learned

Website Activity
  • 77% of participants stated they visit the site for the Sunday Livestream

  • 69% visited to learn about upcoming events within the Church
Unclear Labeling
  • Users stopped at 3 different places for Livestream, with the longest search time of 4 minutes

  • Users consistently had to search around the website to find how to volunteer 

  • There was confusion with “Need Help” and “Sunday School” menu categories

Desired Qualities
  • Participants desired a sense of belonging, whether it be through shared beliefs, or personal invitation to attend the church

  • Having a church within close proximity was important to them

  • They valued the aesthetics of both the church and its website
  • They wanted opportunities to give back to the community and stay involved
Outdoor Worship Footage.00_00_25_39.Still012.jpg

Who We Are Desiging For

To help us get a better picture of who would most benefit from our solution, we decided to create 2 personas that represent your target users. Their desires and frustrations were formulated based on the survey and interview responses from current members of the church and individuals outside of the congregation, which were synthesized through affinity mapping to create categories that encapsulated the core values that both demographics had.

Our primary users would be current congregation members who are already using the current site on a regular basis, while our secondary users would be potential newcomers who were looking for a new church to attend.

“As part of my faith, I want to participate in the activities of the church to make sure that we continue to enforce our faith and help our fellow families that need it”

Barry.jpg
Barry_edited.jpg

Meet:   Barry
(The Current Member)

  • Has been coming to the church with his family for years, and takes pride in now being considered an elder. He’s very ingrained in the church community and welcomes new attendees

  • Motivated to feel connected to his fellow church members and the community at large.

  • Is thankful for the Sunday live stream option since Covid, but is technically challenged. It takes him time to get the hang of navigating websites.

  • If he has any questions, he is more likely to call someone at the church rather than go online

Natalie_edited.jpg

Meet: Natalie
(The Newcomer)

  • Has been going to the same church since she was young. Recently moved, and looking for a new place to call home.

  • Her faith is important and it’s important to choose a church with the same beliefs that she has, as well as welcoming and accepting of different people.

  • She uses church websites to gauge the environment and see if it's fun, and vibrant, with ample opportunities to volunteer and participate in different activities.

  • Frustrated by websites and apps that are overwhelming to use, and require spending too much time to find what you are looking for.

“I am swayed by the general ambiance, whether that be the architecture or the vibe of the community. If the vibe of the actual parish is not right, it puts me off.”

Natalie.jpg
Exterior Shot.jpg

The Challenges We Needed to Address

Barry.jpg
Natalie.jpg

Barry needs a clear way to find what’s going on in the church so that he can stay involved in the community by giving back and helping his fellow members and newcomers feel welcomed.

Natalie needs a way to determine if a church has a diverse and inclusive community that aligns with her beliefs and feels vibrant because she wants a place that feels welcoming.

So How Might We...

Keep

Members and nonmembers engaged

Highlight

The beliefs of the church in a beautiful and welcoming way

Increase

Engagement in the church that will encourage members to become more active in the community

When going through possible solutions we noticed that all of our ideas encompassed 3 main things:

Engagment
Welcoming
Community
kelly-sikkema-huT1A8nW_Ho-unsplash.jpg

The Site-map: Before and After

Now that we honed in on the challenges our users faced, our information architect redesigned the parent categories and subcategories of the current site’s navigation into a revamped site map to lay out the hierarchical organization of the website. She achieved this using an "open card sort", a research tool that has participants organize items from the site, sort them into categories, and label those categories.  This new map would provide the “skeleton” for my redesign.

Design
Outdoor Worship Footage.00_06_22_00.Still008.jpg

BEFORE

Site Map - Preliminary.png

AFTER

Site Map - After.png

1.

2.

1.

2.

The primary navigation categories in dark boxes (community, discipleship, membership) indicate primary navigation changes.

Yellow highlighted subcategories also indicate subcategory changes.

Researching Accessibility

 With my site foundation solidified, my next step was to research web accessibility for the elderly community before beginning any initial visual designs. It was important for me to learn what limitations and challenges existed when it came to older people using the web, and how I could solve those problems before developing a design solution. I used the following resources to fully understand the topic:

  • Accessibility best practices and Web Content Accessibility Guidelines (WCAG)

  • Analyze the effectiveness of Color choices and combinations

Takeaways:

  • The majority of the site's color combinations were a failing grade regarding WCAG, meaning that using them wasn't advisable for those with visual impairments.

  • The ideal font size for the elderly demographic is a minimum of 19 pixels or 14 point.

  • Sans Serif fonts are the most effective for legibility when using the web.

Image by Balázs Kétyi

Style Guide

After establishing accessibility guidelines, it was finally time to start designing. In order to begin, I created a rudimentary style guide to specify what aspects of the church’s brand I needed to consider.

SlideDeckSwatches.png
CCCM Cross.png
Font Guide.png

Brand Colors

Site Fonts

Logo

Long Green Button.png
Realm Sign-In Button.png

Buttons

Design Goals

Livestream

Make accessing the Livestream footage easier

Branding

Utilize brand colors and font families

 

Clearly display the church logo

Vibe

Create a homepage that is clear, inviting, and accessible to the elderly

 

Include what they are about and how to get there

 

Keep the “Donate” footer

PXL_20220624_140406606.jpg

Design Studio

For this next step of the iteration process, I chose to run a design studio based on guidelines from Nielsen Norman Group and involve our client in ideating solutions. A design studio is a type of UX workshop that combines divergent and convergent thinking; it allows UX designers to explore a broad set of ideas and create a shared vision to move forward quickly. It incorporates brainstorming, critique, and prioritization into one condensed session. Our version of the design studio was a bit shorter than my reference due to scheduling conflicts, but we completed enough of the exercise to generate several ideas.

 

Round 1:

8 Ideas in 5 minutes

Design Studio 1.jpg

Round 2:

1 Big Idea in 5 minutes

Image from iOS.jpg

I wanted our client to be included in this exercise because I felt it was integral in creating a connection between them and the redesign, as well as fortifying a sense of trust with our team. The activity was ultimately successful at achieving both of those goals, and despite their claims of "not being artistic", the client was still able to come up with ideas that I would later incorporate into the final version.

Framing the Solution

With the sketches from our design studio to reference, I built several wireframes, or basic grayscale images of what our final product could potentially look like, using the program Figma. Within these, I included design aspects contributed by our client such as photos from the church and related events, and three blurbs that give the viewer concentrated information on what the church is about and where to find them.

Homepage Wireframe.png

1.

2.

1.

Logo is front and center

2.

Navigation menu spans across the entire page and contains large “Livestream”  and "Bulletin" buttons for visibility

3.

Search bar to quickly locate any site information using on keywords and phrases

Search Bar.png

3.

Homepage Wireframe.png

4.

4.

Alternating breakdown of Who the church is, What they’re up to and Where they are, along with photos

5.

Footer only contains donation option as well as a clearly labeled list of contact information

Homepage Wireframe.png

5.

Gaither Hall.jpg

Preliminary Color Prototype

From the wireframes, I incorporated the brand colors and populated the pages with photos. It was important for us to have a higher fidelity prototype before user testing because we wanted to measure whether or not the "vibe" of the church was achieved through the design.

1.

2.

V1 Hi-Fi Prototype.png

1.

2.

1.

Full-Color Homepage - Maintains brand colors and fonts adjacent to original brand fonts

2.

Color combinations are adjusted as well as font sizes for accessibility

3.

Photos of the church accurately portray the parish and create a sense of welcome and familiarity

V1 Hi-Fi Prototype.png

3.

V1 Hi-Fi Prototype.png

4.

4.

Clearly organized and labeled contact information

5.

A map included for location clarity

V1 Hi-Fi Prototype.png

5.

V1 Hi-Fi Prototype.png

6.

6.

Scroll to the top button to help reorient visitors

Version 1

Testing, Testing...

 We conducted two rounds of usability testing on our color prototype, with 1 round = 5 test participants exploring the color prototype to see if the site was perceived as welcoming and if the color combinations and font choices are legible. Each round had its own set of criteria we measured our prototype against, to see if the new redesign was effective in achieving our goals.

5 “Newcomers”

1st impressions

Watch service on Sunday

Learn about upcoming events

3 words to describe CCC

Would they visit?

5 Current Members

1st impressions

Watch service on Sunday

Learn about upcoming events

Find membership portal

Outdoor Worship Footage.00_00_01_49.Still011.jpg

Did It Hit the Mark?

Vibe

3 "Newcomers" used the term ‘Welcoming’

Livestream

10/10 participants found the live stream on their own
 

On a scale of 1-5 (1 = difficult, 5 = easy) 100% of participants rated the experience a 5/5

Membership Portal

Only 2/4 of current members rated the new location of the portal a 5/5 on our 1-5 difficulty scale

 

One member could not locate it

Likelihood to Attend

3/5 “Newcomers” said they would visit the church if they were in town

Upcoming Events

Over 50% of participants looked for events under the community tab

2 “Newcomers” thought the newsletter link would lead them to an email sign-up

Font

0 Participants had issues with reading the text

2 “Newcomers” felt the font was a little dated

The Final Revamp

Click Here to Interact with the Prototype
Final