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 rebuilt the existing Elevation CC into a platform that better encouraged people to take their next steps of engagement and relational investment.
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.
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?"
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.
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:
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.
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.
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 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.
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.
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.
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.
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.
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.