Improving usability of STEPBible.org
_edited.png)
Type of project
Pro bono website improvement
Role
UX research, UX design, UX writing
Tools
Google Workspace, Figma
The 1-min summary ⏱️
Background & Objective
-
STEPBible.org, with over 360,000 global users, aims to improve its user interface to cater to a broader audience.
-
The project focused on enhancing usability through qualitative research, identifying four key features with usability issues.
Feature Improvements
After revision:
Bible Version Selector
FAQ
Word Info Panel
Search Engine
1. Bible Version Selector ✅
-
Issues: Difficult navigation, cluttered interface, unclear selection process.
-
Changes: Streamlined design for better clarity and ease of use, following standard UX practices.
2. FAQ Section 🙋🏻♀️
-
Issues: Perceived as unhelpful and distracting.
-
Changes: Redesigned the FAQ panel to be less distracting and more intuitive.
3. Word Info Panel 📖
-
Issues: Ambiguous terminology, confusing layout, lack of back button.
-
Changes: Clearer terminology, cleaner layout with collapsible folders for better organization, added a back button for easy navigation.
4. Advanced Search Mode 🔎
-
Issues: Confusing interface, unclear functionality, unexpected search results.
-
Changes: Ongoing revamp, with initial improvements for a more user-friendly experience.
Case study (with more detail) 📝
STEPBible's 2024 Q1 report shows over 360,000 global users across all continents. With growing popularity, driven by most western seminaries and Biblical Studies departments, STEPBible aims to improve its user interface for a broader audience.
I discovered 4 features with issues of usability on STEPBible.org through qualitative research, then made improvements for each feature.
After revision:
Bible Version Selector
FAQ
Word Info Panel
Search Engine
Feature 1: Word Info Panel
Through interviews with new users, I observed three usability problems:
-
Ambiguous terminology
-
Confusing layout
-
Lack of navigation to previous actions
I had no idea what this sentence meant, so I avoided clicking on it.
This is a lot of text to read... It's quite overwhelming.
_edited.png)
After gathering all the insights from interviews, I recognized that the terminology on this feature needed to be more clear, the layout needed to be cleaner, and a back button should be added to allow users to return to their previous task.
My ideas were incorporated into the final design; there are now collapsible folders for different sections for organizational clarity and space efficiency, and bullet points for each line to enhance readability.
Feature 2: Bible Version Selector
It was hard to navigate this window 🤔
How do I unselect? Oh, do I just press it again?
Hmm, I feel like this window is very cluttered.
Is there commentary on this site? Maybe there isn't commentary, or I can't find it.
Throughout the discussion with the team, I presented designs that adhered to standard UX practice and advocated for users, aiming to design the most seamless experience for them.
2
3
1
4
5
6
1
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
2
Change of terminology from "Selected" to "Currently showing" to clear any ambiguity of that tab
3
Standard checkboxes for each Bible version that can be checked and unchecked for an intuitive selection experience
4
Slightly more breathing room between each line to decrease the "clutter" in this window
5
Relocation of the search bar and key for proper visual hierarchy
6
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
Feature 3: FAQ
People didn't find it useful because it wasn't easy to use.
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".
I proposed a less-distracting, more organized window that is more intuitive to use.
1
2
3
4
5
1
"FAQ" instead of "Examples" is a more accurate label for this button, which allows users to more easily locate it
2
Collapsible folders to improve space efficiency, organization, user control, and clarity
3
Using question formatting to formulate this section into a standard FAQ clarifies the purpose of this panel
4
Labeling the video feature with a more familiar icon and unambiguous text more effectively signals the existence of this feature
5
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
Feature 4: Search Engine
All users had difficulties using the search engine, especially the advanced search mode.
The results page isn't showing me what I was expecting... did I do something wrong?
The advanced search has so much information, I wasn't sure what I needed to do.
I didn't know what "advanced search" entailed, so I avoided using it.
Our team is still working on revamping the search engine, but we have made a few changes to improve user experience for now.
1
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.
Check out my other case studies
Responsive website: Safebike
.png)