Prayerhubs

Although many modifications have been made since, here is a peak of one of the earliest versions with the Prayerhubs map:

VERSIONS

Within a year of development, major changes to the mainframe and UI were made. The map became smaller, allowing main features to be more visible upon page load an before scrolling. The layout adjusted according to screen size as depicted in the image below. The colour scheme changed, switching to a a more simplified palette. Prayerhubs was redeveloped to be more responsive and fast in v2.1. More features were added, removed and modified.

Take a look at the some of the changes below…yet still many major UX/UI changes since then which we'll look at ahead.

The features that I compared were relevant to the main features that were projected to be in the Prayerhubs web app. I was not surprised by the range of options for notification settings in the comparisons. This leads me to think that in app and email notifications would be vital for retention and developing brand affinity. Connecting and following other members were features to strongly consider moving forward.

ANALYSIS

Empathizing and Understanding

User-centered design is key to Prayerhubs so designing a system based upon social interaction where members can 'connect' with one another was key.

Prayerhubs is targeting the Christian population, specifically those who utilize the internet to share prayer requests, look for spiritual support and want to belong to a Christian community. While all ages are expected to use the website, my focus was be on an audience that engages in social media in the strongest Christian sectors in the US, the Bible belt.

User Persona

Empathy Map

Based on the user persona, I created an empathy map to better understand their needs and goals, so that I can know what the main issues are that my designs needed to solve.

The empathy map helps me narrow down their needs and wants which then help me to define the MVP:

USER SCENARIOS

This user scenario helps me to build a better picture of the features needed and the user flow based upon the use cases of the Prayerhubs members.

Scenario 1

1.  1. Tracey finds out her uncle is going in for surgery and wants to let the members of her church know so that they can pray for him.
2.  2. She posts a prayer request on Prayerhubs for her uncle.
3.  3. The members of her church receive notifications of Tracey's post about her uncle and respond to her prayer request post.
4.  4. Tracey is grateful for the spiritual support received from her connections on Prayerhubs.

Scenario 2

1.  1. Tracey tells her friend Andrew about Prayerhubs so he decides to check it out.
2.  2. She posts a prayer request on Prayerhubs for her uncle.
3.  3. Andrew uses the search feature to search for Tracey on Prayerhubs and happily sends her a connection request.
4.  4. Tracey is notified of Andrew’s connection request and accepts it.
5.  5. Andrew feels comforted seeing Tracey’s posts in his feed and her profile image displaying in his list of connections.
6.  6. Andrew replies to Tracey’s post and is excited about connecting with others.

User Flow

I created a user flow diagram to plan out the path a Prayerhubs user will take based upon their goals. The map works with the main feed to project the user's profile. That is, the map displays the location of the user and their connections on the map at the same time as their posts, connections and profile info (e.g., name, location, Bio, profile image). The feed changes according to the member being viewed.

Early questions involved asking 'what does the user want to do once they get to Prayerhubs?' How does the user create a new post, how would it be displayed, responding to other member's posts, connecting with others, etc. What are their goals and what tasks do they want to accomplish?

The user flow demonstrates how users can navigate to other's member profile pages (i.e., their prayerhub) in a variety of ways. Once there, they can opt to connect with them by sending a connection request.

If a member is not connected to the user, a 'Connect' button will be visible. If they are already connected, the button text displays 'Connected'.

DESIGN

Designing the Prototype

With a clear idea of the main features, it was time sketch out fast iterations of the wireframes before jumping into the mid-fidelity prototypes. I generated ideas, made revisions while continually referring to the user flow.

One of the many early roughs outlined (below) how the feed would be laid out on mobile as opposed to the desktop view. The main user icons emphasized only the fundamental functions such as creating a new post, all posts, my posts and profile settings. Desktop views expanded to display the user profile and widgets.

VISUAL DESIGN

I wanted to keep the interface simple and minimal and inviting. Colours inform the user what he/she can interact with and where the important pieces of information can be found. Subtle use of soft gradients draw attention to widgets.

I used the colour blue as the main colour, because blue evokes feelings of calmness and spirituality as well as security and trust.

High Fidelity Prototype

With the immediate features realized (e.g., new account and profile set-up, posting, connect with other members, etc.), the UI was designed and interactions were added to high-fidelity prototypes for testing. Making changes to the prototype saved valuable time before the hard coding began.