Project

Mobile Engagement 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

After initial launch of the mobile app, it became very clear that Saddleback was interested in leveraging the mobile app to deliver new content to it’s users. There is a wealth of knowledge in Saddleback’s library and the team was charged with expanding the apps functionality to educate and teach it’s users. After extensive research, we launched a new feature called ‘Journey’ which was a method of delivering courses and education to its users. The courses were informative, yet concise and meant to be part of a users daily or weekly rhythm. Research was imperative in the process. Extensive user research, usability testing, and interviews were conducted in creation of the work displayed here.

Analysis

User research was conducted based on the users previous experience with the mobile app and the website. Exploratory work and with competitive analysis were conducted to ensure a deeper understanding of Saddlebacks needs and vision for this project. Research and analysis continued throughout the build process.

Design

Utilizing A/B Testing with users along with walkthroughs and demos, I was able to pinpoint user and stakeholder preferences. Design options accounted for all permutations/states of a user and courses. During the build, user testing led to discoveries that animations with quick succinct content was highly preferred by users of the app.

g

Refine

A limited launch and dairy studies by user test groups were conducted during the refinement and design phases. Data from research was synthesized and utilized to refine the product with animations and gestures. Animated prototypes were crucial in the refinement and design process. New components that supported new functionality developed.

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.

Proven Results

Let’s start with some stats that show the effectiveness of the work I’ve done on this project. The efforts of research, design and development of the new feature ‘Journey’ that we’ll be featuring here fostered a large increase in downloads; and usage throughout the entire app. Here are some stats that show the proven results of the work that was done. The three different statistics shown here are: Journey Specific Results; New Downloads immediately after the feature release of Journey, and Increase in Engagement in and throughout other areas of the application shortly after release.

Surveys

Surveys and findings help pinpoint the usability and viability of a product. Here’s an example of a System Usability Scale Survey that I use in my research. In our example; users were generally happy to use the product and we discovered improvements to the experience.

Journey Map

Take a closer look at Allisons journey of looking for taking a class. From downloading the app for the first time, to choosing a class to participate in, to completing the course in it’s entirety.

Diary Studies

Initially this feature and released it to a small number of people. Participants were asked to take a diary while taking the course. Results from diary study findings were then synthesized and adjustments were made to accommodate data collected.

Flows

In this particular example we’re looking at a task flow for completing a day’s worth of learning. A typical day can have video, audio, quiz, readings and can support linking out to a website. There are several permutations and states accounted for at this stage. Once a days worth of material is finished, animations and supporting UI help the user understand the system status and where they are on their Journey. For this and all other use cases; I’ve created flows for each feature handled by the Member Engagement App which was necessary for simplifying task flows for all stakeholders including designers, developers, product, etc. 

Wireframes

Here is one of many wireframes for this project. In this particular example; the user opens the app and arrives on the Journey Tab for the very first time. The user has an option to view intro screens to learn more about the feature in general. The user is then able to register for the Journey and then take the courseware selected. The screens walkthrough what it’s like to complete a full day of courses. 

INTERACTIVE High Fidelity Prototype

In order to conduct user research, I created fully interactive prototype for the quiz feature. The quiz feature was introduced to allow users to test their knowledge after completing videos and readings. 

The quizzes came complete with animations and celebrations to make the learning experience more fun and exciting.

Qualitative results were positive during user testing and participants in the study were positive with the quiz feature.

The simulation to the right shows a user attempting the quiz. 

 – The first attempt the user answers a question incorrectly.

– The second attempt the user answers all questions correctly.

– The user is then greeted with an animation when getting 100%.

Screenshots

Some Screenshots from this particular flow.

Journey Home (Not Registered)

Walkthrough

Journey Details Page

Journey Pathway (Modules)

Journey Video Module Example

Success Animation for a Completed Day

Sketch/Protopie Prototypes Available by Request

Other Screenshots

Below are more images from the application. The use case listed above is specifically for handling the ‘Journey’ feature. You’ll see in the screens below, that the app has a quite extensive feature list. From watching videos, taking notes, registering for events, checkin in children, donations , and much more.  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. 

Video Player and Service Home

Dark Mode

Resource Search and Filter

Event Details

Form Submission/Follow Up Task

Notes and Journaling

User Profile

Child Check In/Scan Section