Berean Christian Church Website
Art Direction
All
Prototype
User Flow

Berean Christian Church Website

Berean Christian Church

During my time at Differential, I worked on the Apollos Church Platform — a multi-platform SaaS product that serves 30+ of the largest churches in the United States. The full platform includes a mobile app, a TV app, and a website. I led the design for the website of Berean Christian Church, a Church in Georgia with 3 campuses. Below I walk through the visual design stage of the website design process.

Art Direction
All
Prototype
User Flow

Overall Goal

The goal of the new website was to improve SEO, so they could be discovered by potential members and improve the user experience. Berean Christian Church said that they would also like to unify the digital strategy for the church as a whole because there were technically 2 websites, one for the Gwinnett campus and one for the Henry & Dekalb campuses. The primary users of the new website are new users/potential members and existing members as a close second, so I kept this in mind through this design process.

Existing Visual Design

The existing website(s) didn’t have much of a cohesive look and feel to them. It used images with text inside of them to display content which is not good for SEO and accessibility. There was not a clear color palette along with several fonts used. Design principles were not applied, making the reading and deciphering experience difficult for users.

The church's brand was limited but they had a logo with yellow, red, and blue which they used on their website and graphics.

AS A USER...

Survey Says...

To create a cohesive look and feel throughout the new website, a survey was sent to the Berean christian church team. Through this survey, we gathered information about what kind of look and feel they were imagining for the new website. We learned about what websites they loved the look of, they didn't have any specific colors they wanted to include in the designs. These are the desired characteristics that we gathered from the surveys:

  • Sincerity - welcoming + inviting
  • Competence - trustworthy + knowledgeable
  • Excitement - vibrant + lively

The client also mentioned these desired visual elements that they wanted present on the site:

  • Dark mode
  • Photo heavy

Design Directions

With these wants and needs of the client in mind, I created two varying design directions for the Berean Christian Church website. I had fun creating these colorful designs! These options were meant to be starting points for iteration on the visual design. These designs were presented to the client as well as a few additional people from their team.

No items found.

I'll be honest...

The client didn't love either of these designs I presented. We, the design team and the client, were clearly not on the same wavelength. The client didn't feel like either of these options felt like their Church. A miscommunication had happened, we were guessing from the survey. This was disappointing to hear that my designs didn't meet their expectations, but I was eager to figure out what would make them happy and excited for the website redesign. We continued talking to the client over zoom, listening, taking notes and asking questions about what they liked and didn't like about the presented designs. A few pieces of their feedback were: 

  • Liked the hero of Option 1
  • Liked the blue/purple from Option 2
  • Liked the Gold "B" logo in the navigation
  • Wanted more white, designs were too dark for them

V2

I created another iteration incorporating their feedback, hoping to make them happy with the design direction. They ended up really liking this version with a few additional tweaks. Unfortunately I was unable to see this project through because I was laid off before it finished, but really enjoyed creating the bright and bold homepages.

No items found.

(THANKS FOR READING)

Want to get in touch?

Use this form to describe your project
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.