Attender

Attender

The following is a series of case studies outlining my role as a product designer for the in-house product team at LifeChurch Interactive from 2015-2017.

My Role Product Design Lead, UX UI Design, Research, Prototyping, Usability Testing

Timeline 2015⌁2017

Links App StoreGoogle Play

image

Overview

When I joined the LC Interactive team in 2015 I was the sole product designer on a team of five (1 front end dev, 3 project managers, 1 content specialist).

My role was to lead design for the current web properties and to explore the creation of mobile and TV apps.

Over the course of two-ish years our team tripled in size as we took on new responsibilities through the products and ecosystem we were creating for the organization.

The following is a look at some of that work.

Context

Life.Church had this metric guiding all of projects, “the 167″ was based on the fact that at best the church gets 1 hour out of an attenders week leaving an additional 167 hours to engage with them wherever they may be.

The LC website already existed and served up the basic info users needed to attend a church irl, watch church online, and to give online but it was limited in its reach and capabilities.

How could a native app best engage with current attenders throughout the week while also reaching new attenders?

image

Gain Confidence

Explore, Test, Prioritize

Over the course of my first few weeks on the team I conducted discovery interviews and sketched, designed, and tested concepts for the app. I shared these concepts with my team, our team leads, and a variety of attenders familiar with the current website and the common themes that emerged were:

→ Attenders want to be able to listen and watch LC content throughout the week at home, while they exercise, drive, study.

→ They want to be able to connect their LC experience with their current social lives — sharing scripture art, messages, music, and other media.

→ They want to be able to check-in to church services, events, classes, etc with the app versus the current check-in system.

→ They want to be able to give securely through the app, to have a record of and to manage their giving.

→They want a connection between the LC app and the YouVersion Bible app (an app also developed in-house at LC).

image
image

Establish

Systemize & Standardize

As concepts took shape, I set out to establish a working design system and standards so that the website and apps could have parity as they both evolved over time.

This involved setting up shared Sketch libraries for both the web and apps, utilizing InVision for sharing prototypes, and Zeplin for our developers to inspect designs to build.

Iterate

Design, Test, Repeat

Version 1 of the app was focused primarily on establishing strong foundations and connections, bringing the info found on the website into the app with backend systems to sync cross platform.

Attender App Base Features:

→ Manageable

→ Cross-platform

→ News Feed

→ Locations

→ AV Player

We shipped our test builds internally to a small group of staff and a small group of attenders from various campuses.

image
image
image
image

Outcomes

In the first six months we:

→ built the backend to connect our web and apps

→ designed, tested, iterated V1 of Attender including:

→ locations and map routing

→ audio and video players for the weekend message

→ a news feed that simply aggregated the social media from LifeChurch into a stream in the apps home feed

image
image
image

Forward

The Attender App (and our team) gets its wings

It was 2016, one year since my start and our small team of six had nearly tripled in size. We now had in-house iOS and Android engineers by our side and I got a partner in design.

Attender v3 continued to mature as we were able to move faster in-house as a cohesive team. We ran tests locally among our staff, with teams and attenders at the various LC campuses across the US, and with users who didn’t know LifeChurch to help shape the overall experience of the LC digital ecosystem.

image
image

Below are additional case studies and a look at the evolution of the Attender app ecosystem during my time as Sr. Product Designer from 2015-2017.

Project: All the Media

image
image

How might we create a robust media management and multi-platform, multimedia delivery system for attenders?

2016 LifeChurch

Tools Sketch, InVision, Principle

Project: All the Media kicked off during one of our bi-annual hack weeks and we spent the following 4 months accomplishing the following.

How could we wrangle all of the short stories, films, animated shorts, kids shows, study group videos, podcasts, music and other content and deliver it to multiple properties online?

Problem:

→ Hundreds of hours of audio and video not playable, shareable or discoverable online*

→ None of the content was managed within a system, no tags, no cross-referencing, no search, no closed captioning

→ No delivery mechanism to deliver the content to multiple properties

→ No ability to sync what you watched on the web with what you watched on the app (mobile or TV) and vice versa

*exceptions were clips shared on LC social media.

Discovery:

→ a media section for the website and mobile apps

→ content management solutions

→ video encoding processes

→ APIs to deliver all of the content to those properties

image
image
image

Outcomes:

→ We launched a new media experience on the LC website

→ We launched a content management system and APIs to manage and deliver all the media

→ We kicked off design of new media experiences for iOS and Android

→ We were able to improve the transcoding of content 100x from post-production to delivery

→ All of this resulted in over 100 hours of additional content added to all LC digital properties

In the two months that followed:

→ We expanded on the initial ideas explored during Ship It Week and further developed our media delivery capabilities.

→ We launched new media experiences for iOS and Android as well as Apple TV and Android TV apps.

→ The media section surpassed 2 Million media plays across all platforms and the app acquired nearly 8,000 new users.

Project: Automagical Check-In

image
image

How might we create an "automagical" check-in experience for LifeChurch attenders, volunteers, and staff?

2017 LifeChurch

Tools Sketch, InVision, Zeplin, Principle

Project: Automagical Check-In kicked off during one of the bi-annual hack weeks. We had examined the fact that every weekend and sometimes mid-week, tens of thousands of people would check-in to the 27 Life.Church locations via terminals in the lobbies at each campus. These check-ins allowed parents to drop off their kids at daycare, students to check-in to events, volunteers to check-in to serve, and more.

How could we decrease the friction of the current check-in process and increase adoption of the Attender app by allowing attenders to use it to check-in?

The result was a smarter, faster check-in experience that allowed attenders to skip the check-in kiosk line thus decreasing check-in wait times in campus lobbies by an average of ~6 minutes (an average as this varied campus to campus) and an increase of app adoption rate (in the two months that followed, the check-in feature drove 12k+ new installs of the app).

This new location based featured set us up for our next big project that would improve the connection between attenders and their local campus.

Project: the Weekly Guide

image
image

How might we improve the connection between an attender and their local campus?

2017 LifeChurch

Tools Sketch, InVision, Zeplin, Principle

Project: Weekly Guide was a challenge to improve the connection between attenders and their local campus throughout the week by giving each campus their own personalized weekly guide and communication tools inside the Attender app.

The result was a new section in the app that would present itself as a notification when you were inside your campus on the weekend, delivering to your phone what would normally be printed as a "bulletin", but personalized and with interactive features such as:

→ Opt-in to volunteer opportunities, event notifications, and more.

→ Direct tie-in to safely, securely donate and give

→ "the Blue Button" allowed for direct communications such as prayer requests, questions, etc.

→ A playlist of songs from the weekend, and more.

This subsequently cut in 1/2 the printing cost of bulletins at each campus.

image

We also designed and developed a web based editor that equipped central team leads and campus team leads with the ability to update and manage their content in the app and provided a visual of how that content would be displayed in the hands of the attenders.

Project: Giving Experience

image
image

How might we improve the online giving experience on the web and introduce a native solution in the mobile apps?

2017 LifeChurch

Tools Sketch, InVision, Zeplin, Principle

Project: Giving Experience challenged our entire team as we wrestled with bending an antiquated giving and donations system into a unified experience across web and native apps.

The result was a smarter, safer, simpler giving and donations experience across web and mobile.

This was the last project I worked on in my time at LifeChurch and when I left it was still in development.

Project: Augmented Reality

LifeChurch sends out tens of thousands of printed mailers for various big events. What if we could make those magical?

2017 LifeChurch

Tools Sketch, InVision, After Effects, Zeplin, Principle

Video 1: Prototype: Sketch for UI, animations in After Effects, Principle to bring it all together.

Video 2: Here we are presenting what we made for Ship It Week.

Video 3: Dohyeon demonstrating the working experience in ARKit.

Timeframe:

We spent one of our Ship It Week's working through this idea and brought it to life.

This was an attempt to:

→ increase adoption of the Attender app

→ bring those mailers to life

→ help spread the word about these events as church goers would share the experience with their neighbors, friends, family

→ explore AR in LC apps

Process:

My role: Ideation, Design, Prototypes with Sketch, After Effects, Principle app

Dohyeon (LC Engineer): Development using AR Kit

Project: Church Online

How could we bring the weekend experience into the Attender mobile and TV apps?

2016 LifeChurch

Tools Sketch, InVision, Zeplin, Principle

My role Ideation, Design, Prototypes with Sketch, After Effects, Principle app

Project: Church Online This was an exploration of a LIVE Church experience in the Attender TV and mobile apps.

This was an attempt to:

→ increase adoption of the Attender mobile and TV apps

→ bring the web based Church Online experience into the mobile and TV apps

→ improve the LIVE experience within a native app experience