Creating a cohesive visual identity and streamlined navigation experience for website visitors.
Context
In today's digital age, a strong online presence has become increasingly important for churches. A well-designed church website not only establishes credibility but also provides a way to connect with newcomers. As part of UX design certification program, I reached out to a local church to redesign their website.
Users were surprised by inconsistent navigation experience and struggled to find information on the church community.
Conducted 8 user interviews over zoom.
Users explored the website and completed specific tasks.
*Participants all have had experience looking for churches by browsing church websites.
Pain point # 1: Navigation menu
Horizontal dropdowns, grayscale menus, and inconsistent interaction delayed users from finding information they wanted.
Pain point # 2: Lack of Visual Identity
Current website’s use of image, color, and typography fails to communicate their unique personality and identity as a church.
Defining Business goals
Presented findings from user research to church leaders and heard their perspective →
Aligning user needs and church leaders' vision for the website.
Defining the Problem
Problem
Inconsistent navigation experience
Lack of visual identity
Target user
Primary: website visitors (newcomers)
Secondary: members
Goal
Redesign of the website for:
Improved navigation menu
Stronger visual identity
USer persona
The target user is the website visitor, or newcomer, who is actively seeking information about the church.
Although primary focus was on the website visitor, user persona for the returning member was also created to gain a holistic understanding of both user needs.
Competitive analysis
Learning effective design patterns from competitors' websites.
Conducted competitive analysis of other church websites* to gain insights on how to build a strong visual identity & streamlined navigation experience.
*These churches are all located within the Philadelphia area, serving multi-ethnic population.
Navigation bar
Visual Identity
Information architecture
Redesigning the site map to achieve a streamlined navigation experience.
Using effective design patterns gathered from competitive analysis, I redesigned Cornerstone's site map to create an improved navigation menu:
Redistributed sub links under ‘About us’ and ‘Resources’.
Relabeled some of the primary menus to be more descriptive.
Created new ‘Get connected’ page to provide more information on the church community.
Mid-Fidelity wireframes
Designing mid-fi wireframes using the renewed sitemap.
Home, Livestream, About us pages ↴
Get connected pages: Community group, Children and youth, Bridge ministry, and Calendar ↴
Visual design
Using consistent color & typography to establish a cohesive visual identity.
Usability testing
Implementing consistent typography & improving content through concise copywriting.
Out of the 8 participants from user interview, 5 were available for usability testing. All 5 users were able to successfully navigate the redesigned website & gain greater understanding of the church community.
It was challenging to balance the needs of both visitors & returning members.
Gathering the content needed for building new pages such as ‘Get connected’ took time. Acquiring photos and getting permission took careful coordination.
Next steps
I want to continue improving upon the website by conducting further user research with the redesigned website.
I'm continuing to talk to the church leaders about implementing the design changes on the actual website. Church currently uses a website builder called cloversites. Feasibility of implementing my redesigns using the cloversites website builder will be the determining factor.
-min.png)
-min.webp)
