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, 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, design and development, 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.
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.
THE USER STORY
User Stories are valuable and an quickly communicate and simplify the benefits a product gives a user.
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.
Findings / Iteration
After initial designs, research was conducted and user feedback was gathered.
The usability studies led to the following data and pain points.
Too Much Tapping
Users didn’t like that they needed to tap in and tap out of touchpoints. A more favorable experience of automatically moving the user to the next step was implemented as a result.
Gamification?
The application didn’t have enough fun interactive elements. As a result gamification was introduced in quizzes. Animations were seamlessly added to the interactions.
What is A Journey?
Users weren’t sure what Journeys were. A walkthrough introduction with animations explaining what Journey’s were was implemented after feedback was received.
Journey Home
Purely aesthetic, however, a more inviting UI was something that users appreciated after revisions were made.
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.
Prototype
Here is a prototype flow 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. 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
Takeaway
As someone interested in learning, this feature was important personally because I consider myself a lifelong learner. This was a feature that was created to make learning more enjoyable and fun. After testing, sessions with stakeholders and a strong user base, the project’s focus became clearer and clearer. Gamification was important. Walkthroughs, decorative elements, interactive components and animations were tools that improved qualitative feedback on the feature as a whole. Notably, the quiz feature was a hit, and users noted that it was a helpful learning tool that was informative and fun. This feature overall increased user engagement throughout all features in the application.
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, checking 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
