The Apollos Project

Led design for a robust open-source design system used by many of the largest churches in the country.

Role

Design Lead

Timeline

April 2019 — May 2020

Project Context

Although my time at Differential exposed me to many different projects, my primary focus was leading design for The Apollos Project—an open-source initiative empowering churches to create and own their own React Native mobile apps.

This React-Native design system proved to be a masterclass in theming and how to create components with maximum flexibility as the framework had to work well for different churches across the country, all with their unique brand guidelines and UX desires. In the end, I'm proud to say that I played a large role in creating a system that now powers the mobile apps of some of the largest churches throughout the country.

Get A Glimpse

For the first time in my career, my final deliverable was less a product as it was a framework or a library of components. And this library had to work for theoretically any use case imaginable. There were quite a few instances where I had to prioritize flexibility over my own personal style which definitely challenged me in new ways.

We used our components to design and prototype our own generic Test Flight app which allowed me to get a sense of what could be accomplished using the Apollos UI Kit. But for the first time I wasn't the owner of a singular "product" that users could download and play with on their own.

Instead, we worked closely with churches to help them leverage our design library to create stunning mobile apps that match the look and feel of their specific brand. Here's a few screenshots I pulled from various apps that demonstrate how our theming system allowed for a wide spectrum of possibilities—some classic, some modern, and some rather edgy UI. Depending on the project I either functioned as a design aid for internal teams or the lead designer using my own library to design every pixel of the church's mobile app.

Willow Creek

Designing the Willow Creek app revolved around giving them the ability to create customizable feeds for each of their Chicago-area campuses. They wanted a consistent UI/UX while giving each church full control over their campuses content, announcements, live streams, etc.

Christ Fellowship

Christ Fellowship actually deviated the most from our "Core" library by implementing custom headers and various content grids that aligned with their organizational goals.

NewSpring

Early on in my time working on The Apollos Project, I was able to partner with NewSpring church to design a custom prayer module that is actively being used by their congregation.

The Porch

Most recently, we worked with The Porch—a young adult ministry tied to Watermark Community Church in Dallas. I am particularly fond of this project because it demonstrated just how flexible Apollos can be by allowing for a more bold brand geared primarily towards young people.

Design Process

The Apollos Project is shepherded by Differential, but the founding partners consist of 3 mega churches who initially funded the initiative. As a result and especially in the early days, much of our roadmap was informed by interviewing the various leadership and content teams at these organizations.

As a result, much of the design process revolved around trying to find common ground between churches with (sometimes) radically different views and organizational goals. We used design sprints, lightning decision jams, and our own process of heatmapping in Basecamp to create a system of moving things through the "shaping" process and into a cycle plan.

Speaking of "shaping", for most of the project, our team chose to align ourselves closely with Basecamp's Shape Up methodology, meaning that often times design and engineering were exploring product initiatives in tandem. As a result, more so than any other time in my career, I felt like the majority of my design deliverables looked a lot like this 👇

Open Source Challenges

What truly made this project unique was that it was my first time leading design for something that was inherently open-source, which meant that all my Figma deliverables didn't just have to make sense for me and engineering, they had to make sense for anyone who downloads my files in order to design a church app of their own.

That meant every single component had to be 100% dynamic, customizable, and intuitive to use. Not only that, but designers had to be able to easily access documentation on how components could and should be used.

In the early days, we used the ISA stack (is this a thing?) consisting of Invision, Sketch, and Abstract. I hosted a design system library in Sketch Cloud and allowed other church designers to download our files and any updates I pushed trickled down to each church design team.

About halfway through the project though, we received the green light to switch the entire team over to Figma which proved to be the game-changer for design. Instead of having to keep multiple sources of truth up to date, we were able to move every single part of the process into Figma—including all of our documentation!

Here's an example of what a component frame looks like in the current Apollos UI Kit library (which you can duplicate and use yourself!)

As the project grows I am excited to be able to check in on our Figma file to see more churches continue to duplicate and use our system to design mobile apps of their own 😃

Next Project

Team Boootcamp

View This Project

Say Hello.

Questions, thoughts, ideas... I love connecting with new people so don’t hesitate to reach out.

👍
Oops! Something went wrong while submitting the form.

Connect.

Let's do the social things.

Made with
in Denver