Save scientists' time by summarizing large amounts of information in a digestible way using AI

Computer monitor displaying a scientific research database, with diagrams, chemical structures, and links related to molecule understanding and protein degradation.

Overview

The Science Engine is a powerful platform that allows our users to apply ML models to their workflows, creating huge efficiencies and allowing for new capabilities.

Working with pharmaceutical and bioscience customers to improve their workflows with our platform. I was responsible for leading this project's design efforts, including defining the actual problem, ideation through design refinement, contributing to the user testing plan, and handing off the high-fidelity design specs within a tight timeline to meet an aggressive milestone.

Role

Lead UX Designer

Timeline

2 months

The challenge

How can we synthesize data from thousands of medical papers so scientists can find molecules that degrade specific disease-causing proteins quicker?

What is Science Engine?

A platform that helps users make sense of unstructured data through AI

With partners like UCB to empower scientists to speed up the discovery and development of breakthrough medicines

To find molecules that degrade specific disease causing proteins

Two printed pages of a document titled 'Corporate Ranking/Recognition' with tables and text, and a PDF icon overlay.

Read thousands of research papers

Scientists spend large amounts of times reading through dense literature to find specific molecules that might be relevant to their use case

Screenshot of a table labeled 'Molecule data' with rows and columns of blank cells.

Compile associated data

They collect individual numbers, parameters, and concentrations from numerous external data sources such as PubChem, patent libraries, and models from Science Engine

Table titled 'Molecule data' with rows marked with red crosses and one row with a green check mark.

Make final decision on list

After all of this data collection, a full story of each molecule is created allowing the scientist to make a decision on which candidates to move forward

Target users

Two scientists, a woman and a man, wearing white lab coats and safety glasses, working together in a laboratory with computer monitors displaying scientific data.

SME Scientists

  • Discovering connections

  • Validating a hypothesis

  • Identifying meaningful signals

  • Making informed predictions

A man in a suit working on data analysis on a computer with charts and graphs displayed on the screen.

Info Investigators

  • Finding something similar

  • Comparing resources

  • Summarizing various resources

Why the old Science Engine designs weren’t cutting it

We worked alongside our users to understand their entire workflow and how they have been using the Science Engine previously to understand what was falling short

Screenshot of Project Science Engine interface showing datasets and model outputs with a focus on Model F Output and its relationship type data.

The current flow

To get to AI generated content, users need to import their data onto the platform and apply a model

In the current experience, an entire page is generated per individual model applied, resulting in many pages with no way of seeing the collection of results in one view

Diagram showing a machine learning model feeding into Dataset A, with an arrow pointing from the model to Dataset A, and another arrow pointing from Dataset A to Dataset B, which is marked with a red cross indicating rejection.

Finding models

Model discovery is limited to a user exploring the current model catalog, which places more responsibility on the user to search and find relevant models for their data

Screenshot of a data analysis project showing a table of chemical treatment data and model results with a light yellow background.

Connecting models

Specific models only work with particular data formats and subject matter types within each dataset

This can lead to users unknowingly applying the wrong model to data that is the correct format but not the correct subject matter leading to null results

Screenshot of a document management web application showing a document titled 'Document Understanding' by Ali Meyers, with model descriptions and data sections. The interface includes navigation options like Home, New document, Templates & Models, and Learn.

Current outputs

It can be challenging to distinguish between the presentation of data and model results, as there is often little visual distinction

This can make it challenging to recognize the role of AI in the process and hard to quickly understand what's going on

The Aha! moment

While working with our users, we uncovered that scientists were essentially building out stories for each molecule, an activity we could automate using AI!

Close-up of a clear incandescent light bulb showing the filament inside.

Project goals

Blue square icon with three white horizontal lines of decreasing length.

Synthesize data

Create a full story summarizing all the necessary information about a specific entity

A blue square icon with a white chain link symbol in the center.

Provide data access

Allow the user to quickly jump into all of the data associated with each model so they can incorporate it into their workflow

Bluetooth icon on a blue background

Make AI visual

Make it obvious which content is AI generated and make it easily digestible

Collaboration & ideation

Knowing this project had a time constraint and every moment counted, I initially established points of contact within all teams that would touch this new feature to leverage their diverse perspectives and ideas

Screenshot of a virtual presentation slide featuring six colored circles with text inside. The circles are labeled D for Design, R for Research, E for Engineering, PM for Program Management, EL for Executive Leadership, and S for Scientists. A photo of a smiling man with dark hair, wearing a dark jacket over a white shirt, appears in a small inset at the bottom right corner.

Team collaboration

Met with cross functional stakeholders to fully understand edge cases, constraints, and business objectives

A detailed digital mind map or flowchart with numerous colored sections, boxes, and labels, showing a complex presentation or planning diagram.

Ideation design sprint

Facilitated a design sprint to leverage the team’s diverse set of perspectives to generate potential ideas and align expectations

Blue square paper with black text that reads 'AI-generated TLDR for each canvas/page' and purple '+1' icons scattered across the paper.
Yellow sticky note with black text that reads, "What if there was a 'view' summarizing multiple models in a top sheet," with three green thumbs-up stickers around it.
A mint green sticky note with black text that says, "Make AI Model outputs more editorial & Visual 'Digestible Nuggets,'" with a pink heart sticker at the bottom right corner.
A purple sticky note with black text that reads, 'Be able to display relevant model content based on the subject matter of the page data...' The note is decorated with two yellow star stickers on the top right corner.

Design ideation

Ideating through potential solutions ranging from small incremental changes to entirely new design formats

Screenshot of a project management or database software interface showing a list of files in a folder named 'SampleFolder.' The interface has columns for File, General Summary, and Query-based Summary, with placeholder 'Lorem ipsum' text. The menu bar includes options such as File, Home, Edit, Help, and a search bar, along with user account links like Full Name and Sign Out.
Screenshot of a project management or document analysis software showing a dashboard titled 'High Level Batch Summary of Documents'. It includes sections for summary keypoints, representative documents, and document level summaries, with icons representing PDF files and articles. The layout features a sidebar with a list of documents on the left and a main display area with detailed text and document icons.
Screenshot of a data analysis software interface showing a document summary with placeholder text, including sections titled 'General Summary' and 'Query-based Summary.'
A screenshot of a molecular modeling software interface displaying a chemical structure diagram on the left and an AI-generated molecule summary on the right. The interface includes menu options at the top, a search bar, and multiple tabs below. The bottom of the screen shows a series of molecular structure thumbnails with corresponding chemical notations.
Screen displaying a document management software with a highlighted section of a research paper titled 'Guidance for Industry Developing Products for Weight Management.' The software has folders on the left, a toolbar at the top, and a sidebar with document summaries on the right.
Screenshot of a scientific software interface displaying molecular structures and chemical formulas, with tabs labeled 'Entity', 'Table', 'Text', 'Map', and 'Media', and a sidebar with molecule data and predictions.

Design Refinement

Refining the design directions through review and feedback sessions with users and the team

A computer interface showcasing a molecular prediction software with a chemical structure in the center, similar molecules below, and an 'AI Generated Molecule Summary' on the right.
Screenshot of a molecular modeling software interface showing various chemical structures of molecules, with a note indicating excessive real estate being used up.
Screenshot of a scientific research software interface displaying detailed information about a molecule, including its chemical structure, related diseases, and research papers. The interface features sections labeled 'Descriptive data about selected molecule,' 'Relevant connections,' 'Relevant diseases,' and 'Relevant papers,' with options to run models and view related data.

Design Refinement

We ultimately landed on a two-column framework that consisted of several different types of sections, making it flexible enough to tell the story of different entity types in an editorial and visual way

Validation

Getting our customer's affirmation that the designs would solve their specific needs. UCB was able to help organize and order the various sections to how they would want to consume them in their workflow

Screenshot of a computer screen displaying a molecule understanding application with data and diagrams related to aspirin, including a chemical structure and network of related molecules, and a small picture-in-picture of a smiling man in the bottom right corner.

Bioscience Customer

“This would save us so many hours of work…”

Pharmaceutical Customer

“I like how this tells a story
of each molecule.”

An iMac computer displaying a scientific research software interface, with a molecular structure, network diagram, and research details, on a light blue background.

Final design

The new AI Hero experience showcased relevant ML models based on the data the user imports onto the platform. Once the molecules from the data are identified, we surface digestible and editorial sections representing entire outputs from various models. The user has all the information needed about a single molecule eliminating the need for the user to scour numerous resources for this desired data and showing just how valuable these models can be for their workflows.

A digital science interface displaying a molecular network centered on Aspirin with related molecules, diseases, side effects, toxicity, and clinical trial information.

Telling a story

We organized related content in two separate columns based on what scientists would use it for. After validating the content itself and the order in which it appeared, the experience of the molecule AI hero view tells a complete story of the molecule in focus.

A scientific infographic summarizing aspirin, including chemical structure, synonyms, toxicity, absorption, metabolism, excretion, distribution, predicted side effects, and retrosynthesis prediction with chemical reaction diagrams.

Descriptive data column

This section groups all the information we could pull for a specific molecule. All the complicated data points that scientists search for in one spot in a framework that gives the user what they need to know.

Screenshot of a medical research online interface showing a network diagram of molecules connected to aspirin, related drugs and molecules, clinical trial information, and similar molecules with chemical structures.

Relevant data column

We added all related content to the selected molecule in the right column. Any related, similar, or relevant information can easily be skimmed and added to a scientist's workflow, all from one view.

Flowchart illustrating model selection for disease data analysis, showing categories of models, relationship types, and data viewing options, with a highlighted link leading to detailed AI hero page for a specific molecule.

We synthesized the data

Creating a framework that communicates top relevant information that a user can quickly skim allows them to scan for interesting bits before diving into the entire dataset

The underlying data is always just a few clicks away allowing users to incorporate interesting information into their workflows

Diagram illustrating data flow from three spreadsheets labeled Data A, Data B, and Data C, into a central data visualization with sections labeled A, B, and C, with arrows indicating data movement.

Provided data access

Each section is a condensed highlight of an entire page of data. We made it extremely easy to access the underlying data of each section. This enables them to efficiently incorporate data relevant to their use case.

Screenshot of a medical or scientific database showing chemical structures and research information related to a drug called Clopidogrel.

Made AI visual

Visually anchoring the image of the selected molecule helps users quickly identify the connecting factor between all the information. We also added visual elements such as document thumbnails and entity images to sections to make the results easier to consume.

A network diagram showing connections between molecules and aspirin, with color-coded legend indicating top searches, related topics, confirmed, and suggested relationships.

Displaying the knowledge graph!

We display a visual representing relevant connected molecules and the neighboring clusters with confirmed and suggested relationship paths. We pulled this data from the GNBR++ database, a commonly used resource by scientists.

Screenshot of a computer screen displaying a medical research webpage with a dropdown menu for treatments related to diseases, showing options such as 'Inhibits cell growth,' 'Side effect,' 'Prevents, suppresses,' and 'Alleviates, reduces.' The webpage includes links to specific diseases and research articles.

Being able to pivot the sections

Each section is a model output and sums up the results in a digestible way

Following the release…

The first version of the molecule AI Hero experience was successfully launched by the target deadline and met all the significant needs of our users while aligning with business objects. Some compromises needed to be made with engineering to make this milestone include not having underlying data appear on its own tab, more interactive capabilities within the related molecule knowledge graph, and adding more visual representations of the editorial sections. These elements are planned to be incorporated into future versions of the experience.

Impact

  • Automated the summarization and analysis of information to identify specific protein degrading molecules, reducing scientist's work time by over 75%

  • New platform feature that summarizes mountains of data in a visual way

  • Allows access to all connected data from each model

Lessons learned

  1. When moving fast, communicate with as many stakeholders as possible and frequently

  2. Temporary compromises are worth it to move toward the end goal

  3. Prototypes are your friend when working under a tight timeline