Project

Staff Back Office App

iOS and Android Application

CLIENT Background

Saddleback is based in Lake Forest, California. It was founded by Pastor Rick Warren in 1980. The church has grown to have multiple campuses in California and around the world. Saddleback has made a significant impact in the world through its ministry, outreach, and innovation. It is a church that seeks to be a sanctuary for hope and healing for people from all walks of life.

Client

Saddleback

Location

Remote/Lake Forest

Role

UI/UX Designer & Researcher

The Challenge

Historically, Saddleback relied on a back office web tool to manage the church and it’s operations. Often times their leadership is on the go, and the desktop tool isn’t very mobile friendly. The client wanted a mobile application that’s simpler and less cumbersome to use for their staff. Saddleback needed a quick and easy way for staff to complete tasks, follow up with members, check metrics, etc, etc. We’re going to look specifically at the scenario where a staff member is notified of a person who needs to be followed up with.

Analysis

The Initial Qualitative and Quantitative research was conducted based on the users experience with the back office tool. Surveys and Interviews were conducted where pain points were discovered; difficulty completing tasks; too many clicks; bulky UI; needed to quickly take notes. Research and analysis continued throughout the build process.

Design

Flows were created for this particular challenge accounting for all permutations/states of completing a task. Created a new component library using legacy products while adding components for new functionality. During the build; user walkthroughs/demos showed that quick gesture actions to complete tasks were intuitive and well received.

g

Refine

Prepared extensive mockups and wireframes early on and met with stakeholders and clients along with some user test groups. Based on research; high fidelity prototypes were built and swipe actions were refined. Components that supported a swipe to complete tasks were needed as well as the ability to perform bulk actions.

Execute

Designs were completed and pushed to production. Utilized Azure, Figma, Sketch, Protopie to ensure proper handoff with development. Continual Research conducted during execution and there were iterative updates based on feedback. The product lifecycle continued on with our Agile development process.

The User Story

User Stories are valuable and an quickly communicate and simplify the benefits a product gives a user.

User Interviews

This is a sampling of the results of the Interviews that were conducted. Interviews helped pinpoint the pain points of the back office applications follow up process. Users were generally excited for the mobile application since the back office was difficult and cumbersome to use.

Journey Map

Take a closer look at Zachary’s journey of receiving tasks, and completing them. This process of walking him through this scenario was helpful in understanding the users process throughout the flow.

Flows

In this particular example we’re looking at a task flow for completing a follow up. This use case was for a staff member who marks a task done while following up with an inquiry from a member of Saddleback. You can see that all permutations and states were accounted for at this stage. This was a typical in my process as I created flows for each feature handled by the Ministry App. With such a comprehensive feature list, flows were imperative to create to help plot out actions taken by the user.

INTERACTIVE DESIGN COMPONENTS

After user research conducted with focus groups, I created a solution for using swipe gestures for contacting people and marking tasks as successful. These interactions yielded positive results and users were able to complete tasks more quickly with measurable less interactions.
Swipe Right = Contact Options
Swipe Left = Expose Actions
Check Mark = Bulk Actions Available

MOCKUPs

Here is a sampling of mockups for this project. The homepage has information valuable to the user such as things like: a quick search for people as well as follow up categories based on permissions within the back office. The user is able to make a selection of the category and quickly interact with each person on the list of follow ups. Swipe gestures as mentioned above aid the user to quickly call, text, email and follow up with people. Bulk Actions, and the ability to select secondary actions are available to the user as well.

Sketch/Protopie Prototypes Available by Request

More Images

Below are more images from the application. The use case listed above is specifically for handling follow up task completion. I was the senior designer on all of the work displayed here. Note: this data does not include any sensitive information of active users of the system. The content is purely for demonstration purposes only. 

Home Page - User Permissions Based

Follow Up Lists

Follow Up Tickets

Follow Up Quick Swipe Actions

People Search

Person Record

Metrics Home Page

Detailed Trending Report

Event Check In

Child Check In

Takeaway

As a church, it is imperative to make sure not a single person falls through the cracks. With the system we developed at Saddleback, it allows pastors and staff members to rest in the confidence that every single person who inquires about anything at the church is accounted for. With the implementation of a mobile app, the experience became quantifiably and quantitatively better making the system more usable, useful and enjoyable. The implementation of swipe gestures tested well in the design phase and post development. Building out animated high fidelity prototypes in protopie was useful in both stakeholder acceptance and development handoff. I’m proud of the work I did as the lead designer on this project and I’m please with the development effort as well.

Furthermore, as you can see there are many examples of other screens shown above that were not part of this case study. This particular case study is just a small example of the design projects I led on this mobile application. I’d be happy to share more upon request. Thanks!

-James