Mormon.org Chat

Context

Mormon.org is a site produced by the Church of Jesus Christ of Latter-day Saints that promotes and informs online visitors about the values, beliefs, and practices of Mormons. Over 2 million users visit Mormon.org each month.

During my internship at Boncom, I worked on multiple areas of the site including mobile and desktop. Redesigning the chat experience was one of the more impactful projects that I had the opportunity to work on.

The Problems

Issues presented by the client included the following:

• Visitors often end the chat because of delayed response times by missionary representatives (Visitor view)
• Outdated UI design (Visitor & missionary view)
• Visitors don’t trust the chat experience (Visitor view)

The client’s main focus was on improving chat engagement and experience.

Old Design

Research

Product Audit

Before brainstorming solutions, I wanted explore the product to understand it deeper and see if there were other UI/UX issues. Later, I’ll mention some issues that I discovered in the “Define” section.

Competitive Analysis

I started by looking at other chat experiences on mobile & desktop to identify what seemed to work and what did not. During this review I noticed most of these chat experiences at one point or another had the following:

• Photos of faces (or illustrations) to help build trust between the visitor and the recipient. People like to talk to people. When the user feels that they are actually communicating with another human (a picture allows this feeling to occur) than the visitor begins to trust in the chat experience.
• Pre-set questions & responses allows the visitor to quickly start a conversation. This also helps new visitors be aware of questions or topics they can discuss in the chat.

Usability Testing

Due to client contraints, I conducted a few quick usability tests in the office to determine what parts of the interface cause frustation and confusion.

Define

Pain Points

During the the product audit & usability tests, I found that many of the issues were UI related.

Pain Point 01

Aesthetics and Feel
Overall, the UI felt awkward and out-of-date.

Pain Point 02

Limited Screen Real Estate
Due to the bulky UI components, the interface overpowers the mobile screen.

Current Design - Annotated

Design Goal

Design & Concept

Wireframes

Feedback & Iterations

Presenting my work to the team

During my internship, our team met together once a week to discuss the progress of our projects. I would present my design concepts and receive design critiques from the team. Before this time, I didn’t have much experience presenting design work. This become an opportunity to learn how to present effectively.

Here is some of the feedback I received from the team:

Continued Iterations

Throughout the project I continued to present my work to the team and test it in the office. As a recieved feedback, I would iterate over and over.

Final Comps

Activating Chat

Engaging in the Chat

Ending the Chat

Revisiting the Problems

Creating a Sense of Urgency

Solution: In an effort to decrease the response time of missionaries, we added labels on the chat message like “just now” or “11 seconds ago” instead of “2:34pm”. In Figure 1, you can see that each message is labeled by the amount of time that has passed instead of the time of day.

In Figure 2, I created a pop-up notification for missionaries after a certain amount of time has passed without their response to a chat. The pop-up includes default response questions that allow the missionary to respond as quickly as possible when they are notified of the delay. These notifications would help missionaries keep track of visitors they are chatting with and help them respond to visitors in a timely matter. Although the mock-up below says “5:34 mins,” we did not decide on a final time frame before the pop-up would display.

Adding Context

Solution: As a way to increase chat engagement, I designed a chat CTA that is content specific to the topic page. For example in Figure 3, this CTA would be displayed on the “How to Pray?” topic page. I did because I wanted visitors to see how chatting with missionaries would be helpful.

To help missionaries understand the context of visitors, I decided to add a notification bar to show them where visitors are entering the chat from (Figure 4).

Building trust in the Chat

Solution: In an attempt to increase trust in the chat experience, I added photos of the missionaries faces along with a drop-down menu that displays basic information about where they are from and what they enjoy doing. Another solution we came up with was adding the “122 people chatting now” to the content specific CTA on each topic page. We did this to add credibility through social proofing (figure 3).

Retrospective

What I’d do differently?

Looking back on this project, I would have:

• Sold the client on the benefits of UX research to allow our team to validate many of our assumptions.
• Taken more initiative to ensure research was happening throughout the project.
• Questioned the problems that the client presented to us so that I know they are really problems that need to be solved.

My Successes

Although I wasn’t able to see the outcomes of my work, by the end of my internship I felt that this project challenged me to design within set business goals. Below are some LinkedIn recommendations I received at the conclusion of my internship: