Daily Audio Bible

Re-Designing an Entire Listening Experience Around Community

Overview

The Daily Audio Bible (DAB) is an audio streaming platform for listening to scripture readings individually or with others. New episodes are posted daily to multiple channels, which guide listeners  through biblical texts in various ways. Users can also submit and respond to prayer requests. As  design lead, I was in charge of re-designing the entire product from the ground up. 

Key Accomplishments:

  • Grew the project scope from visual explorations to a complete re-design

  • Designed a new multi-device UI system that’s consistent across all iOS and Android devices (mobile, tablet, and desktop)

  • Reorganized navigation to enable users easy access to key views and feature discovery

  • Brainstormed and facilitated discussions around new features that prioritize community engagement

Methods: Heuristic Evaluation, Competitive Review, User Interviews, Wireframes, Prototypes, UI Design

Discovery & Planning

In early talks with stakeholders and users, it became clear that what distinguished this bible-reading app is its community engagement features. In addition to listening to daily scripture readings, users can submit and respond to prayer requests via a forum. They can also send audio memos to the DAB team, which, in turn, are read "on-air," for others to respond to.

Despite these distinctive features, the hierarchy and organization didn’t support or prioritize them.

Daily Audio Bible

Initial Observations

After performing a heuristic evaluation, it was clear that the current navigation system could be improved to better accommodate the community aspects of the product.

Daily Audio Bible

Products reviewed during competitive analysis

Competitive Analysis

Looking at some other products in the audio bible space, a few things stood out:

  1. Design-wise, DAB had some catching up to do

  2. Most other products in the space didn't have the same breadth of features as DAB

Daily Audio Bible

Initial sketch outlining a new way of structuring navigation

Planning the Restructure

Giving all views equal priority in the menu wasn't properly showcasing important parts of the app that were clear differentiators for DAB. After some back and forth we landed on the idea of a bottom bar, but this would require significantly reworking the flow and structure of the product.

Daily Audio Bible

Wireframes and Flows

To start fleshing out how the new structure would come to life, I put together wireframes, flows, and sitemaps.

Design & Execution

Over a year's worth of work went into designing the entire experience with close collaboration from engineering and DAB stakeholders. Below are some highlights from the UI design, all done in Figma.

Daily Audio Bible

Audio and Video Player

This proved to be more of a challenge than I anticipated. The player had to support audio and video, the ability to read along with the audio, and the ability to take notes along the way. All while being in a single, collapsable view.

Daily Audio Bible

Hotline Submissions

A feature that was a lot of fun to re-design was the 'hotline,' where users submit requests for prayer or encouragement via short audio memos. The microphone icon lights up and pulses while recording is in progress.

Daily Audio Bible

Forum for Prayer Requests

The main way users interact with each other on DAB is through a forum, where requests for prayer and encouragement are submitted. The previous design was hard to read and use. I suggested the idea of avatars, if users choose to upload one. This brought a nice touch of personality to an otherwise text-heavy layout.

Daily Audio Bible

Achievements and Progress Tracking

There was basic progress-tracking functionality built into the app, but it was buried, hard to find, and didn't give much insight into how far you've come over long periods of time. With the help of engineering, to figure out how it would work, we came up with a way to track total reading progress throughout a year, based on which verses a user has listened to across all channels.

Daily Audio Bible

Onboarding Experience

With a full re-design, we had to make sure our existing users weren't overwhelmed when they updated to the new app. I created a series of overlays and walkthroughs that guided users through the new features and helped get them set up.

Daily Audio Bible

All views were laid out for mobile, tablet, and desktop in both light and dark modes

Final Layouts

Through a long process of back and forth we landed on a design that will delight users and set DAB up for future growth and success. Here are some more select screens from the UI.

4
Device sizes
160+
Screens laid out
2
Color modes