Tabella

Brief : Indiscreet social media platforms and outdated church websites have created pain points for their religious users.

I improved communications between users and their churches by inspiring familiar features in a religious social media app.

Artboard – 1.png
Artboard – 1.png
 

Tabella is a company that provides a safe place for users to become closer to their faith. They aim to be the way churches communicate with their members.

Problem:

There are frequent miscommunications between churches and their followers:

1. Knowing when events are happening, and when events are changed/cancelled. (In the height of COVID there are many cancellations of events and questions from members)

2. Church content is irrelevant to some users. (Example: Children Events vs. Volunteer Meetings)

3. Church websites are typically outdated and lack logical IA for users to find what they are looking for.

4. With COVID affecting in-person services; churches must find creative ways to livestream and post to mobile devices. There is currently no popular media outlet for this information.

5. Users do not like the publicity of larger social media apps to discuss religious matters- they don’t feel comfortable and worry it would cause problems with connections.

Goal:

1. Help users connect with church and their own faith through a mobile app.

3. Identify pain points of current religious-centered apps.

4. Increase trust in church information by timely updates and notifications.

 Design Process:

As an intern, I was brought in the middle of design tasks. My role would be to re-analyze the problem space, interview users, and address issues in the current design in preparation for the new social features.

Problem and Concepts (Competitive Research + User Interviews) ➤ Design Audit of Current Mobile App for Audience Needs ➤ Design and Suggest New Features for next Iteration

My Role:

I worked exclusively off of the Lead UX | UI Designer’s work to fulfill deliverables. In weekly meetings I would communicate to the CEO the findings and next steps.

 
Artboard – 3@2x.png
 

Research

The primary ways church-goers connect with their faith are through:

1. Church Websites

2. In-person bulletins

3. Social Media Apps (Facebook)

4. Religious-Specific/Bible Apps

There are numerous religious apps on the market, and the advancement of technology provides more creative ways to connect with others and share religious content. This provides Tabella an opportunity to bond the church and people when they can’t make it to church. Their app can provide all these things as follows:

1. A place to see upcoming church events

2. A way to connect with members/ and the church itself.

3. All answers are in the same place: quick questions and answers, forums.

4. Resources provided by the church to learn and grow.

 

Target User/Market

Users : I specified my target demographic to middle aged adults (25-40) who make up the majority of American church-goers. This is a necessary group because they are the most comfortable with technology, and they would be the start to building trust in a religious app.

Background : English and Spanish speakers that identify as either Catholic or Christian.

Location : The Company is focusing on users in San Francisco, but wants to expand to more locations later in future iterations.

Competitive Analysis

Artboard – 4@2x.png

Once the target demographic was decided on, I moved forward into a UX and UI competitive analysis to see how other apps were catering to this demographic.

I analyzed 8 apps; 4 religious apps and 4 social media apps. The rational behind this is to understand how to design the best features of social and religious apps into a singular experience.

With respect to my NDA; the image above is an example of how I would conduct a UI competitive analysis; this shows my process of showing stakeholders the most noticeable pros and cons of an app’s interactions and interface.

With respect to my NDA; the image above is an example of how I would conduct a UI competitive analysis; this shows my process of showing stakeholders the most noticeable pros and cons of an app’s interactions and interface.

 

Noticeably, the more successful apps used their Interface as a reflection of their brand’s character. They also used unique icons to illustrate difficult concepts; which would also be vital for a religious app that might have very church-specific features.

This analysis also reflected the importance of walkthroughs and pop-up instructions to teach how to maneuver around unfamiliar apps. Apps that lacked this introduction saw response in negative reviews online.  There was also an astounding amount of negative feedback towards apps that had poor user-company relations, and poorly judged removal of posts (If they were perceived as breaking app rules and guidelines).

Heuristic Analysis

Digging deeper into competitors designs, I conducted a Heuristic Analysis in order to focus on the sensitivity each app had for their users. I paid particular attention to the lowest scoring Usability Heuristics: Error Prevention and Help and Documentation.

Artboard – 6@2x.png

Religious Apps have a particular challenge of allowing their users to interact while also maintaining a safe space for all users. Users will want to know details of events and ask questions. They will also want to connect with others. But where is the line drawn to make sure there isn’t false information or conflict between users?

In one case, an app had a feature to allow users to submit prayers to the public. Not surprisingly, this was abused by scammers to make money, users soapboxing their problems, and users making fun of religion and using abusive language knowing other will see it. It made users painfully aware of other users making the experience less genuine. How can we, as designers, provide a truly safe space, and discern between unintended mistakes vs. “trolls” within a religious safe space?

Not surprisingly, apps with less users and design emphasis scored low on this analysis. Based on this analysis, I anticipate that regards to Heuristics, our company’s challenge will be the effort of creating flexibility of use, error prevention, and matching the system to real world.

Research Insights:

UI

1. Color scheme reflects intended mood of the app

2. Icons aid text in conceptualizing niche concepts (ex: prayer, meditation, kid-friendly)

3. Haptics and cascading images help user move through instructions and app introduction.

4. Fonts, colors, and icons derive from a consistent design system; no surprises.

UX

1. Overall, drawing upon religious icons, giving proper guidance to users, and making sure that the app maintains a positive child-safe social environment, and offering a flexible variety of features, would be vital to a positive experience. Having an FAQ and Point of Contact, making sure there are proper restrictions on users to keep the app child-friendly, would create a safe and trustworthy environment for the users.

For a brief synopsis for stakeholders, I summarized my competitive research findings as a reference for the team to be able to prioritize their goals, then later use the extra materials to further their goals.

***NDA : This is how I typically add a summary after competitive analysis, bringing out the best aspects of an app and seeing how those aspects can be applied to my company’s product.

***NDA : This is how I typically add a summary after competitive analysis, bringing out the best aspects of an app and seeing how those aspects can be applied to my company’s product.

User Interviews

 I then moved on to user interviews; one of the most vital aspects of the process. This was time-sensitive as I needed to find people to screen then interview in one week. I was able to get 4 (1 hour) interviews with Catholic (2) and Christian (2) followers.

I was extremely grateful to the participants, and was sensitive to the fact that it can be very challenging to openly talk about religion and church pain points. I started with a brief introduction to myself, then explained the general context of the company, and reassured them that these opinions are left for internal reference and would not be publicly shared. Moving into the interview, I asked the participants to give me a background on their religious journey. This visibly made the participants more comfortable and open to answering the questions later.

I and asked them about their most and least favorite aspects of the church community (and their ability to give information to their attendees). One participant, who volunteers weekly at her Catholic Church, explained how it’s a complicated situation when events, fundraisers, and services don’t go as planned.

“…I hate having to talk to several people in order to schedule time with the priest. One time the kitchen was locked when we had a deadline. It’s hard to know how much priest’s have on their plate, so it would be nice to be able to go over people if it is super important.”

 
I love to find creative ways to incorporate the company’s design system and color schemes into my UX mapping. The bright purple and abstract waves create a perfect backdrop for clear white text. I always make a point to relay information creatively.

I love to find creative ways to incorporate the company’s design system and color schemes into my UX mapping. The bright purple and abstract waves create a perfect backdrop for clear white text. I always make a point to relay information creatively.

Empathy Maps

All users were excited to share their experiences, and by pulling out key statements and pain points, I was able to translate these findings into two distinct Personas and Empathy Maps.

With empathy maps, I love playing with “skeuomorphism” by making the quotes and notes from interviews places on semi-realistic post-it notes. This makes it look more formal than a whiteboard session, but show how these are pieces of the interviews r…

With empathy maps, I love playing with “skeuomorphism” by making the quotes and notes from interviews places on semi-realistic post-it notes. This makes it look more formal than a whiteboard session, but show how these are pieces of the interviews rather than full statements.

I also love having real images of people to really picture the person behind the words. Although the names of the real interviewees are private, the whole team can imagine this person having these very real qualities.

I also love having real images of people to really picture the person behind the words. Although the names of the real interviewees are private, the whole team can imagine this person having these very real qualities.

The Empathy Maps brought out two separate goals that users could have : connection with new people through extroverted personality traits, and people seeking information and environment.

Personas

Then, the Personas illustrate these same two people as: a young adult seeking a religious space to connect with others, and a parent seeking a opportunities to combine religious and family time.

By the time I use my empathy maps to split personas, there is an abundant amount of information that is challenging to unpack. I like to section the information so its better organized, then put myself in the storyteller’s mindset.

By the time I use my empathy maps to split personas, there is an abundant amount of information that is challenging to unpack. I like to section the information so its better organized, then put myself in the storyteller’s mindset.

With that in mind, the MVP has potential to consider these Personas, and make sure the app gives these unique opportunities to the user.

Design Audit

The final deliverable was looking at the MVP and conducting a Design Audit.

It’s my goal to prioritize the initial Personas. In this case, we need the interface to be mindless for young users (whom are familiar with technology), but also predictable for older users who rely on more common social media apps. This audit revolves around these Personas and a structuring of UI.

***NDA : This is an example of already public screens, and is a representation of what a Design Audit could look like for this kind of product.

***NDA : This is an example of already public screens, and is a representation of what a Design Audit could look like for this kind of product.

When looking at the MVP, I took into account key rules of color theory, iOS/Material Design rules, and WCAG standards to point out points of optimization from a user-centered perspective. The app already has a wonderful UI and Design System of beautiful colors and buttons; my goal was to identify minor IA issues in the organization of the features, and to make sure every page considers how users will be viewing the app.

Final Summary

I then gathered my findings and created a synopsis of all the findings I have made in reference to my other studies. I separate the ideas in recommendation to the MVP, and post MVP.

To simplify further, I create a “forward” to solidify my most important suggestions from the audit. This usually spans to a page or two of information, but for an example, here is how I format them.

To simplify further, I create a “forward” to solidify my most important suggestions from the audit. This usually spans to a page or two of information, but for an example, here is how I format them.

This experience was so insightful, and showed me how user-backed approaches bring the most honest results. There is so much potential for this product to change lives, and I’m so excited to see it’s MVP release.

Artboard – 12@2x.png

Thank you for reading!

Previous
Previous

KarmaBoard : Job Search Engine

Next
Next

Diskc : Building Freemium to Premium Music Media