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.


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
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:
.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)

-
Inconsistent button sizes
-
Inconsistent fonts & font sizes
-
Multiple buttons near each other for the same thing
-
Multiple addresses, some without labels
Overall, there was no clear organization on the homepage.

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 for. We 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
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

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”


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

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.”


The Challenges We Needed to Address


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

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.

BEFORE

AFTER

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:
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.

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.



Brand Colors
Site Fonts
Logo


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

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

Round 2:
1 Big Idea in 5 minutes

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.

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

3.

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

5.

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.

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

3.

4.
4.
Clearly organized and labeled contact information
5.
A map included for location clarity

5.

6.
6.
Scroll to the top button to help reorient visitors
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

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