How We Used Webflow to Redevelop the Winona Lake Grace Church Website as Part of Our Pro Bono Initiative

Giving back to society is high on our list of priorities. We are committed to helping nonprofits and charitable organizations reach out to the maximum number of people to promote their noble causes. To back it up, GetDevDone has a special pro bono programme that allows charities and nonprofits to have a working website entirely free or at greatly discounted rates. 

Today, we want to tell you about a case like that – the development of the Winona Lake Grace Church (WLGC) website that we did for just half of our standard price.  

The Client 

Winona Lake Grace Church is part of the network of churches, campuses, and ministries in the USA and Canada. Its mission is to “worship Jesus, love each other, and reach our world.” 

We were contacted by the Winona Lake Grace Church Communication Assistant Nolan Perry. He told us that he had found our company through Webflow’s website. Since we were the first to respond, thoroughly investigated the project, and offered the nonprofit discount alone among multiple providers, the church decided to collaborate with us. 

The Challenge 

When the WLGC reached out to us, it already had a live WordPress-based website. However, there were some issues with it that needed fixing. 

Specifically, the UI/UX design was below par. It was confusing, there was not much style, and it didn’t benefit the user. The biggest issue was the poor responsiveness on mobile devices, especially on the Sermons page. 

To address the issues, the client created new designs of the website’s pages that followed the essential usability principles. Our task was to convert those mockups into a fully developed website using Webflow as the page builder and content management system. 

Nolan chose Webflow because of its powerful features and a lot of positive feedback about it. He didn’t want to go with a basic template that hundreds of people used because of a lack of personality. The WLGC wanted to stand out in comparison to other churches in the area, and Nolan believed that Webflow would be able to help them achieve that goal more efficiently than other platforms. 

As mentioned earlier, responsiveness was one of the client’s biggest pain points. He gave us free reign in how we approached the task of making the website render well on mobiles. Besides, Nolan wanted to have some nice, subtle animations that added to the feel of the site. 

The client was also concerned about making the Sermons functionality as user friendly as possible. The church holds frequent sermons that are recorded on video. Those recordings are then uploaded to the website. 

The Sermons functionality on the old website was not efficient or flexible enough. Our task was to improve it both on the front-end and back-end sides, simplifying the management of sermons and sermon series. 

The Solution 

To get the job done, we used the following tools and technologies:

• The Webflow Designer to convert the client’s mockups into fully developed web pages. 
• CSS and JavaScript to add custom styles and dynamic effects to the pages and page elements, as well as to create some advanced features such as searching and filtering through sermons. 
• The Webflow CMS to set up several chuch-specific CMS collections for quick content generation and manipulation.  

Here is what we did exactly. 

Website-Wide Features 

Reusable Components 

We built three reusable components: Header, Footer, and Team Item. These are global components that the website administrator can just drag and drop when creating new pages. Once changes are made on one page, they will automatically render on all pages.

Sticky Navigation Bar 

We made a sticky navigation bar that remains in place on scroll regardless of the page the user is browsing. 

Animation on Scroll

We also added animation on scroll to every page of the website. 

Pages 

Home 

The Home page contains several sections intended to give the user a general idea of the church and its activities. It has several sections with various dynamic features and videos. Here are the most notable ones. 

Most Recent Sermons 

This section contains a video of the most recent sermon that is uploaded automatically from the CMS using the Recent Sermons CMS collection that we created. The user can either play the sermon inline by clicking on the play button in the embedded Vimeo video player or on the Watch button that opens the corresponding sermon series page in the same tab. 

About 

The About page presents some essential information about the church: its mission, ideals, and staff members. Here are the main features that we added to this page. 

What We Believe

We created a three-item accordion for this section. In addition, we replicated the old Statement of Faith page in Webflow. It opens in the same tab on clicking the Read more button. 

Meet our team 

This is a collection of cards with the positions and names of the church staff members. Each card includes the Contact button. Clicking on one brings up a popup for writing a message to the specific staff member. 

The client wanted each staff member to receive a personal email whenever someone contacts them from the website without the sender knowing the staff member’s email address. To handle that task, we integrated the popup with the Zapier platform.

Groups 

For the Groups page we created the corresponding Groups CMS collection. It allows the website administrator to create identically looking pages for each specific group of people quickly. 

We also used a multi-reference field to connect groups with the bottom cards. That allows you to choose any number or type of card to display there.

The client wanted the same image-text cards to render on the pages with the ability to choose the number of cards in each particular case. Thus, rather than making a card with the same item over and over again, we just created a collection of cards – Connect Cards. 

Groups / Men – Two Connect Cards 

In the Groups, we assigned the Connect Cards as a multi-reference field. The client can now add any number and types of cards.

Groups / Life Groups – Four Connect Cards 

We also created several CMS collections for other website pages to facilitate content management, such as Global Ministries, Local Ministries, Our Ministries, and more. 

Sermons 

The user-friendly and mobile-optimized Sermons page was the client’s key focus. To meet his requirements, we created several CMS collections to simplify uploading and searching for videos: 

• Recent Sermons
• Sermon Series 
• Teachers 
• Scriptures

The top section features the most recent sermons by default. Once a new sermon is added to the Recent Sermons collection, it is automatically displayed leftmost in that section. Clicking on a card opens the corresponding sermon series page in the same tab. 

We have the Recent Sermon and Teaching Series as two different CMS pages that share several categories: Sermon Series, Teacher, and Scripture as reference fields. So we can assign relative items to certain fields. 

We used a reference field like that to filter certain cards using the Finsweet attribute.

Using JavaScript, we also created the Search & Filter functionality. The user can enter a keyword into the search box or filter the sermons by the Teacher, Sermon Series, or Scripture criteria. The Reset filter feature is there as well. 

Sermon Series Page 

As mentioned above, this page opens either from the Home or Sermons page. Each sermon belongs to a series, so the user sees the list of sermons in the series (e.g, Ecclesiastes) to the right of the specific sermon video. The most recent sermon is automatically listed first. The user can open any video in that list and it will appear in the video box on the left. 

Below the video there is an accordion section with the sermon resources. Every series is automatically populated with sermon recordings that are added to the Sermon Series collection. 

The Outcome 

We met all the client’s expectations in full. The new WLGC website renders perfectly on mobile devices. Its content is easy to update and modify thanks to the handy Webflow collections that we created. That is especially true when it comes to working with sermons: displaying recent videos, adding sermons to specific series, and searching for sermons using various criteria. 

We also wrote a detailed guide so that the website administrator could easily manipulate the content inside the CMS without our assistance. Nolan was completely satisfied with our attention to detail, diligence, and skills. Here is a quote from him: 

Working alongside you and the team has been very positive. Even from the start, you were the first team to reach out to our request we sent through Webflow. You were very quick to respond, and very helpful in your explanations. I also want to mention the 50% discount you gave us for being non-profit, which allowed us to go through with the project. This was very much appreciated. Every interaction with you was kind, understanding, and heartfelt.The final result ended up looking exactly like I had designed it. I was very impressed. I would recommend your team to anyone wanting to build a website.

A final thank you for all you and the team has done. It’s much appreciated!

Want to be our next  happy client? Let’s get in touch!