Redesigning the church's online experience to better support remote worship and gospel preaching.

Church in San Jose is my local church that fellowships with over 2,000 local church's worldwide to enjoy Christ. As the church's tradition, people meet frequently for small home parties, local group blending, and international conferences. Saints invite gospel friends to join the gathering, enjoying bible study, and love feasts.

However, all activities have been forced to go online since COVID-19. Not being able to meet in person brings unprecedented difficulties in prayer, fellowship, and gospel preaching. I am responsible for restructuring the church's online services to tackle this issue.

Role

UX Designer

My Contribution

As the sole designer, I led the end-to-end design process. I investigated the problems by interviewing pastors, developers, and site users. I simplified the site's information architecture. I iteratively explored, designed, and prototyped the new website and its responsive mobile site. I built a design system for smooth engineering handoff. I am currently implementing a live prototype in React.js for usability testing.

Techniques

Figma, Miro, Think-alouds, Heuristic evaluation, HTML, CSS, React.js

This is an ongoing project and I am working tirelessly with the engineers on launching the upcoming site. My manager is happy about me sharing newest updates pre-launch as it attracts more visitors. Stay tuned!

The Problems

The church's current online experience has 3 main problems:

  1. It's not easy for saints and gospel friends to find helpful information on the website;
  2. It's not visually attractive enough to motivate gospel friends to join the church;
  3. It's not mobile-friendly.

The Scope

My current work focuses on redesigning Homepage and Media Services of Church in San Jose.

The goal of my work is to make the website easy to use, visually pleasing, and mobile-friendly. Both saints and gospel friends should be able to quickly access the information they need.

View in full size

Exploratory Design

I've been iteratively exploring best design solutions by listening to feedback from pastors, engineers, and website users. I take valid feedback and use my own judgement to make decisions.

The Solutions

I designed 4 solutions targeting the problems about the church's current online experience. They are:

  1. Simplifying the information hierarchy and reprioritizing features to make it easier for people to find useful information on the site.
  2. Making the site attractive to visitors by creating a design system with an elegant style.
  3. Optimizing online media services to provide a better learning experience.
  4. Responsive design for a mobile-friendly experience.

Solution 1: Simplifying the information hierarchy and reprioritizing features to make it easier for people to find useful information on the site.

Before - The Problem

About Us was a subpage hidden under the Welcome page and was hard for site visitors to discover. This is not beneficial for gospel friends who want to learn more about the church's background.

Announcements were meant to be at the hero position but did not look like so. Callout buttons need to center contents to look proper. There are not enough margins around buttons.

Social Media Section needs layout adjustments.

After - My Solution

About Us subpage has been merged with the information on the home page for brevity's sake. Gospel friends, whether they are first-time visitors or returning visitors, will not miss the opportunity to learn more about the church.

Announcement buttons are now placed at the hero position with appropriate paddings and margins. They are standing out with a more pleasing visual pattern.

Social Media Section has been cleaned up." The "Follow us on Instagram" button is prioritized. Photo layouts have been redesigned as endless cards, providing an easy sliding experience. Unnecessary "Load More" buttons have been removed.

A floating back-to-top button was added to the bottom of each page. It helps with accessibility on long webpages and mobiles.

Solution 2: Making the site attractive to visitors by creating a design system with an elegant style.

I created a beautiful design system for the church's website and mobile services. The color and font choices define the church's branding keywords: classic, elegant, simple, pure, friendly.

The tone of my design system also defines the church's initial branding. More on that soon.

Solution 3: Optimizing online media services to provide a better learning experience.

Before - The Problem

Online Media Service is one of the essential services provided by the church. Saints use it to review materials in previous conferences. Gospel friends use it to browse topics of their interest.

However, the current online media service does not satisfy its users in many ways. Clicking on a conference name directs someone to a sole media player on a black screen. This does not motivate saints to study conference materials, nor it attracts gospel friends.

After - My Solution

I applied the design system to make the site look sleek. I also optimized the user flow and added useful features to provide a better experience for saints and gospel friends.

Media for All sounds ambiguous with the existence of other categories. I've renamed it Recommended Media for All to avoid ambiguity.

I added added a download button to make offline learning possible. Users can download video, audio, text, or all study materials to review anytime and anywhere without worrying about low battery or no wifi. I chose to display text instead of icon to accommodate elderly saints' needs (they are usually not so digital icon-savvy).

To ensure a better learning experience, I replaced the "black screen" with videos and transcripts added to the sole audio player, altogether turned conference review into a convenient and enriching learning experience.

The two-column layout provides a synchronized video/audio and text experience. Users can choose to play video or audio depending on their situation (focus mode on, casual listening before bed, no wifi outdoors, etc.).

Solution 4: Responsive design for a mobile-friendly experience.

Before the epidemic hit, there was a desperate need for a mobile-friendly experience with the church's online services. People barely had time to sit at a desk computer and interact with the church's online services. They spent the most time listening to conference videos on the go, reading message scripts on their phones before bed, and even stopped bringing hymnals to Sunday morning worship because they could find the lyrics on their phones.

COVID-19 offers the perfect time to craft a mobile-friendly online experience. With the slowdown in demand due to working from home, I was given the time to take full care of design details and work with engineers on development realities. The epidemic will eventually pass, and I look forward to seeing everyone's smiling faces soon as they load the church's online services on their phones :)

Next Step: Being Engineers' Best Friend

I'm working on coding my design in React.js to help back-end engineers fully understand design specs and interaction details. Together, we are building a brand new online experience for all saints, gospel friends, and website visitors. Stay tuned!