Local Church Mobile Design
Redesigning the mobile app user experience for the Community Chapel World Outreach (CCWO) website.
.png)
Redesigning the mobile app user experience for the Community Chapel World Outreach (CCWO) website.
This project involves redesigning the mobile app user experience for the Community Chapel World Outreach (CCWO) website. CCWO is a church that provides weekly sermons, hosts community events, and teaches bible studies. I wanted to redesign this website because I always noticed that their site looked outdated when I attended this church back in the day. The goal was to create a mobile app redesign that had modern aesthetics and helpful components that would allow new church visitors to navigate through the site easily and quickly.
For new church goers, it is often difficult to gain an identify a church’s values and culture, without visiting a church in person. However these individuals may want to do online research before they decide to plan a trip to the church. If they do not find what they are looking for on a church website, they may move on to other sites, starting the research cycle all over again. The antiquated aesthetics, lack of organization and unnecessary information from the Community Chapel World Outreach (CCWO) site can prevent this church from attracting new guests. Solving these design issues within the CCWO site will help new visitors easily and quickly understand if CCWO is the right Christian community for them.
For the heuristics evaluation, I went through the current CCWO website and looked for problems with usability based on Nielson’s 10 heuristics. It had the most issues with heuristics shown below.
Background is too dark making it difficult to see fonts and images well. Bad color contrasting. Font sizes and colors (typography) are inconsistent, Too much text content makes website look cluttered.
The Youtube icon is small and unrecognizable. The Word of the Day page does not reflect that page or content is being updated daily as the name suggests,
The map on the contacts page is very small to see and makes it difficult to locate the church. The events page does not have consistent help documentiation on the time/place of events or people you can contact if you want more information.
The purpose of the pilot usability testing was to learn about how easy it was for users to use the CCWO website at its current state. I recorded users navigating through the site, performing specific tasks from the survey, and noted what usability issues they had. I tested if the users could find media, event, and weekly activity information with the tools and documentation presented on the site.
Many times the user got distracted or forgot the questions he was trying to answer because he got lost in the clutter and unorganized website structure. I noticed the user also had to look through most of the site's pages to find the answers to the questions, which took additional time and made the user feel exhausted.
For my research, I tried to gain an understanding of the Christian population website needs.
I directly interviewed a church member familiar with church settings and events. I asked the interviewee a few questions related to how he conducts research when he needs church information and later asked him to perform a general task looking for this information. I audio recorded our conversation, which was guided by a prepared script.
In the future, I will try to be a bit more specific with some of my questions. Some of my questions were a little too broad which might have confused the reader on how to answer. I will also try to ask more questions that can expand the participants' answers.
I created 3 personas for which my church website prototype would support. Based on these personas, I created three scenarios that demonstrated the envisioned functionality that I considered adding for my final design solutions.
Responsible, detailed, safe, planner
Wants to plan a first time visit to CCWO church
To find directions to the church quickly and also plan her activities at the church as a first time visitor.
Technical literacy, has experience using direction apps and map websites, familiar with church environments
Trendy, social, tech savvy,
Wants to learn more about CCWO church before attending in person because she wants to get an idea of the church culture and vibe.
To get to know the church a little better before arriving for the first time.
Technical literacy, uses social media daily, likes aesthetically pleasing imagery, familiar with church environments
Social, generous, kind, extrovert
Wants to get more involved in the CCWO church.
To make new friends and participate more in church activities
Technical literacy, attended church events in the past, familiar with church websites, likes to volunteer and be social
It’s Sunday morning, Cindy wants to attend Community Chapel World Outreach church for the first time because she just moved to a new city. She goes online to the Community Chapel church website to find directions to the church. She clicks on the “I’m New” tab in the drop down bar. On the I’m New page, she finds a section called “Location” where it gives the church address. It also has a “Get Directions” button that links to Google Maps website. Because of her familiarity with Google Maps, Cindy chooses to click the “Get Directions” button to get directions to the church. Cindy also finds the best routes to take to get to the church with the integrated Google Maps tool.
Katie is interested in getting more familiar with the CWWO community before attending in person as a new guest. She is a millennial who is familiar with media content, so she goes to the church website to see if she can find any digital content that can give her a preview of the church culture. On the site, she clicks on the “Media” tab in drop down bar. On the Media page, she is given the option of choosing between "Sermon Audio" and "Gallery" buttons. She also has the options to click on icons that will direct her to different social media sites. She chooses Gallery button and is directed to a page containing many images separated by category headlines such as church events, missionary work, Sunday service, etc. With this media content, Katie now has an idea of the CCWO church culture.
It’s Friday afternoon and Mark is looking to attend a CCWO church event next Monday because he realizes he has free time during the week to socialize and meet new people. He goes to the church website to see if he can find any information on an upcoming church event on Monday. On the site, he clicks to the “Events” tab in the drop down bar. On the Events page, he finds one section called “Weekly events”. In the weekly events section, there are multiple buttons labeled with every day of the week. He clicks the Monday button and information appears listing all the events that take place that day. Listed under each event is the location, time, short description , and a learn more link. Mark clicks the learn more link and the site directs him to a new page where there is a detailed description and images of the event that happens every Monday. Mark learns more about how to participate in the Monday event taking place next week and writes down the information as a reminder.
In my wireframes, I tested the wireflow with a user participant to gather feedback on my system’s user interactions. Some of the wireframe changes that I made after testing was adding more pathway and exit options that would allow the user to go to different pages in the mobile application. I also made the search bar include name of the current webpage so users would know exactly what page they were on in the site.
Wireframe 1: To meet Cindy's goals, I added features that would allow users get directions faster and easier to events and the church itself.
Wireframe 2: To meet Katie's goals, I added interactive elements that would allow users to find media content of the church environment in a more organized fashion.
Wireframe 3: To meet Mark's goals, I added features that would allow users to find events organized by the days of the week.
The purpose of my high-fidelity prototypes are to visualize and validify the interaction flow that I previously created in a my wireframe and make sure it did not have any dead ends.
The user can get directions to the CCWO church faster and easier with the integration of Google Maps and interactive buttons on different pages of the site.
.png)
The user can find media content, such as gallery images, sermon videos, and social media sites, to get a better idea of the church environment before visiting in person.
.png)
The user can find events scheduled weekly, know when they take place, and contact someone if they have questions.
.png)
.png)
.png)
Through the whole process, I learned that having a deep understanding about user needs comes first before starting to design prototypes. Without proper user research and usability testing preparation, it becomes difficult to create apps that are useful for the general public. I realized that even though understanding user needs took a long time, it helped me develop an app that was simple, comprehensible and strategic. The design software programs that I used only served to visualize my user research and learnings together in the end. In the future, I want to learn how to ask better questions for usability testing that will allow participating users to expand their answers on their issues with a website.