FBCPS

First Baptist Church Powder Springs (FBCPS) is a mid sized Baptist church in the Atlanta area. Their mission is to spread the word of Jesus Christ to the community around them.

Role

UX Designer & Developer

Time

6 Months

Tools

Figma, FigJam

Team Size

2 Designers

Mockup preview of the FBCPS landing screen with the Safari browser heading and URL bar.

Introduction

Revisiting the Client

For this project, I reached out to a former company of mine, offering assistance with a website remodel after noticing that it was still severely outdated and faulty. After some discussion, the stakeholders agreed that they had been planning to redo the website and were planning on using Webflow for the remodel, but admitted that they were unfamiliar with it and let my team help.

Audit

Establishing Priorities

Since this site was meant to be a UX-centric redesign, we began our process by redlining the current website, finding and noting issues within the layout and design by referencing issues against design principles, UX laws, and WCAG standards.

Screenshot of the old website with red markings on it that outline issues that were noted by the design team

Grayscale wireframe of a Contact Us and Media section for the website with basic information and blocked off spaces for images and icons

Organization

Rebuilding the Framework

The inital website was created back in 2016, and had been compiling pages with little organization. One of the biggest struggles we faced with this website was how to condense and organize 8 years of accumulated content into something that would be easily understood yet still comprehensible.

A spiderweb like map with small containers that show how the pages of the site are interconnected and organized

Much of the work for simplifying the website was done by delegating many of the pages back to the external platform they used for internal management. This allowed us to hone in on just the purpose of the website, which would be for teaching visitors more about the church, it’s beliefs, and it’s functions.

Style Guide

Creating Consistency

Having been given the existing style guide, my job was to expand this into a more comprehensive brand guide that would be both suitable for the website and respectful of the existing brand they had established.

Many of the colors we were given are not compliant with WCAG standards. Since these could not be changed, I established a system that worked with opacities to help create the most contrast possible while being inclusive of their brand.

Grid setup of the various colors that were used for the website, changing in color from left to right, and a lowering opacity as you go down the grid

Typography scale of the headings used for the website, lowering steadily in size

A three by four grid layout of various icons that were used in the website

Development

Designing for Longevity

Using Webflow’s platform, I took the responsibility of developing the website based on the high-fidelity prototype. With the goal of structuring the site for long-term use, I used the BEM naming convention and CMS function to ensure that the client would be able to continuously build in the future.

After a meeting with the stakeholders, I created a list of the items that would need to be established in CMS and worked to create a system that would be sustainable overtime, yet prevent over cluttering by adding additional navigation and clear information architecture.

Website

FBCPS

View Site

A laptop mockup of the landing page for the new website

This website was by far the largest undertaking I have done so far. The original website consisted of 50+ pages of cluttered and outdated information. By utilizing CMS and the church's existing external platform, we were able to create a simpler website that now speaks directly to the mission statement of the client that they can use for years to come.