ChurchTrac was seeking ways to increase their sign ups, increase product offerings, and decrease the loss of customers to competitors.

The stakeholders decided that re-designing the landing and content pages, as well as the church management web application would be the starting point to accomplish these goals.

View Live Website

Website Redesign for SaaS

ChurchTrac is a cloud based SaaS church management solution that enables churches and ministries to manage members, events, attendance donation and more.

Stakeholders: CEO & Lead Developer, VP, Customer Support Manager, Marketing Specialist & myself the Front-End Web Engineer.

My Role:

  • Crafting Personas
  • User Research
  • Competitive Analysis
  • Wire-framing
  • Prototyping
  • User Interface Design
  • Front-End Development

My Tools: Adobe XD, Illustrator, Photoshop, Miro, Google Suite, HTML, CSS, Bootstrap 4 and some Javascript, JQuery, & PHP.

Timeline: 2-3 weeks for the landing & content pages

Design Process

I followed IDEO’s human-centered design process to to assure that
my design decisions were supported by research and feedback.

User Feedback

I spent several days conducting user research by reading through previous support tickets, Capterra reviews, and searching the internet.

Additionally, there was a kick off session between myself and the other stakeholders of the company, in which we extensively discussed several years of user feedback . We also discussed development constraints and best practices. Lastly, I spent several days familiarizing myself with the current software and landing pages, as well as our competitors.

Personas

Based off the user research and verbal brainstorming sessions with stakeholders, I crafted the following 4 user personas for ChurchTrac:

Martha (Age 69) - Volunteer Church Secretary

Ryan (Age 36) - IT Professional

Kenya (Age 42) - Jill of All Trades

Pastor Bob (Age 40) - Pastor of Small Church

Synthesizing Research

"It's like the engineers developed it apart from the users."

After synthesizing the research using Affinity Sorting , I was able to see many patterns emerging as it relates to the issues the customers were having with the current interface.

It confirmed the decision to redesign the user interface.

After reading through 327 Capterra reviews and 6 years of support tickets, I found these common complaints about the the user interface amongst the users of ChurchTrac:

“Would probably not have used product if not already enrolled. Its like engineers developed it apart from users.”

“The interface looks pretty old school, first website built look.”

“The interface is not very modern or user friendly. It has the feel of software from about 20 years ago.” ”

“A little old school looking... Would love to see the look of it come a little further to appeal to our millennial staff.”

“Everything was clunky and aggravating to accomplish what we needed. Lacked a lot of common features. Needs updated UI.”

Defining The Problem

Over the years, ChurchTrac was continually getting complaints about the usability of the website and software. They had an issue with the user interface looking antiquated and not meeting modern design standards. As a result they were losing customers to their competitors.

Competitive Analysis

Once the problem was identified, I conducted a competitive analysis of competitor's websites.
Click here to view the Comprehensive Competitve Analysis

Establishing Goals

After the competitive analysis was completed, I then met with the stakeholders again and we worked together to establish goals, constraints, and risks.


Scope & Constraints

The features must of the web app must be incorporated into into the new landing page. The features page will be eliminated.

The site must have a login, sign up, pricing & support page. The login, sign up and support pages will not have a menu.

The old website must be converted from Bootstrap 3 to Bootstrap 4 framework, to align with new Boostrap standards.

The new website must be cross-browser compatible and responsive on a variety of small, medium, & large devices.


Risks

ChurchTrac runs the risk losing existing customers due to changes in the user interface of the website & web application.

The ChurchTrac website could lose search engine ranking due to change in content on the website.

Wireframes

I then used Adobe XD to create wireframes of the ChurchTrac landing, pricing, sign up, login and support pages.

View Prototype

Landing Page

Pricing Page

Login Page

Sign Up Page

Support Page

Design System

After meeting with the lead developer, we collectively created the design system.

Colors


Typography

Buttons


Iconography

High Fidelity Protoypes

After meeting with the lead developer again, I then created a the high fidelity prototype in Adobe XD and then coded it out in html, css, Bootstrap 4, and assisted the lead developer with javascript, and PHP.

View Live Website

Landing Page

Pricing Page

Login Page

Sign Up Page

Support Page

Usability Testing

Once the entire website and application were designed and coded, the stakeholders invited a group of 10 beta testers to test out the website and the web app.

To comply with my non-disclosure agreement, I have omitted the findings of the usability testing.

Outcomes and Lessons Learned

To comply with my non-disclosure agreement, I have omitted confidential information All information in this case study is my own and does not necessarily reflect the views of ChurchTrac.

Outcome

  • ChurchTrac was able to increase sign ups. (The total amount can’t be shared due to NDA.)
  • They also were able to add on several new key features to the web application: Worship Planning, Scheduling, and Church Connect.
  • The user interface was updated to modern web standards. Most of the users were pleased. However, a few preferred the old interface.

Lessons Learned

  • I learned that the stakeholders are not very versed in User Experience design and process. Although, they were in tune with user feedback when it came to products and features, most did not take the actual user into consideration.
  • The owner/lead developer focused mostly on functionality and less on design, usability, and the overall user experience. I openly voiced my feedback, pertaining to usability, user experience and the overall design.

  • He was very open to suggestions and criticism, but ultimately made the final decisions based on what “he wanted” as opposed to what the user may or may not have needed to make a decision about the product.

I still think the website and app are a significant improvement over the old design. However, it still does not have the best user experience, in my opinion.

View Live Website

Other Case Studies

Interested in Working Together?

I am currently seeking full-time permanent REMOTE positions. However, I am very willing to relocate to the DC Metro area, Austin, Texas or internationally for the right opportunity! I am not interested in part-time, freelance, contract, or temporary positions.