Role:  UI/UX Designer

Tools:  FigJam, Trello, Squarespace, HTML/CSS

Summary:  I was part of a team that designed a church’s new website to have a streamlined navigation and a more welcoming online presence representative of the church. I made key contributions to the rebuilding of the information architecture (IA), and led the website’s visual design and formatting. I also used HTML/CSS to embed multimedia content and make navigation more accessible.

Project Background

Forest Community Church (FCC) is a Christian church in the Texas Dallas-Fort Worth (DFW) area that focuses on growing community through their House Church ministry. They were seeking to update and redesign their website.

The Team

I was a UI/UX designer in a volunteer team of UI/UX designers, backend operations, and project manager dedicated to redesigning and maintaining the FCC website. Split between Texas and California, we communicated using Slack, Trello, and Zoom to make logistical and design decisions, and to keep track of progress.

Main Objectives

Based on the project requirements listed by FCC’s pastor, the main needs for the new website could be summarized in 3 parts:

1. Update & add current information
2. Tell the right story about FCC to new visitors
3. Allow volunteers to edit the website without required knowledge of HTML/CSS

Before the Redesign

Originally, the FCC’s website heavily emphasized weekly sermons. While not overwhelmingly busy, there was not a clear hierarchy of information or visual elements, making the site confusing to navigate. Some informational content was outdated or missing. The large, dark grey top bar and footer gave the pages a dark, blocked-in feel.

IA Rebuild

To accurately communicate FCC’s story and logistical information, I collaborated with the entire team to assess and restart the IA building process.

Original Structure

The IA structure seemed split between the Home Page tiles and the Nav Bar links. The Nav Bar itself provided redundant information or was not clear in what information would be provided. Every page also featured a list of recent sermons leading back to the Sermons page.

Redesigned Structure

I gave feedback for an IA structure that some team members had already started putting together. To better highlight the church’s primary ministry, House Church, I recommended making it a separate item on the navigation menu. I also presented the grouping of pages by relevance (below) to ensure that new users in particular would be able to easily find information.

Building in Squarespace

I prototyped web page designs in Squarespace to provide real life examples of what the website could look like. I presented these design iterations to the team, received feedback, and gave my input for which designs would best suit the church and visitor’s needs.

In addition to using the in-house Squarespace tools to build the website, I also used HTML/CSS to embed a YouTube video that would automatically update to the most recent upload on the original platform. For the desktop view, I used CSS to reformat the top bar and set up hover actions to give users visual feedback that would allow them to confidently and accurately navigate the site.

Style Guide

Together with the another UI/UX designer in the team, I selected a color palette that would complement the organization’s logo and evoke their aim to grow and nurture a forest-like community. I also selected Poppins as the website’s font for its clarity and playful friendliness.

Final Design

The final website design (Forest Church Website) includes all project requirements and provides new and returning users with traceable navigation paths, clear hierarchy, and a welcoming online atmosphere.