A social website and app offering Christians a way to connect to a local church and to each other through shared activities.
The Problem
People moving to this area had difficulty finding a church home and connecting with older Christian singles. I felt that a website to address both problems would be a good solution.
Project Type: End to end
Project Focus: Helping older singles new to town connect to a local church and to each other.
Platform: Website/App
Industry: Social networking
Role: Sole UX/UI Designer plus branding (with support from a mentor and group crit sessions)
The Challenge: To place finding a local church and finding a shared activity all in one place.
The Solution: A website and app that fulfilled these two requirements.
Tools: Figma, Figjam, Card Sorting, Zoom, Squarespace
Duration: February 2023 to July 2023
*Click Guest or Join to begin and follow arrows
My Community
Tennessee is located in the Bible Belt, so most people here are Christians. There is nearly a church on every corner, and one street near my house has three churches. Read below to find what else makes Nashville special.
Our Nashville Community
In addition to churches, Nashville, TN, is known for its live country music. On a walk through downtown, a visitor can see celebrity nightclubs by Garth Brooks/Trisha Yearwood, Kid Rock, and Miranda Lambert, to name a few.
Newcomer Statistics
According to Nashville area Chamber of Commerce, the MSA (metropolitan statistical area) added 31,000 to its population in 2023 giving Nashville the 12th highest population increase in the US.
That translates to about 66 people a day moving to the Nashville region.
The Nitty-Gritty
Even with numerous churches and choices in entertainment, the newcomers I met were having a difficult time making meaningful connections and building a strong community.
The Journey Ahead
This project seeks to help people connect with their local church and through shared activities. Below is a table of contents to mark the journey ahead.
Table of Contents
Competitive Analysis
Potential Users of the Site
More Potential Users plus Interview Questions
Affinity mapping
How Might We
User Flows
Low-Fi Wireframes
Design and Branding
Mood Board and Color Palettes
Mid-fi Wireframes, Desktop
Component Design
Component Library
Usability Testing Results
Mid-fi Wireframes, Mobile
Feedback and Iterations
Final Results, Desktop and Mobile
Final Thoughts
Research
Competitive Analysis
To begin the case study, I wanted to know how current competitors addressed the problem of connecting others to local churches and to their communities. I learned that competitors excelled in connecting people to each other, but fell short when connecting people to local churches.
Nextdoor.com connects neighbors through:
community events
items for sale
neighborhood safety warnings
recs on service providers
A few church recommendations
Meetup.com connects people through:
tennis
and more
hiking
kayaking
A few Christian meetup groups available
Facebook.com connects neighbors through:
outdoor activities
and more
post sharing
cooking
Active Christian groups found by searching
Potential Users of the Site
I wanted to learn more about the people in my community who would use a site like Christian Connections. Through interviewing, I met Carla. Carla is a young single who recently moved to Nashville from Birmingham, AL. Although she is fond of the community here, she would like to make more spiritual and personal connections. I think Carla is representative of the Christian newcomers to Nashville.
More Potential Users plus Interview Questions
A total of sixteen men and women over age 40 were interviewed. All were single and identified as Christian. Below is a sample of what two other people might want in a website, plus the interview questions.
-
1) Where did you move from?
2) How long have you lived in Nashville?
3) How many other states have you lived in?
4) Do you have any children? How many?
5) How was this community experience like the others? How was it different?
6) What was the first thing you did with your free time? What was the first question you wanted answered?
7) What question did you want answered for your child, if applicable?
8) Have you been homesick and in what ways?
9) What did you miss most about your home state? How did you fulfill that need here?
10) In terms of internet searches, what was not working?
11) Was there a tool that helped you integrate faster?
12) Give an example of one or two internet sites visited and what they lacked.
Ideation
To create a site for finding churches and activities, I started with an Affinity Map to identify users' needs and challenges.
Affinity Mapping
Some interviewees needs were to:
stay informed of activities
browse local churches online
meet others in person
attend special-needs support groups
attend networking events
know who is attending
have a free site
How Might We
Using what I learned, I created some additional product goals through how might we questions.
How might we:
provide ways for singles to connect with each other in non-threatening ways?
provide ways for health-conscious singles to stay fit in challenging ways?
provide networking opportunities for entrepreneurs?
educate churches on how to attract older singles in significant and lasting ways.
provide a resource that is for volunteer opportunities?
User Flows
To help illustrate the ability to search for a church and an activity, I used two user “happy flows.” One was for finding a church and the other was for finding a shared activity.
Lo-Fidelity Wireframes
Next came the wireframes. The wireframes changed significantly through iterations. In this early example, the various churches were placed in ellipses. The major changes are visible in the mid-fidelity wireframes.
Design
First in a series of designs for the website was the progression of my logo for Chrisitian Connections. My goal was a logo and design that spoke to human connections and friendship. Here are the results.
Design and Branding
Here are the initial sketches for my logo for Christian Connections. The figure on the right is the final version.
For the final logo (1), I traced the shaking hands icon with the Figma pen tool and added the crosses. I used a Figma text-bender plugin for the name.
Mood Board and Color Palettes
Next, came the mood boards. Since users will choose an outdoor activity, I chose the colors of nature. The goal was to set a mood of friendship and connection.
To help narrow the color choices, I pulled all of the colors from the mood boards, resulting in the following palette.
Lastly, I narrowed it to two colors, plus the neutrals, and built the final color palette.
Mid-fidelity Wireframes, Desktop
Below are the first steps in constructing a site that will point users to local churches and activities. The evidence of natural colors and a clean font are visible.
Church Finder, Desktop
From the landing page, users may choose to:
visit a church based on the area of town they have moved to.
connect with others through an activity.
Landing Page
Among the various filters are:
church size
music style
semi-casual or business casual
particular neighborhood
church singles activities
driving distance.
Church Location and Filters
When the user has chosen a church they will see:
hours
address
a map
a gallery of pictures
comments from attendees.
Church Selection
From church selection page, users may
learn more about a member
see activities to explore.
Member Profile
If a newcomer chooses an activity, it will take them here.
Activity Finder
User has made an activity selection at this midway point in this build. This will change later.
Activity Selection
Message Center
Originally, all messages were going to be in one place.
Edit RSVP
User can edit their RSVP on this page. This will change later.
RSVP
After agreeing to attend, they can edit their RSVP and will receive confirmation.
Some navigation arrows available
Component Design
UI Kit
Last in the design series was font selection and UI components. I wanted to maintain a clean look and natural feel, using a sans serif font and colors from nature. I chose the font Inter and contrasting colors burgundy and navy against white for the buttons.
Component Library
Some of these button creations were not used in the final build.
Usability Test Results
After its first construction, the site was ready for testing. Using the laptop version in public libraries in South Nashville, 6 individuals, 3 men and 3 women, were given two timed tasks: (1) find a church and connect with someone at the new church and (2) find an activity attended by individuals met through the church. This helped me to determine if users could find information successfully.
-
Average time taken for both tasks = 11:08
Three men and three women used my laptop and the Figma prototype feature.
The longest average time of 18:23 was on Task 1, as one participant learned the computer and the steps to the tasks.
-
Participant 1
•Task 1 (4 students, 9 questions) 77.83% correct
•Task 2 (4 students, 6 questions) 70.25% correct
Participant 2
•Task 1 (1 student, 13 questions) 38.40% correct
•Task 2 (1 student, 10 questions) 60% correct
Participant 3
•Task 1 (4 students, 9 questions) 77.83% correct
•Task 2 (4 students, 6 questions) 70.25% correct
Participant 4
•Task 1 (1 student, 13 questions) 38.40% correct
•Task 2 (1 student, 10 questions) 60% correct
•Total = 61.62% correct
-
Avg Score among 6 with goal of 100 = 88.5
Imperfect score had mostly to do with unfamiliarity with my laptop.
Mid-fi Wireframes, Mobile
Church and Activity Finder, Mobile
Landing Page
Landing page has changed to a cleaner look.
Church Finder
Mobile version has a carousel for selecting a church.
Member Chat
I liked this idea, originally, but it did not work, logistically and had to be changed.
Activity Finder
Mobile version activity finder has a carousel at the top.
Activity Selection
Users selection will take them here
Feedback and Iterations
What worked, Changes to Make, Questions that came up, and New Ideas
I enjoyed compiling test results and placing them in categories. The categories were what worked, what should be changed and why, questions users had while using the site, and new ideas.
Final Results, Desktop
After testing individuals on my laptop and considering their feedback, I made necessary changes with the following results.
Church Finder, Desktop
You can see that the logo has changed. I moved the buttons from below the images to on top of the images and moved them closer together.
Landing Page
Church Location and Filters
In this frame, I removed the confusing map that was to the right of the first image. I also made the heading smaller.
Church Selection
I did some rearranging on this frame.
Member Profile
Here, I changed the image to an older single to coincide with the original intent of the app.
For real-world reasons, I changed this page and added two separate categories for direct messages and event chat. This page and the following are new additions that work better.
Chat With a Member
Visible Chat
The message is visible here. Once the user clicks send, they will receive a confirmation
Activity Finder, Desktop
Activity Finder
There were no changes here.
Activity Selection
The host was changed to an older-looking host.
RSVP
Simpler approach to messaging was created.
Final Results, Mobile
Landing Page
There have been no additional changes.
Finder
User can choose either activity or church.
Mobile version has a carousel for selecting a church. There is a different filter input.
Church Finder
Member Chat
Messaging changed to include only direct messaging.
Activity Finder
Mobile version activity finder has a carousel at the top.
Activity Selection
Ability to attend, edit rsvp, and to receive confirmation.
*Follow the arrows
Main Takeaways
Nashville, TN, is a sought-after place to live and work. Located in the "Bible belt," church life holds significance. These factors, along with the growing number of older singles, suggest that a site like Christian Connections could be popular. The main goal of the site was to help older singles connect with churches and to each other. I believe Christian Connections has achieved this and would be a good search result for any Chrisitian community. I hope you share this view and have appreciated this journey.