Designing a Church Website & App for 2021
At Arrowhead Church, our two church congregations are unified (doctrine, resources, culture, name) and independent (pastors, governance, missions, community). As I have served at the Morristown congregation as Creative Director and later as Operations Pastor, this unified/independence balance has always been a tricky line to walk. How many Arrowhead websites should there be? Who manages them? Since every Arrowhead congregation has its own sermons, should it have its own app, too? If not, how do we make sure users don’t get confused when they’re looking for a sermon at a particular location? It’s always been a bit messy and for a while, we were ok with that.
But by the end of 2020, it was time to find a permanent digital hub that worked well for our multi-congregational church model. That became one of my major projects going into 2021 that is now complete. If you want to learn how we decided to solve these problems, here is the complete story of our church website and app redesign for 2021.
The foundational goal was Content Localization- a website and mobile app which seemed like it was for your congregation. A massive website that felt small. That’s very much a digital replica of what we are trying to build organizationally- where your local Arrowhead Church feels like the Arrowhead Church (your pastors, your staff, your events, your mission projects, etc.), but still has the benefits of a larger church family (shared doctrine, resources, branding, and administration).
Suppose you’re using the Arrowhead Church app and you attend church in Morristown, Tennessee. If you’re looking for a small group at the Morristown congregation, you shouldn’t have to sort through all the Greeneville groups, too. You should just see the Morristown ones, right? It sounds simple enough. But building a unified website and mobile app that knows what you’re looking for (without requiring an account) is very tricky.
Using a location-based strategy like this is called Content Localization. The result is that, for example, what a person sees on our website changes based on which “Arrowhead Church” is THEIR Arrowhead Church. That was the goal.
Content Localization (Website)
Before this, our two congregations each had a totally separate website. What I wanted to do was to build a new unified website for all Arrowhead congregations to share. Initially, my approach was to build a site where most of the webpages were generic — i.e., it didn’t matter which Arrowhead congregation was “yours” because most of the website would apply either way.
If you’ve clicked around some larger churches’ websites, you’ll see this is how most (if not all) of them work. I call it the “Chick-fil-A” website model, because as far as the website is concerned, the only differences between a Chick-fil-A in Knoxville and one in Atlanta is the building’s location.
Newspring Church in South Carolina is a great example of this, with 14 campuses and one shared (really great) website. It works fine for an “About our Beliefs” page but when you start looking for upcoming events or a group to join, it’s not so simple. You either find way too much (like every event that every campus is doing) or nothing at all (like Newspring’s small groups, you have to request someone to contact you with group info). For us, we also have a different teaching pastor at every location, so add sermons into the complexity, too.
I wanted something a little different than what I was seeing from the big churches. Enter Content Localization.
Content Localization is my favorite feature of our new website that (likely) no one even notices.
It works like this.
If someone in Jefferson City goes to www.arrowhead.church, it loads up the website for Arrowhead Morristown. But if that same person lived in Tusculum instead and they visited the website, it would load up Arrowhead Greeneville’s page. If someone in Talbott clicks the “Connect” button, it shows them the specific ways to connect at the Morristown congregation- not Greeneville. So on and so forth. The website changes depending on where you are.
This is a starting assumption the website is making based on a person’s location. The website is asking, “Which Arrowhead is closest to this website visitor?” and then changing the website’s content in real time, just for that visitor.
To clarify, you can get to everything on the website regardless of where you live, but what web content shows up first is intelligently and instantly chosen based on your current whereabouts.
If you aren’t near any Arrowhead congregation, it loads more general content for all locations.
If that seems at all confusing, don’t worry. When all this works correctly, it’s invisible. When a person visits our site, they don’t realize any of this- they simply find what they’re looking for, and they move on.
It took some time to figure out how to do this. The secret-sauce of our new website is a combination of Squarespace 7.1 (the website) and a tool call GeoTargetly (the location/content brains).
We have been using Squarespace 7.0 since 2014 and have been very happy with their platform. It’s easy to use, it’s endlessly customizable, it looks great, etc.. Are there web platforms with more options and features? Yes. Are there platforms that are easier to use? Yes. But Squarespace continues to be the right intersection of features and ease of use for us. I don’t have time to build a complex and feature-rich mega website. But I still need it to be great at SEO, beautiful, and provide some amount of customization. For the new site, I evaluated a lot of alternatives, but ended up choosing Squarespace 7.1- a much bigger upgrade than the name implies. It just has the right feature mix and the right price for us.
Squarespace Price: $216 per year (includes 1 domain)
GeoTargetly was new to me, but as easy to use as Squarespace. GeoTargetly allows you to map out content based on a visitor’s location (IP address) and then generates the code that you need to plug into Squarespace. It all works very simply and the result feels like magic.
Crucially, this feature is not requesting anything more specific than an IP address. Most IP addresses are about a 10–50 mile radius, an inexact but a general location. This means (a) the user’s privacy is protected and (b) we don’t need to request permission from the user every time that visit a webpage (that annoying “this website would like to use your location” popup). The trade-off to this process is accuracy. Since we don’t know exactly where a user is, there is a chance they may not get tailored content when they should have. The solution to this is to make the website great even if they content isn’t automatically localized, so anything that is automatically localized is a bonus.
After about a month of use, our analytics tell us it’s working. About 51% of our visitors are getting localized content instantly and automatically, with no additional clicking required on their part.
Below is a list of all the places on our new website where Content Localization is in effect:
- Home page
- Connect page
- “Nearest Congregation” blocks
- Contact page
- Giving page
- Sermon page
GeoTargetly Price: $230 per year (includes 240,000 page views)
Content Localization (App)
Our mobile app story is completely different. I’ll start this section out with a story of what could have been and how we adapted.
A few years ago, I approached our client manager at Subsplash with a feature request for our mobile app. Subsplash is the platform that we use for our mobile and TV apps at Arrowhead and we seriously love their company. They had just rolled out their singular “Church App” which could load any of their church clients’ apps instantly within a single app, and it gave me an idea- what if, when a church had multiple campuses, their app asked the user to pick their “main campus,” and then the app would load content for only that church campus. This would allow you to share content between campuses while keeping some content distinct for each campus. I shared this idea with our client manager two years ago and in November of 2020, he called me with great news about it.
The Subsplash development guys had loved my idea, had built it, and wanted to know if Arrowhead would pilot the new feature with a few other churches. I was ecstatic and of course, I said “yes”. Two other churches had already jumped on this feature, too, and their iPhone apps were exactly what I had envisioned. It was perfect.
But it was not to be. In January 2021, I got the new Subsplash bill, and that single feature would include a 600% price increase for us. That meant it was not even in the realm of possibility for our church. I called up our guy at Subsplash and he did what he could, but the advanced feature required a much more hands-on approach from their staff, and it was one that we could not afford. It was not to be, at least not for now. To be clear, I’m not bashing Subsplash at all- I love them and our client manager (I even did a promo video with them a few weeks ago). But my dream solution would have to wait and I needed a new idea.
Knowing that, unlike our website, there was no magic bullet for our mobile app, I started on a total redesign of our app based on an idea from our worship leader in Greeneville, Ben McCrary. In the fall of 2020, as I was mapping out all the digital challenges we needed to solve, Ben said, “You know how Netflix asks you who is watching every time you open up the app? What if the Arrowhead app was like that, and it asked you what Congregation you attended when you opened it up?”
So if we couldn’t do it automatically, Ben’s idea was easily the next best thing and became the basis for the redesign. I mapped out how content would be distributed, where you would have to “choose” your Arrowhead Congregation, and where it didn’t matter and all content could be the same. Thankfully, these were all questions I had to answer months earlier with the website, so mirroring that navigation ended up being the simplest. The app tabs became Teaching, Connect, Resources, and Give.
A New Visual Style
Along with these two changes came one more- the visual style. I wanted our new app to feel like a new app and I was excited to try out some new ideas.
A month ago, my wife and I had written a guide for the interior design of our family home, and it occurred to me that the same principles we had written for our home would actually be really neat in an app interface. Bright interface, bold and black type, lots of negative space, sparse use of bold color, cohesive colors between sections, alternation between photos and plain colors, and crisp lines. It’s a very minimalist aesthetic and I feel a little selfish with the art direction (in that I just made what I personally would want to use).
One of the wonderful things about the Subsplash platform is that it provides a lot of customization. One way we have always taken advantage of that is by designing our own buttons within the app. To get the desired look of this redesign, we created a file in Adobe Illustrator for all the button styles and exported them as JPG assets for the app to use.
My Redesign Principles
In the early stages of our redesign, I wrote out a few principles to guide the process and hopefully make a better product for our church.
Principle #1: Buttons are Buttons
On examining our current website and app, I eventually noticed an issue that I had been blind to for years. As a user, it was difficult to know what was a button and what was not. Let me explain.
For about a decade now, the most popular digital design style is the flat, minimalist style. At Arrowhead, we followed suite and since I personally favor minimalism, I gladly embraced it at the church. Most often it would look like a photo with white, bold text on top.
In design, there’s this concept called affordances — something about how an object is made that shows you how to use it. My toddler has figured out that if a smooth wall has a metal handle on it, it’s actually a cabinet that can be opened. That metal handle is a perceptible affordance and it tells my todder, “hey, this is a cabinet door, pull to open.”
In the digital world, affordances are much more important because digital products are so abstract. When you use a touch screen, you can’t see the millions of transistors reading, writing, and storing the billions of 1’s and 0’s, and even if you could see all that, it wouldn’t make any sense. So over the decades, computers have developed more affordances. Interface design is more consistant, and now everyone, from toddlers to the very elderly, all know how to use an iPad. You tap “add to cart” on a shopping website and *pop* the little shopping cart icon shows a little “1.” Easy peasy. It just makes sense.
On the Arrowhead app and website, I had made the mistake of making many banners and buttons look identical — usually in the style of a photo with white text. It might be the page header that said “Arrowhead Kids” or the square “RSVP your kids” button further down the page, but they both looked the same, stylistically speaking. So there was never an indication of “this is a title” and “this is something you click on.” It was too minimal and likely lost us a lot of engagement.
I wanted to fix this confusion in the redesign. Any link or button had to be indicated as such by an Arrow, a pill button, or an orange underline. The Arrow is the indicator you’ll notice most often.
On the app, almost anything that is tapable has an Arrow with it. The banners on the app are also bold, black text with no photo background. Much easier to get the hang of.
Principle #2: One Congregation, One Page
For the website, I wanted to fit an entire congregation onto one webpage. I’ll go ahead and tell you that I didn’t quite succeed, but the result is still much better than it used to be.
My inspiration was The Village Church in Texas. In many ways, The Village Church has been a helpful model for us to learn from, and their use of webpages for a single campus was exactly what I wanted to do at Arrowhead.
When you load up our Morristown location, for example here’s what loads on one webpage: The live stream, service times, directions, COVID protocols, past sermons, upcoming events, online giving, mission opportunities, staff, elders, ministry info, contact info, and social media pages. It’s a lot! But if you go to the webpage, it doesn’t seem overwhelming at all.
These are the three ways we fit all this into a single webpage: (1) Hierarchy (2) Accordions (3) Tabs.
Let’s start with Hierarchy. I looked at two years worth of analytics data from our church to see what people want to find on our website, using both page views and Google searches. Those top results, the things people search for most, became the order of this mega-webpage.
The next tool is Accordions. These are parts of the page that are hidden until someone clicks on them. When they do, the accordion expands to reveal a lot more content. Our COVID policies, for example. There’s a big orange bar at the top of the page and when you click on it, it grows to fill the entire page with all the details of our COVID safety protocols. Using accordions helps to fit a lot into a small space.
To build these accordions, you’ll need a little bit of custom coding in your Squarespace. In our case, we actually purchased the code from Square Studio (here) for $20. They give you the code and then you can load it as many times as you’d like in one website. I’ve used Square Studio for years and I’ll say the only issue I ever had with them is support. In the last year, I’ve gotten no response from their support chat. All the same, I’ve not had any major issues and I’d recommend their plugins for sure.
The final tool is Tabs. Tabs are similar to accordions, but instead of hiding content vertically, tabs hides content horizontally. For example, when you scroll down to the ministries info section, it starts with information about our Kids ministry, but there are tabs you can click on to change the section to middle and high school students, college students, or adults.
As with the accordion, tabs is a plugin that I purchased through Square Studio (here) for $20 and I use it throughout the website.
You may notice from both of these examples that we actually use accordions within tabs. I wasn’t sure if this would work going into it, but it works extremely well and a page’s content can function more like a menu.
Now in the past, a mega webpage this enormous would take a long time to load. One tool that Squarespace uses to help with this is called Ajax Loading, which only loads content that the user is looking at. In Squarespace 7.0, Ajax Loading was a setting you’d need to hunt down and enable. In Squarespace 7.1, Ajax Loading is built into it by default and is always enabled. This has been great for us because the whole page doesn’t load unless the user scrolls all the way down. It makes the entire website a lot faster for the user. One quick way to see an example of how this works is to have Safari “export as PDF” when you first load up an Arrowhead Congregation webpage — the result is that most of the graphics and images are blank and unloaded.
So what didn’t work? Videos. My hope was to have the full archive of sermons, kids videos, podcasts, and story videos right there in the page. What I found was that I couldn’t get the Javascript to pull anymore than just one of these video playlists, rather than all four. Furthermore, it broke when I tried to hide those videos in a tab or accordion, and I didn’t want dozens of sermons filling up a congregation’s page. If you’re a developer and you know the solution, please let me know! In the meantime, I made each of these video archives its own separate page and linked to those pages from the congregation’s page. No biggy.
Principle #3: Mobile-First
In 2020, two thirds of our website visitors used a smartphone to get there. In the past, I’ve designed our website for desktop and then let the automatic responsive design built in Squarespace do the rest.
This time, I designed in the mobile-view on Squarespace and then checked the desktop version after. Knowing that most of our visitors are using their phone, it doesn’t matter how great the large-screen version looks — they are going to see the mobile format, so why not design a website meant for the small screen? It’s not enough for a website to be responsive — it’s got to be mobile first. I gotta say, it’s not my favorite thing to do, but it makes a lot of sense.
Our Rollout Plan
“Real products ship,” Steve Jobs once said. My goal was to launch these two new updates in a frictionless way for our church. Here’s the rollout process we used for the website:
- Build the new website separate from our current ones
- Replicate all URLs of old websites to the same content on the new website
- Have staff proof and review the new website
- Early Monday morning, switch Morristown’s domain to the new website
- Next Monday morning, switch Greeneville’s domain to the new website
As for our mobile app, Subsplash is designed so that most content can be updated over the internet without requiring a full app update. In that way, making changes works a lot more like updating a webstie. Here’s the rollout process we used for the app:
- Plan out all new navigation
- List all new buttons and graphics to create
- Create all new graphics and upload them to app
- Build all-new tabs (keep them hidden)
- Switch out old tabs for the new ones
- Send request to Apple for app store update (marketing only)
Conclusion: An On-Going Process
I share all of this in hopes that it’ll inspire some new ideas for you and enable other churches to learn from our research. We know that none of this is static — that’s the whole point! Our digital hubs can continue to evolve to be more useful for the people of that time.
But let me know what you think! I’d love your feedback on our project and new ways that we can make it better.
Question and Answers
- How does the new website handle dynamic IP addresses or VCNs? A visitor will see the more generic content rather than the instantly-tailored version. They can still get to absolutely everything, it just may take a few more clicks for them.
- Has website traffic increased? Yes. Our traffic has increased by 29% as compared to the same period last year.
- How can you tell if Content Localization is helping your visitors? One metric that I use for this is page views. Since our total traffic has actually increased, if the new website is doing its job right, we should actually see a decrease in the average number of page views per visit, because that means people are getting to the content they’re looking for faster and with fewer clicks. Sure enough, our page views per visit last year was 2.6, and is now 2.2 per visit.
- How has mobile app engagement changed? One of the main metrics we pay attention to in mobile is App Impressions. This is the number of times a person does something on the Arrowhead app, such as watch a sermon or read a devotional guide. Our app impressions have increased 55% over this time last year and 10% in the last 2 months, indicating that people are using our app in much more regular ways. We don’t know how much of this has been helped by the redesign, but it has not seemed to hinder it.
- Why do you have a mobile app at all? Our mobile app is primarily a media streaming service for Arrowhead content and is the best at that, way better of an experience over social media or our website. At Arrowhead, we produce a lot of media content and the app is the best way to consume that content. We do provide a few other functions on the app, such as joining a small group and signing up for an event, but that’s more for convenience of our users who are already on the app.
- Do you recommend Subsplash for app development? 100%. Their feature set is great, the price is reasonable, and the work you’ll have to do is minimal. That said, managing an app is not effortless — you’ll need to put thought and work into an app on any platform. Are there additional things I wish it could do for the price? I can always come up with some! But nothing deal-breaking at all. Tell them Arrowhead Church sent you.
- Why not use Subsplash’s own website tool, SnapPages? I considered it, actually. SnapPages is cool and it’s a lot like Squarespace. For many churches, it would be the better choice (especially with how it integrates with your app automatically). I built a whole website on it first, to try it out, and it couldn’t go as far as I needed it to. I told our Subsplash manager the reasons it didn’t work for us yet, and I suspect that it’ll be a more viable option in the years to come.