← Case Study: Attender App for iOS & Android
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. I transitioned from product designer to senior product designer and a mentorship role. The following is a look at some of that work.
Do Life.Church attenders want a mobile app and if so, how could a mobile app serve their needs outside of the weekend church service?
Ideation, UX/UI Design, Design Systems, Prototyping
Timeline 2.4 Years
Tools Sketch, InVision, Principle
Life.Church had this metric guiding all of our 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.
Enter: Attender App
First things first, do LifeChurch attenders really want an app? If so, what would they want in that app? And if then, how could a native app best engage with current attenders throughout the 167 and reach new attenders?
01. 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).
With these insights we were able to set a rough roadmap for for a potential app, prioritize features, and begin testing the first versions of what would become the LifeChurch Attender App.
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.
Below is a snapshot of the evolution of the Attender design system from 2015-2017.
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.
→ News Feed
→ AV Player
We shipped our test builds internally to a small group of staff and a small group of attenders from various campuses.
In the first four months we:
→ built the backend to connect our web and apps
→ designed, tested, iterated the following into V1:
- 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
Explorations, Fails, & Lessons Learned
As seen in the prototype above I explored a V2 for the app and those explorations deviated heavily from the standard iOS and Android patterns we had established in V1.
In this time I was trying to find one design library and set of patterns that could work across both platforms and offer a unique experience in the app. In retrospect, I was struggling to keep up with iOS, Android, and the website designs on my own and was looking for a way to streamline my design process.
What ended up being a somewhat easier process for me (a unified design that was also to be cross-platform) ended up taking longer to develop as mostly everything in this version was custom. Additionally, these patterns didn't test well with users as they were so radically different.
We abandoned that approach after a short run of tests and returned to native patterns for both iOS and Android and soon after the app took off.
I also asked my team lead for help in design and was able to recruit a designer (who had shown some interest in ux/ui design) from the LC creative team to join our team. This took a huge load off my plate as I was able to delegate web design projects to Ryan, my new partner in design, and mentor him in product design along the way.
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.
Below are a few links to case studies documenting some of the features we built into the Attender app throughout my time on the team up until 2017.
Related Case Studies.
Giving Platform (This case study is in the writing process.)
Weekly Guide (This case study is in the writing process.)