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
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).
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.
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.
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.
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:
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.
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.
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:
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.
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.
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.
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.
Though a list search of eGroups would get the job done, we couldn't help but ask:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The Apple tvOS 12.4.1 relies heavily on microinteractions to enhance the viewing experience. More to be uploaded soon.