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.
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 improving the speed of connecting with members and completing follow ups, while 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