top of page

Improving usability of  STEPBible.org

Hero page.png
Type of project

Volunteering in a team of data scientists, developers, and customer support

Role

UX research, UX design, UX writing

Tools

Google Workspace, Figma

The challenge:

STEPBible's 2024 Q1 report indicates that the site boasts over 360,000 users globally, spanning every continent except Antarctica. With its growth and popularity, promoted by most western seminaries and Biblical Studies departments, STEPBible would like to enhance its user interface to accommodate a broader spectrum of users.

Changes implemented:

  • Improved the scannability of the Word Analysis tool

  • Redesigned the FAQ, emphasizing visual grouping

  • Optimized the Translations window for intuitive use

  • Refined the Search modal for intuitive navigation

STEPBible background

Developed by Tyndale House in Cambridge, STEPBible.org (Scripture Tools for Every Person) is an extensive online Bible study tool designed to be accessible and comprehensive.

about_front.jpg

The free website provides resources in multiple languages, including the original biblical languages of Hebrew and Greek. The platform offers various features such as interlinear Bible text, vocabulary tools, and word analysis, aiming to enhance the study of the Bible across different linguistic and cultural contexts.

Screenshot 2024-06-13 at 16.27.32 1.png

My initial research

With new users being the primary target population in mind, I conducted 5 usability tests via Google Meet to uncover potential issues of usability:

  • 3 participants are young adults who are typical Bible readers, with no or minimum Greek/Hebrew knowledge

  • 1 participant is a pastor in his forties, with some Greek/Hebrew knowledge

  • 1 is a Bible scholar in his sixties, with extensive Greek/Hebrew knowledge, being able to read the original languages

I understand that, for typical users, the most common task on a Bible site is to read scriptures, and two of the most powerful features that STEPBible offers is their search modal and word analysis. With this knowledge in mind, during the 30 min to 1 hr-long usability testing, I wanted to find out the answer to these questions: 

Can they use STEPBible to do what they typically do when studying the Bible?

Can they conduct searches for words or phrases in English, or even in Hebrew/Greek?

Can they study a specific word in the passage (aka conduct a word analysis)?

From these sessions, I discovered four areas with issues of usability:

The word analysis tool

The pop up window to choose Bible versions

The help / welcome panel

The search tool

1. The Word analysis tool

First of all, what is it? 🤔

This tool allows users to see detailed information about words in the biblical text, including their occurrences, grammatical forms, and meanings. To access it, users clicks on the word in the passage, and a side panel appears on the right side of the screen.

word_analysis_before_monitor.png
Screenshot 2024-06-18 at 12.07.37.png
Screenshot 2024-06-18 at 12.07.52.png
User research results
1. All 5 participants had assumed that "This word occurs... times" mean something else.
Screenshot 2024-06-14 at 10.42.54.png
Participant 1 (5).png
Participant 5 (1).png

I didn't expect this to refer to the original language. I thought it meant the English word.

I assumed that it was this many times in the book I'm on, not the whole Bible.

Participant 3 (4).png

I had no idea what this sentence meant, so I avoided clicking on it.

So, the terminology here needs to be more clear.

2. People found it confusing.

This is a lot of text to read... It's quite overwhelming.

Participant 4 (3).png
word_analysis_before_monitor.png

So, we need to have a cleaner design for the word analysis panel.

3. Some participants wanted to go back to a previous page... but they couldn't.
Screenshot 2024-06-14 at 11.41.42.png

There is a list of related words in the Word analysis panel that users can click on, and they would be brought to a new page within the panel for the Word analysis of that word. The problem is, once users get to that new page, they can't go back, unless they click on the word in the Bible passage. This process would be especially tiresome if users go several words deep and can't easily recover.

Simple design solution... add a back button!

The revision

I sketched a lo-fi wireframe to convey my ideas, and after several back and forth emails with the project manager, developers, and customer support discussing the implementation, my design was finalized:

word_analysis_before_monitor.png
Screenshot 2024-06-14 at 12.49.43.png
word_analysis_after_monitor.png

Collapsable folders for different sections

space efficiency, easy navigation, and organizational clarity

Bullet points for each line

clarity and comprehension, enhances readability, visual appeal

Work in progress:
  1. Deciding on different terminology for "This word occurs about ... times": Considering that all five participants had raised confusion about this feature, it was especially important that we clarify this ambiguity, so the team had discussed different versions of the sentence. However, none of them were optimal. Even though we have yet to reach a conclusion, I keep advocating for the change to address this huge pain point. 

  2. The back button isn't as easy to add on the site, as it is on paper: The developer voiced the technical difficulty of implementing a back button on this panel, and he is currently trying to overcome it. This experience highlighted the practical limitations and technical constraints that can influence design decisions.

2. The pop up window to choose Bible versions

STEPBible currently has 603 versions / translations of the Bible, covering over 280 global and regional languages, including ancient languages that some Bible books were originally written in. This extensive range not only makes the site accessible to a diverse international audience, but also poses as a valuable educational tool that offers in-depth study of biblical texts.

Bible_picker_before_monitor.png
User research result

4 participants had problem navigating in this window.

Participant 1 (6).png

How do I unselect? Oh, do I just press it again?

Hmm, I feel like this window is very cluttered.

Participant 4 (4).png
Participant 5 (2).png

Is there commentary on this site? Maybe there isn't commentary, or I can't find it.

So, we needed a cleaner design that is more intuitive to users, and to move commentaries to a location that is more expected.

The revision

I conveyed my ideas to the team during a virtual presentation by showing and talking through a lo-fi sketch, then our team sent each other almost 100 emails back and forth to discuss the minute details of the change. Throughout the discussion, I presented designs that adhere to standard UX practice and advocated for the users, aiming to design the most seamless experience for them in this feature.

Bible_picker_before_monitor.png
Screenshot 2024-06-17 at 11.03.23.png
Screenshot 2024-06-14 at 15.33.27.png
Bible_picker_after_monitor.png

1

2

3

4

5

6

1

Standard checkboxes for each Bible version that can be checked and unchecked for an intuitive selection experience

2

Relocation of the language options to be easily spotted and for proper visual hierarchy; and, the site recognizes languages in the user's browser setting (in this case, Spanish) and automatically shows the option for easy access

3

Change of terminology from "Selected" to "Currently showing" to clear any ambiguity of that tab

4

Relocation of the search bar and key for proper visual hierarchy

5

Users can now click outside the box to confirm their choices (instead of having to click "ok" at the bottom); allowing users to take the action that is most intuitive to them

6

Slightly more breathing room between each line to decrease the "clutter" in this window

Takeaways
  • Tradeoffs: My research showed that users couldn't easily find the commentaries; so, I proposed to the team to put the commentary button at a very noticeable location on the site. Others disagreed with my proposal -- their reason helped me learn more about our product!

I suggest not highlighting the commentaries... All of STEPBible commentaries are very old. In my opinion, the old commentaries are only good for people who do not have access to better commentaries. 

If someone asks for a recommendation for a good meal, I would never recommend biscuits from a vending machine.  On the other hand, biscuits from a vending machine are great for a starving person.  

Lead Developer

  • Efficient communication: Our team's primary way of communication is via email and "replying all" on long email threads. My attempts to introduce Slack and a shared Google Doc for documentation did not take hold as the team naturally reverted to their longstanding habit of using email. While I do respect and want to emulate everyone's strong written communication skills, having a more efficient, organized communication format (e.g., face-to-face meetings via video calls, creating threads on Slack, or even discussions carried out on a shared document) would increase efficiency and decrease miscommunications.

3. The Welcome panel

This feature automatically shows as a side panel when users land on the site. A random folder is opened, and the list shows examples of how to use some features.

Screenshot 2024-06-15 at 15.24.58.png

Users see the Welcome panel immediately as they land on STEPBible.org

User research result
  • 3 participants closed this panel immediately

  • 1 participants wanted to show and hide the panel as he wished, but it took him a while to figure out how to do what.

Participant 7 (2).png
Participant 6.png

Why did I close it right away? I guess I didn't think it would be helpful.

It was just distracting! It felt too busy.

Can I open this again? Let's see... is it this? No. This? Oh, it's the "Examples".

Participant 8 (2).png

It seemed like the Welcome panel was not useful because it wasn't very usable. So, I proposed to design a less distracting Welcome/Help panel that can be easily enabled and disabled by the user.

The revision

The redesign process of the Welcome panel is as long and meticulous as that for the window to choose Bible versions. As usual, I presented my lo-fi sketches to the team on our bi-weekly video call, then we spent weeks going back and forth via email to discuss the minute details of the redesign. I offered advice on standard UX practices and put myself in users' shoes to better advocate for the most usable design. 

Screenshot 2024-06-15 at 16.02.04.png
Sketches For SB-2.jpg
Screenshot 2024-06-15 at 16.30.13.png
Screenshot 2024-06-15 at 16.05.57.png

5

1

2

3

4

1

Collapsible folders to improve space efficiency, organization, user control, and clarity

2

Using question formatting to formulate this section into a standard FAQ clarifies the purpose of this panel

3

Labeling the video feature with a more familiar icon and unambiguous text more effectively signals the existence of this feature

4

Completely revamping the content by providing step-by-step guidance in text and images makes the information easier to follow, more accessible, and more organized

5

"FAQ" instead of "Examples" is a more accurate label for this button, which allows users to more easily locate it

Takeaways

Defending my design decisions: Towards the end of the process, I insisted on the exclusion of certain information in the FAQ to not overwhelm users, even though several others contended for their inclusion. In written text, I explained my reasoning, defending my ideas, and advocating for our users. My ideas were finally taken into effect, and the team agreed to locate that information elsewhere. This was a valuable experience practicing how to effectively articulate my decisions.

4. The search tool

STEPBible offers a search function that allows users to look for specific words or phrases, as well as subjects, people, Greek and Hebrew words, and other advanced categories, in the entire Bible or select books. Being one of the most commonly used features, it was imperative that the search window has an intuitive design that allows users to seamlessly search for the subject they need.

default_search_before_monitor.png
advanced_search_before_monitor.png
User research result

All 5 participants had problems using the search engine, especially the advanced search mode!

Participant 12.png

I thought I could type directly in the table?

The advanced search has so much information, I wasn't sure what I needed to do.

Participant 9.png
Participant 13.png

The results page isn't showing me what I was expecting... did I do something wrong?

I actually didn't even see the "advanced search" option.

Participant 10.png
Participant 11.png

I didn't know what "advanced search" entailed, so I avoided using it.

Therefore, the search tool needs to be more intuitive to use. 

The revision (for now)

This feature posed the most challenge for the team to redesign. Although I proposed several ideas, the team has yet to reach a consensus. Nonetheless, I have proposed and we implemented small changes for the moment while discussing the final decision.

default_search_before_monitor.png
advanced_search_before_monitor.png
Sketches For SB-3.jpg
Sketches For SB-4.jpg
Sketches For SB-5 2.jpg
Screenshot 2024-06-17 at 11.10.44.png
default_search_after_monitor.png

1

Screenshot 2024-06-17 at 11.15.34.png

2

3

1

Relocating the Advanced search toggle and removing the redundant sentence so that the interface is cleaner, and the Advanced search feature is more noticeable

2

In the past, users needed to type a search word and wait 1-2 seconds without pressing Enter for the results to appear in the table. This often led to confusion, as hitting Enter— a common instinct—redirected them to a default search results page. To improve this, we've updated the system to allow users to press Enter after typing their search query in order for the table to fill up, aligning with the natural behavior and preventing unintended navigation.

3

After deciding on the change described in the previous point, we considered the habits of our long-time users, who are accustomed to not pressing Enter to see search results. To bridge this gap and accommodate the new requirement of pressing Enter, we introduced a visible search button that appears as users type their query. This button serves as a clear prompt to take action, ensuring a smooth transition for all users.

Work in progress

Although we have reached temporary design decisions to address some user pain points, the search modal needs to be further revamped to improve usability and to address all of the challenges that participants found when using the advanced search feature. Our team is currently in discussion to reach a consensus.

Key learnings overall

  • Articulating design proposals while incorporating team feedback - When proposing design changes, it's crucial to articulate ideas clearly while remaining open to input from other team member. This collaborative approach is essential because there may be technical constraints unknown to me that could affect the feasibility of my designs. Listening actively to the team's insights ensures that proposals are not only innovative but also practical and implementable.

  • Working remotely in an asynchronous team environment - It's crucial to communicate clearly and concisely in writing, especially when the team has a long established emailing culture before I joined. This clarity in our messages ensures everyone, regardless of their location, understands their tasks and can stay aligned with the team's goals. Effective written communication is key to keeping our projects moving forward smoothly.

bottom of page