Elevation Church

UIUX - Summer Design Internship 2019

Collaborators: Corey Pruitt + Digital Team
Duration: 12 Weeks
Skills: UI/UX, Wire-framing, User Research, Visual Branding
Tools: Sketch, InVision, Adobe CC, Wordpress

Overview

This summer, I was given the opportunity to join Elevation Church's Digital Team and collaborate with a diverse team of designers, developers, and data analysts. Throughout my 3 months in North Carolina, I embarked on various projects such as researching, prototyping, and creating the initial vision for Elevation's Apple tvOS app, as well as relaunching Elevation Connection Center, a digital platform for people to get connected through small groups, volunteering, and baptisms. Every week, I also gained insight and personal development teachings by leaders from Elevation's various departments (production, finance, creative, etc).



About Elevation

Elevation Church is a global ministry with a weekly attendance of 26,000 people across 18 physical locations, as well as a massive online streaming and social media presence. The ministry is also home to the Grammy-nominated music group Elevation Worship. Being able to be a part of Elevation this summer has not only given me experience with project management and UX design tools, but also insight on what it means to collaborate in a creative atmosphere with right-brained engineers who think in ways a designerq usually does not.

Weekly Sunday Service at Elevation Ballantyne

Digital Team Weekly Strategy Meetings

01 / Elevation Connection Center

Elevation Connection Center (CC) is a digital platform for people to get connected with the Elevation community through joining/leading small groups (eGroups), volunteering (eTeams), and Baptisms.

As a design team we deconstructed and redesigned the existing Elevation CC into a platform that better encouraged people to take their next steps of engagement and relational investment.



Elevation Connection Center 2019 Redesign

02 / Problem

At the time, Elevation Connection Center failed to embody the transparency, clarity, and friendliness that Elevation Church as an organization is known for. The site presented input forms in overwhelming and intimidating ways and users were asked to input large amounts of information with no suggestion of what it was going to be used for.



Interviews + User Feedback

Before making any initial design decisions, the team wanted to get a better feel of people's impressions with the current UI. Below are some of the takeaways we got:


01 / Unpolished UI is contributing to a hesitant experience. 02 / New users are confused with Elevation's terminology 03 / Long list of filtering options feels quite overwhelming 04 / A lot of information is asked for and users don't know why
eGroups Sign Up Pages
Privacy Concerns

When users input their name, Elevation CC displays an "Is this you?" page of existing users with similar names as a way to expedite the process for returning users. This current design poses a huge security issue since it means any individual can type in someone else's name and sign them up for Baptisms, eTeams, and eGroups.

Problem: any individual can signup someone else + see their DoB
Inefficient Process — Welcome Tent Kiosks

A common way new church members get integrated with Elevation is through digital kiosk tablets at Welcome Tents after Worship Experiences on Wednesdays, Saturdays, and Sundays. With over 400 people in attendance at any of Elevation's 18 locations, the existing Elevation CC process takes too long to complete. This results in lower conversion rates, which is a huge problem considering Elevation's mission of reaching as many people as possible.

Welcome Tents after bi/tri-weekly Worship Experiences

02 / Solution

Goal

Our goal was to make the sign up process for eGroups, eTeams, and Baptism as welcoming and convenient as possible. Our big question was, "From start to finish, how do we make this experience feel less like an obligation and more like an invitation?"


Our solution comprised of four points of emphasis:


01 / Complete visual design overhaul 02 / Addressing user-profile security issues 03 / Identifying returning users from new users 04 / Expediting the sign-up process (online & welcome tents)

03 / User Categorization + Flows

Users have three primary ways to access Elevation CC: (1) People who attend Worship Experiences on Wednesday, Saturday, and Sunday can walk up to onsite tents set up for newcomers and those interested in getting involved. (2) Those browsing Elevationchurch.org can access CC through the website's subpages. (3) Finally, there are users who might be exposed to Elevationchurch.cc by a friend, which ultimately skips the explanations provided by the website and onsite church volunteers. By consciously noting the various ways that people engage with Elevation CC, we realized that we needed to redesign CC so that it could somehow stand alone as its own entity and also act as a transition point from somewhere else.

Different user scenarios
Current User Flow

The current sign-up process asks for an email and then name as verification points for returning users. However as mentioned before, both new and returning users are then often prompted to a highly problematic "Is this you?" page with a list of individuals who have similar names.

By mapping out Elevation CC's current flow, we realized that 80% of the processes were the same for eTeams, Baptisms, and eGroups. This meant that the bulk of the issues in all three came from a lack of clarity and efficiency in these series of actions.

Redesigned User Flow

Upon revaluating and digging into the existing flow, we decided to implement a new sign up experience that used a start-to-end checkpoint system to help minimize the number of steps required for returning users interested in getting signed up.

04 / Redesigned Elevation CC

eGroups - Search by List

The design team redesigned these pages with the goal of bringing more personality and light-heartedness to the process. This prompted us to introduce colored navigation, leader profiles, and an expandable map interface.


eGroup - Search by Location

Though a list search of eGroups would get the job done, we couldn't help but ask:


"What if someone wanted to an find eGroup that fits their preferences AND is close to where they live?"

CC 2019 gives users the ability to transition from list view to map view, giving them the option to search eGroups by proximity via city or zip code.


Sign Up Process

To avoid the problem of feeling overwhelmed, we designed the process so that users would proceed one step at a time. A big problem in the past Connection Center was the formidable sensation of seeing a page load with ten mandatory input boxes. By breaking it into steps, we were able to solve that issue as well as skip any uncessary steps for returning users, which will be mentioned later.


Security Solution — Verification Code Text

The app first asks for a phone number followed by a verification code. The request for the phone number serves both as a security caution as well as the first piece of information to look up.



Scenario 1 — Identified Phone #

If the invidual inputs their phone number, verifies the code, and the system finds a user match, then the process ends there and an "Is this you?" confirmation page comes up. That existing user no longer has to redundantly input his/her name, email, and address.

Unique phone number is identified and user skips to end of process
Scenario 2 — Unidentified Phone # or Multiple Entries

If there are multiple existing entries for the phone number, or if it's not found at all, the user is asked for a second piece of information and the process continues.

Phone number isn't identified ✕
Unique phone number is not identified/unique and user continues to fill information
Baptisms and eTeams

For those interested in joining eTeams and getting baptized, Elevation requires individuals to go through an in-person Meet & Greet. As a design team, we wanted to build a universal process that would allow the data team to easily keep track of and organize information. With that goal in mind, we designed the Baptism and eTeam experience to ask for the same pieces of information as the eGroups process, just with the Meet & Greet sign up page to replace the eGroup interactive map and list function.


Preliminary eTeams & eGroups Scheduling

Kiosk Mode

Tackling the UI layouts for mobile allowed us to easily adapt the designs for tablet (and desktop) view. Referring back to the various use cases and possible journey maps, Kiosk Mode is solely intended to be used at an onsite Elevation location. Given that large numbers of people line up after weekend Worship Experiences to get connected, our goal for Kiosk Mode was to be as efficient and distraction-free as possible. After a series of one-on-one conversations and a couple team meetings, we realized focus on two primary things:

01 / Minimal Visual Interface

02 / Expedited sign up process at Welcome Tent kiosks

All irrelevant UI components are removed, which includes the web app's navigation bar and page footers.

05 / Kiosk Mode- Reenvisioned User Flow

Kiosk mode is all about simplification and expediting the time spent waiting in line. Upon filling selecting event/group details, the user completes the rest of the process on his or her own device.


Final Thoughts

As 1 of 3 designers on the Digital Team, we handed off all designs within a two week timeframe. One of the most valuable moments from working on Elevation CC was the opportunity to sit in with developers and walk step by step through every part of the process. It was in these moments that I began to understand what it meant to work "collaboratively." Not just with fellow design students on hypothetical prototypes, but on tangible products that have a shipping deadlines.



Challenges

Elevation Church has ten values that they heavily emphasize, especially for the creative teams, and one of them is the ability to Think Inside the Box, which can be summarized to mean embracing limitations. During this project, I had so many ideas and app functionalities that I believed should be implemented, many of which were turned down because of our given timeframe and technical limitations. Working on this project with developers and other designers really taught me how to innovate and think creatively under strict guidelines and skills.



Future Direction

For future launches, the Digital team has talked about potential development of an official user dashboard platform where church members would be able to view and sign up for upcoming commitments and events all in one place. Elevation Church exists so that people far from God will be raised to life in Christ and that's what we geared Elevation CC to contribute towards.

03 / Elevation tvOS App

[Documentation Still in Process]

This summer, I also prototyped the first designs for Elevation Church's Apple tvOS app. Elevation strives to reach people who can't make it to physical locations, so weekly Worship Experiences are already broadcasted weekly on platforms such as Facebook, Youtube, Elevationchurch.online, Roku app, and now Apple TV. Aside from discussions with Simon (app developer) and Corey (UX lead), this was primarily a solo project where I was given the freedom to explore any design direction given the existing build limitations.


Main UI Spreads
Home Page — Navigation
Category Transitions
Research

Quite honestly, I never really had the opportunity to use Apple TV prior to coming to Elevation; my family didn't own one and neither did my friends, so I was walking into this completely fresh. I began by analyzing the existing tvOS applications to better understand existing patterns, conventions, and practices.


Apple's tvOS Human Interface Guideline

Apple TV / Ted / Amazon Prime

Light Mode vs Dark Mode

Elevation Church's primary website Elevationchurch.org utilizes a light UI card design across all pages except for individual sermon pages, which showcase a dark interface for more comfortable video streaming.

Talking with my supervisor Corey, a big part of our conversation was making the design of Elevation's tvOS app mirror the design system present everywhere else but yet somehow still provide a well-catered experience to couch streaming. Below are template designs for both light and dark mode. At the end, we decided to move forward with the latter.

High Fidelity Prototypes

Elevation Church can be split into a various number of ministries, primarily their adult and youth ministry. Both the Sermons page and Elevation YTH page showcase a full width banner displaying the most recent stream. Videos are categorized by popularity, recency, and series, and clips.

/ More Micro-interactions Coming! /

The Apple tvOS 12.4.1 relies heavily on microinteractions to enhance the viewing experience. More to be uploaded soon.