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

01 / 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

02 / 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 rebuilt 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

At the time, the Connection Center failed to embody the transparency, clarity, and friendliness that Elevation Church 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.

eGroups Sign Up Pages

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?"

Unique Use Cases

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.

Onsite tent / Elevationchurch.org / Connection Center
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 towards trust issues. 02 / New users are confused with Elevation's terminology 03 / Long list of filtering options feels quite overwhelming 04 / Users aren't sure of why their inputting certain information
Current User Flow

To better understand the existing bone structure of Elevation CC, the team and I mapped out the user flow of each sign up process. From doing so, we realized that 80% of each process was the same. This meant that the bulk of the issues in all (eTeams, Baptisms, eGroups) came from a lack of clarity 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 uses a checkpoint system to help minimize the number of steps required for returning users interested in Baptisms, eTeams, and eGroups

The process 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. 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. 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.

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 to 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.

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 those that participate in the church. With that goal in mind, we designed the Baptism and eTeam experience to ask for the same amount of information as the eGroups sign up process, just with the additional Meet & Greet sign up page.

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 we needed to:

01 / Minimize UI graphic visuals

02 / Simplify necessary sign up steps at kiosk tables.

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

Kiosk Mode- Reenvisioned User Flow

Because 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 one 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 deadline to be shipped.

For future launches, the Digital team has talked about possible integrations with myElevation, Elevation Church's personal user profile platform. This would allow users to potentially leverage Connection Center and myElevation to not only plug themselves into eGroups, Baptisms, and eTeams, but also possibly connect with others in their area. 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's Apple TV 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

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.