Products reviewed during competitive analysis
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.
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.
Competitive Analysis
Looking at some other products in the audio bible space, a few things stood out:
Design-wise, DAB had some catching up to do
Most other products in the space didn't have the same breadth of features as DAB
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.
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.
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.
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.
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.
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.
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.
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
