top of page

REDEISGN WEBSITE

网站在设计.png

Redesign the Christian Web

Restructure the website's information architecture and content, resulting in a 37% increase in average session duration.

B2C

Branding 

IA & Navigation 

Dashboard

Design system

样机-web.png

Project
overview.

WCRM redesigns its outdated and confusing web to enhance user experience and expand its outreach

WCRM, a Christian church, uses its website to amplify its teachings and activities. However, the site's lack of updates since 2019 and its confusing navigation and interface design hinder users' quick access to key information. This challenges the church in attracting and retaining congregants and expanding community outreach. Thus, there was an urgent need to redesign the website to enhance user experience, communicate teachings, and expand its reach.

Role

UX/UI Designer

角色.png

Team

1 UX/UI Designer

1 Graphic Designer

1 Developer

团队.png

Time

3.5 Months

​

时间-线.png

Project

problem.

The website's confusing layout made it hard for visitors and congregants to quickly find key information and resources

The website's information architecture was confusing, making it difficult for new visitors and congregants to quickly access key information and resources.

Confusing layout

Difficult access to key information

Hindered navigation
for users

Project Objectives

  • Optimize the main and secondary navigation based on user needs, and reorganize content.​

  • Improve the naming and sequence of navigation labels and menu items to enhance accessibility and findability.

  • Update and unify the website's visual language to strengthen brand consistency, elevate user experience, and build trust.

Solutions

Enhanced web navigation and IA boosts resource accessibility

We optimized Navigation and Information Architecture to improve information accessibility and findability, enabling quick access to key resources for new visitors and congregants.

Before

After

电脑手机屏幕样机-(21)_爱给网_aigei_com.png
电脑手机屏幕样机-(21)_爱给网_aigei_com.png
shouye-web.png

Impact

37%

The average session duration for key activity pages such as worship, events has increased from 37s to 51s, marking a 37% improvement.

Average Session Duration

100%

Through user feedback, the new navigation and IA have made it easier for visitors and congregants to find the information they need.

User Satisfaction

Website

Audit.

I initially conducted a well-rounded audit of the current website to ensure that the redesign could effectively address existing issues. ​

1

2

3

       Unclear navigation with too many primary categories

There were a total of 9 primary categories, violating the best practice of 2-7 category design principles, and the hierarchy

of categories was unclear.

       Messy content

All content was displayed through poster carousels, making

it difficult for users to quickly find information.

       Inconsistent visual language

Font and color usage were chaotic, leading to visual inconsistency.

2

3

1

Current Homepage

Target Users &
User needs.

Church Website Serves Two User Types: Congregants and New Visitors with Different Information Needs

The church website caters primarily to two types of users: congregants (experienced users) and non-congregants(new users).

  • Congregants focus on familiar information like worship, activities, and courses.

  • New visitors aim to quickly understand the church and establish a connection.

persona1.jpg
persona2.jpg

Design Challenge

HMW segments users' specific needs to meet church members seeking familiar content and new visitors exploring the church for the first time？

Design
Approach.

Discontinued Services​

The primary category 'Rev. Esther Lou' included 'Inbox' and 'Blog,' which have been inactive for two years and will remain closed.

​​

Task 1: Restructure IA & Navigation

Initiating Navigation and Content Classification Review to Identify Issues

We initiated organizing the current navigation and content classification.After reviewing relevant content, we identified several issues:

Redundant Content

  • 'Prayer' is duplicated as a subcategory in both 'Pastor's Column' and 'News.'

  • 'About Us,' 'Contact Us,' and 'Location' sections redundantly provide church background and contact details.

Unclear Information Hierarchy

Services under the 'Programs' category lack clear definitions, making it hard for users to understand the types of services based on menu names.

Utilizing Card Sorting to Optimize Church Website Navigation and Structure

We collaborated with six experienced ministry members to review and categorize existing services. We then conducted two rounds of card sorting and discussions to refine functionalities based on user needs and habits. 

Card-sorting-workshop.jpeg
card-sorting-fb.jpg

Card Sorting 

What has been retained?

  • Primary category: About Us, Event (Programs), Donate,  Contact.

  • Secondary category: Weekly Update, Newsletter, Testimony, Programs.

What has been deleted?

  • Primary category: Rev Esther Lou, Location, RM Conference, and News

  • Secondary category: My home church

What has been added?

  • Primary category: Sermon, Online, Course

  • Secondary category: Worship, Watch Online, Staff and Beliefs

Before

旧IA.png

Current IA

After

改后IA.png

Revised IA

Task 2: Revamping Church Branding

The church only had an outdated logo and no unified visual system, so stakeholders supported my proposal to optimize the brand's visuals.

I kept the traditional Christian cross and used wheat to symbolize dining, choosing gold as the main color to represent the Lord's glory based on Christian culture.

After establishing the brand visuals, I collaborated with the graphic designer to design a design system to ensure consistent visual language across future website enhancements.

ui.jpg

Task 3: Define Informative Content based on different users

I designed the homepage content to meet the needs of the existing and new users.

Church members, primarily interested in worship, activities, and courses—the core services of  church—were prioritized based on their engagement levels.

Worship

Activities

Courses

New visitors, the goal was to introduce them to the church's values and encourage participation in activities and community service. To facilitate quick integration, I proposed adding a dedicated section under these main content areas specifically

for new users, aiming to: 

  • Provide new users with an initial understanding of the church. 

  • Offer clear steps and guidance for those seeking to integrate into the church.

Steps for New Members to Join the Church

Understand the Church's Values

Encourage New Members to Participate in Groups

Join the Church's Services

For

Church Members

For

New Members

电脑手机屏幕样机-(21)_爱给网_aigei_com.png
shouye-web.png

Engaging Hero Section

The hero section at the top with the welcome message and background image is visually appealing and grabs attention immediately.

Clear Visual Hierarchy

The well-defined headings and subheadings, along with the use of different font sizes and weights, help users quickly understand the page structure and distinguish between primary and secondary information.

Engagement-focused Sections

Well-organized sections encourage user provide quick access to relevant information and actions.

Informative Footer

The footer provides essential contact information, which are crucial for user engagement and accessibility.

Other
Pages.

ditu-web.png
jieshao页-web.png

Testing
Result.

“Upon visiting the homepage, I understood if this church offered the specific service I was seeking.”

After completing the high-fidelity web design, we tested it with six users – both new and experienced -- to evaluate how well they could find information and their overall user experience. The results showed they navigated the site well and gave positive feedback.

“Through navigation, it's effortless to discern the range of services offered by the church.”

“I feel very comfortable browsing pages without any redundant content.”

Success
Metrics.

37%

The average session duration for key activity pages such as worship, events has increased from 37s to 51s, marking a 37% improvement.

Average Session Duration

100%

Through user feedback, the new navigation and IA have made it easier for visitors and congregants to find the information they need.

User Satisfaction

What’ve 
I learned？

This is my first project for a Christian community. Its requirements were different from commercial projects that I’ve worked on before. Unlike commercial projects focused on conversions and click-through rates, non-profit websites focus on information dissemination, community building, and emotional connection, emphasizing content accessibility, visually emotive elements, and enhanced community interaction. Therefore, as a UX designer, I must deeply understand the organization's mission and user needs to create interfaces that foster community sentiment and engagement, not only conveying information but also establishing and maintaining strong relationships between users and the organization.

END

Thanks.

未标题-1.png
More projects...
bottom of page