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.

Excelra GOSTAR search results UI UX mockup
Excelra-GOSTAR-UX-UI-Design-chemist-user.png

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.

Excelra GOSTAR UX UI Previous Search Design

Search - New Guided Experience

Excelra GOSTAR UX UI Design Guided Search

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.

Excelra GOSTAR UX UI Design Basic Search Diagram

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.

Excelra-GOSTAR-UX-Excelra GOSTAR UX UI Design Guided Search Diagram

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.

Excelra GOSTAR UX UI Design quick search

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.

Excelra GOSTAR UX UI Design saving queries

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.

Excelra GOSTAR UX UI Design search conditional operators

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

Excelra GOSTAR UX UI Design Search Results Before

After - Focused Search Results

Excelra GOSTAR UX UI Design Search Results After

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.

Excelra-GOSTAR-UX-UI-Design-system-creation.png

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.

Excelra GOSTAR UX UI Design Impact metric
Excelra GOSTAR UX UI design testimonial
Excelra Client Profile Picture

Next up

Flo