Deaf Bible Society Mobile Refresh

Providing the Bible in Sign Language through improved navigation, new features, and streamlined usability.

Deaf Bible Society Mobile Refresh

Providing the Bible in Sign Language through improved navigation, new features, and streamlined usability.

Deaf Bible Society is a non-profit organization that provides free access to Bible translations by video in 25+ sign languages. One of the primary ways they deliver these translations is through their mobile app. Being the primary Bible resource for the Deaf community, the app was already highly rated and loved by users. However, the navigation was in need of a usability refresh and the team was ready to implement new, robust features.

Unique challenges
Being that the sole audience for this application is the Deaf community, accessibility needed to remain top of mind throughout the design process.  For many deaf individuals, sign language is their first language, and written English (or other language) is learned as a second language, if at all. For this reason, we needed to avoid relying on text for navigation and description as much as possible. When text was used, we made sure there was a self-explanatory image or icon accompanying the text.

Global Audience
The mission of Deaf Bible Society is to provide sign language translation of the Bible worldwide, meaning that users of the app will originate from all over the world. Any text in the app would need to be translated for each region, and any accompanying sign language videos would need to be translated and recorded for each region's sign language (and in some cases, regions may have multiple sign languages). Considering the time and resources this would require of the non-profit, it was important that we avoided unnecessary text and video descriptions.

Opportunities for improvement
- Current navigation was not intuitive and was lacking a hierarchal structure. 
- The app home page didn't feel like a "home base" within the app, and it was unclear how it related to subsequent pages.
-  Important pages, such as "About", "Donate" and "Support", were all hidden behind a settings icon on the home page, meaning that the users would not likely find these pages unless they stumbled upon it.
The goal
The goal for this refresh was two-fold and thus was broken into two milestones for design and development:
Milestone 1
Improve navigation with consideration for both existing features as well as future features.
Milestone 2
Design and incorporate new features
Streamline usability of current features
My role
I worked as the sole designer for this project, working through the UX and UI design of each Milestone on my own before finally passing the design along to the Project Manager for feedback and approval. After feedback was incorporated into each design, I assisted in developer coordination and visual QA before each release.

Exploration began by discussing the current app and its challenges with the Deaf Bible Society team, including gathering valuable input from Deaf team members. Using that feedback, I began by sketching new navigation options for Milestone 1 and sharing them with the team for review in InVision.

InVision Freehand presentation of three different navigation directions.
The team ultimately decided to proceed with Option 1.

Milestone 1 Solutions
As a first step in updating the app's navigation, the home screen needed to be rethought. In the original flow, a user was brought immediately to a screen displaying Bible translation options. This flow could be confusing for new users, as there was no introduction as to what the app was offering or why they were being dropped onto that screen. In addition, the options displayed through icons at the top of the screen, while simple, were confusing and distracting from the main content. These were the two issues we set out to address at this stage.

New home screen
To address the issue of the home screen, we decided to welcome the user to the app by starting them with direct access to the books of the Bible going forward. This would better meet the expectations of a first time user as well as provide better context into the value and purpose of the application.
In the original design, users could change their translation preference by tapping the flag icon in the upper left. Once a country was selected, it would bring the user back to the home screen where the translations were listed. While we felt this functionality was important to keep on the home screen (and not hidden within a menu), the flow felt disorienting. So, I consolidated the country and translation selection into one section - a new drawer that opened from an icon in the upper right corner (The icon was moved to the right to allow the hamburger menu to sit in the upper left, as is standard).
We also decided it would be more valuable to display the chosen translation icon in place of the country on the home page, as the user would most likely not be changing their region once selected. When this icon was tapped, it would now bring them directly to the translation selection screen instead of the country selection. Of course, the user could still change their selected region by tapping "Change..." underneath the displayed country, but they would no longer be required to select their country each time they wanted to view alternate translations for their region.
New navigation menu
After exploring multiple navigation options, we decided a hamburger menu would be most suitable to access secondary, lesser used links such as Settings, Account, etc. This allowed the primary pages to not be overcrowded by functionality not often accessed. Accessibility was a specific consideration in this decision: Since the main pages were going to display multiple sign language videos playing at once, we wanted to keep all other visual distractions to a minimum to allow our deaf users to easily focus on the sign language interpretations. Therefore, the settings content was moved into the menu along with the outbound link to Deaf Church Where - a resource for finding deaf-friendly churches in your local area (a button with text was utilized instead of the original icon in order to both provide more context, as well as indicate that it was an external link and not a new page within the app).
Although it was one of our goals to use as little text as possible in the app, the menu was one area where text was necessary. However, clear and straightforward icons were utilized to account for users who understand little or no written language.

New hamburger menu and tabs (Future-features version)

The updated menu with design considerations for multiple releases

Previously, the settings icon contained not only "Settings", but also "About", "Share", "Donate" and "Support". With the addition of the new menu, we were able to separate those into separate links that were easier to locate. 
Because the app did not contain many settings option, they were added as a dropdown menu within the navigation for quick access.

Dark Mode is a favorite feature of the DBS users, so we made sure to keep that as an option in the updated design

Milestone 2 Solutions
The primary goal of Milestone 2 was to incorporate new, robust features: Scripture of the Day videos, Study Plans, Bookmarks, and User Accounts.  While designing these new features, I evaluated how they would relate to the existing UX, and streamlined existing features as necessary.

Scripture of the Day
The team wanted to incorporate a new "Scripture of the Day" feature to appear on the homepage and encourage users to return daily into the app, where a new video would display each day. I decided to make the area collapsible so that it can be out of the way if the user is coming into the app looking for a specific Scripture video.
Bookmarks and User Accounts
A new Bookmarks page was added to the menu to allow users to save and revisit videos at a later point. To allow the bookmarks to be accessed across devices this feature to work, a straightforward but necessary user account section was also added. 
Study Plans
The largest new feature to be added was plans which would guide the user through a specific theme or section of Scripture through daily videos and application questions. This is a standard feature across many Bible apps, but brand new to the Sign Language Bible. Since this was such a beneficial feature, it was decided that it should be included as one of the main navigation tabs at the bottom of the screen. 
A horizontal scrolling section at the top of the main 'Plans' screen allows users to see available plans, as well as new plans that have been added to the app. Underneath, the user's current plans are listed, sorted according to which plans have yet to be completed for that day.  Each plan tile shows the users current progress and includes both a written title as well as a sign language video title.
Each day of the plan includes a sign language video for the specific portion of Scripture being covered, as well as accompanying application questions. The page defaults to showing these questions as text beneath the Scripture video, so that the videos do not compete with one another when the user first visits the page. But, the user also has the option to toggle between text and sign language for the questions.
Back to Top