Bible App Design Ideation

A project to demonstrate my process from initial request to design-review-ready user interface.

Problem
23 percent of Millennials and Gen-Xers reported using the Bible in a digital format several times per week. YouVersion can encourage and reward their engagement by:

• Improving daily reading plan completion rates.
• Improving plan completion rates.

​
​​​Approach
The project was presented from this request:
"Redesign the flow and UI for completing plan days and finishing a plan."

To design effectively, I needed to understand "Why?" first. Starting from "Why", which involved secondary research sources,  I crafted a focused problem statement (see Problem above). The problem statement serves to:​

View preview as a png

• ​​Clarify context for user needs and organizational goals.
• Create a shared understanding among stakeholders and project collaborators.
• Compare design impact against​.
  ​
  

The project was divided into two phases, Discovery Research and Design.
1. Discovery Research

• Understand a general layout of the app through exploration to gain insights for all the locations a user encounters an opportunity to engage in plans.
• Seek out sources to understand how people engage in a digital Bible.
• Choose design tenets to design from, encouraging engagement with plans. 

 
2. Design - ​Craft an interaction and interface design targeted to make an impact on:

• ​Daily reading plan completion rates.
• Plan completion rates.

​
Discovery Research
A literature review provided an understanding of American YouVersion user goals, motivations, and behaviors. 

• Six in 10 Americans believe the Bible has transformed their life and 2/3 of Americans are curious to know more about what the Bible says.
• YouVersion plans in English were the most common.
• YouVersion users were 24 times more likely to read a chapter than to complete a reading plan.
  ​​

An exploration of the YouVersion app indicates plans for Millennials and Gen-Xers are accessible through all primary navigation elements.

Yellow highlights are selections that lead to plans or plan notifications. Dark text in top whiteboard boxes is primary navigation.

View whiteboard as a pdf

Provisional Persona
A Provisional Persona was created from sources related to digital Bible use and App reviews. The persona provides a focus for design outcomes and testing. 

Design Tenets
The YouVersion Bible app is a sovereign app, intended to engage users for a period of time. Designing for habits as illustrated in  Hooked by Nir Eyal provides a frame for Design Tenets. 

1. Trigger - External prompt to take action.​
2. Action - Streamlined, delightful, and simple.
3. Variable Reward - User takes action and receives a variable reward.
4. Investment - User's contributions add value to the engagement. 

View persona as a pdf

Interaction Design  
App Reviews indicate user pain when they missed a day and lost their streaks. To encourage engagement, 

• Users should always feel supported and celebrated when they engage with the Bible app. The inner work of behavior change is personally challenging.
• Provide a friendly, supportive app notification or a text as a trigger to engage if a user has a plan selected but has not engaged with the plan for three days or more. 
• If a user is not on track, the app 'helps' them through a
  "Catch me up" link.
• If "Catch me up" is selected, the user may select to listen to audio to catch up.  "Catch up" triggered audio auto-plays until all days are caught up. 
• ​All plans should have quick access to audio controls.
• When a day is completed, a unique celebration icon and a notification sound should celebrate the user's engagement for the day.
• When a plan is completed, a big celebration with an animation and special notification sound should play. 
  • ​Screen show display # Plans | Streaks | Weeks.
  • Ask the user to leave comments through a "Journal" feature for others who choose this plan.
  • Display recommended plans for re-engagement.
    ​

Orange annotations explain implementation of Design Tenets

View Interaction Design (user flow) diagram as a pdf. 

An abbreviated Service Blueprint serves as an artifact for conversation between project managers, development, and design. 

View Service Blueprint as a png

Wireframes
An updated card navigation on the home page focused on plans for specific users:

• Signed In
• Selected at least one plan

Sketches to explore ideas before jumping into a digital tool.

The Home page for these users started with information about their plans, with a clear CTA to read or listen. Buttons open to the selected plan.  

Approach to digital wireframe designs:

• Reconfigure existing elements for speed to development.
• User-centric navigation and page layout to help users accomplish the goal of completing a selected plan.
• New elements to help uses engage with a plan with ease and simplicity. ​

View Home Wireframes as png

View Plans Wireframes as png

View Completed Plans as png

​Results
The annotated design documentation below illustrates user-centric designs for daily plan completion and plan completion. These designs are ready for a design review. Before implementation, the designs should be revised based on designer and stakeholder feedback and tested with users. 

• Engagement with plans is encouraged by making plans the default first card for signed in users who have selected a plan. The default provides a trigger for user activity. 
• Users will feel supported and celebrated when they finish a plan. The daily and plan celebration animations mark milestones of achievement for users, giving them a variable reward.
• If a user is not on track, the app 'helps' them through a "Catch me up" link, giving the user an opportunity for action. 
• ​All plans have quick access to audio controls encouraging user action if the user is unable to read at that moment. 
• When a day or plan is completed, a unique celebration and a notification sounds  to celebrate the user's accomplishment, reinforcing their investment of time. 
• Prototype of Catch Me Up. Would be improved by subtle animations. 

View Bible App Design Ideation document as png.

Back to Selected Projects