B2B WEB APP REDESIGN
GOSTAR
Medicinal chemistry database SaaS platform
Excelra’s Global Online Structure Activity Relationship Database, known as GOSTAR, is one of the world’s largest and most robust chemistry databases.
Their product is used by pharmaceutical companies to identify promising drug candidates and it offers more than 30 different ways to search for a single chemical compound.
B2B Product Redesign
Excelra initially engaged Neuron for an agile redesign of their SaaS product when it was time to build the second iteration. Our designers worked alongside Excelra’s project managers, developers, and subject matter experts and set out to deliver an improved search experience to make this complex product more intuitive.
After the initial discovery phase, the GOSTAR team decided to go through an entire redesign. Their goals were to pivot the product and create a next-generation experience as well as provide a beautiful and improved UX focused on getting users answers to their queries as quickly as possible.
Redesign goals
Search - Before
Collectively, we concluded that we had to focus on overhauling the product architecture to provide multiple means of searching Excelra’s comprehensive database.
However, given the complexity of the application, and the diversity of usage scenarios across the user types, the application is very powerful on the one hand, but potentially very cluttered, on the other. This was the case with the previous version of the application and was primarily due to supporting both novice and expert users simultaneously. Expert users may need advanced features that infrequent, or novice users, rarely access.
To help users manage their choices, features, and functions we minimized clutter within the interface without reducing the application's capability.
Search - New Guided Experience
A search architecture that helps different user types accomplish their goals
Basic Search
The first of two means of searching the GOSTAR database, basic search, is optimized to get users from the homepage to a compound-specific page as quickly as possible. This single-term query is a net new feature for GOSTAR that utilizes a conventional single search bar presentation and mechanics to be familiar and approachable. Possible results are shown in real time via predictive text entry and are categorized into groups. Selecting a result from the list redirects the user to the corresponding page straight away.
Guided Search
Guided search, the second form for searching, allows users to progressively add parameters to their query from a set of 28 criteria. However, the 28 criteria are embodied in 1of 4 graphical styles, preventing unwanted complexity in the user interface.
Quick search
A simplified method for casting wide queries
For frequent or power users who know what they are looking for, the quick search functionality is designed to use predictive text entry and organize potential result matches based on the most relevant and important categories or characteristics.
Saving queries
Notifying users of compound updates
To provide even greater utility to users, as well as increase the frequency of their engagement with the product, users can now save any leaflet page or query — basic or guided. This allows them to easily revisit them later and receive updates about new results across their searches and when new data is found for existing results.
Improving how searches are constructed
The default behavior of the homepage focuses the user’s attention on the basic search input bar, while options to begin constructing a guided search are secondarily displayed below. This is a staged disclosure strategy whereby the guided search options are shown to the user only when they are relevant to the task at hand or are the items in focus, reducing clutter.
Given the data-dense nature of the application, Boolean operators were incorporated into the guided search system. Operators needed to exist within each criterion and also within larger criteria strings. For context, the string built within the guided search is maintained on the search results page and is easily editable.
Advanced search results
Search result pages were designed from scratch as well. The new interface organizes potential results across five categories; structures, activities, assays, documents, and development compounds. This enriches exploration by allowing researchers to search for a particular drug (e.g. Advil) and immediately find information on that particular chemical structure as well as each time it’s been mentioned in a clinical trial, a patent, or if it is being tested alongside other compounds.
Multifaceted filters were also designed to limit clutter as much as possible and be as conventional as they could. Common conventions from travel sites and e-commerce were incorporated to make them more intuitive but without losing capability.
A shortcut to initiate a new basic search is maintained at the top of all pages, removing any need to return to the homepage, while quickly editing the constructed query is also possible.
Improved presentation of results for faster discovery
Previously, when a user’s query was invoked, the search results page would return results in 26 different sections.
It was overly complex, overwhelming, confused users as duplicate data was found across the sections.
After breaking down the data structure and updating the information architecture we consolidated the most important data into five sections and dramatically improve the hierarchy of results and their corresponding data points.
Before
After - Focused Search Results
Compound Leaflets
Leaflet pages are where all of the detailed information lives for any one compound or document. In redesigning the leaflet page, Neuron implemented a new structure to make the page easier to navigate and find information across the interior pages.
Crafting a flexible design system
The GOSTAR redesign is the first of Excelra’s product suite to embody their updated branding and newly formulated UI style.
Neuron created a flexible and extensible design system applicable to the entire product range that is light and balanced to counteract the dense information. We also sought to make the design system as versatile as possible due to the tight 5-month design and development timeline.
Impact
The speed at which clients and users can now engage with the database is much faster. Previously, it took anywhere from 30 to 60+ seconds. Once the newly designed application was implemented, getting from the homepage to answer dropped from 30 seconds to 10 seconds (67% faster).
The guided experience that Neuron delivered has provided a drastic value-add for GOSTAR’s users. We managed to bring utility and delight to the feature, which was previously unfavorable and avoided.
Neuron has since become a long-term partner of Excelra for iterative product updates and strategic stealth product design initiatives.
