Designing shared query builder for Illumina Connected Analytics

Interaction Design / UX Research/ Genome Sequencing
HEALTHCARE GENOMICS
UX DESIGN
DASHBOARD DESIGN
UX INTERVIEWS
Team Members
Toshi Gupta (Lead UX designer)
Jim Reed (UX Designer)
Hans Von (Visual Designer)
James Hall (UX Developer)
Eric Scheff (Product Manager)
Joerg Hatkenberg (Bioscientist)
Duration
Apr 2021- Dec 2021
Tools
Figma, WalkMe, Sketch, Miro, JIRA
My Role
Interaction designer
  • Cross-collaboration with PMs, Engineering, UX research and bioscientists to ship Illumina connected analytics - a software suite for storing, queryig and analyzing high quality genomics data.
  • Responsible for building various components and flows of the suite which comprised of multiple modules, contributing to the design system and iterating through designs based on user and stakeholder feedback before engineering handoff
Impact

20%

Increase in data
filter page views

15+

Labs onboarded for
BETA testing globally
BETA testing results

70%

Correctly completed
tasks rate

40%

Faster data filtering
and quering
ABOUT THE COMPANY
Illumina connected analytics overview

21

Sequencing
instruments

20

Research labs globally
(Customers)

4+

Persona
of users
There are more than 21 DNA sequencing instruments produced by Illumina which are used by genomic researchers all across the world. All these genome instruments are operated through native or cloud -based softwares which are designed by the Experience Design team and developed by the instrument development teams.
Our DNA stores a lot of information about us and when the DNA is sequenced in a sequencing instrument, the data generated is analyzed to figure out of the characteristics of an individual. This analysis is very popular in cancer research and rare disease research.
What is ICA (Illumina Connected Analytics?
ICA is a set of softwares in a platform suite that gives the users the ability to ingest/aggregate the data, create filters and sort that data for fruitful use, and then identify patterns through the data.
CHALLENGES
Problem statement
Users do not have expansive & state-of-the-art way of filtering data on ICA
In numbers:
  • Analysing ~100,000 human genomes at once
  • Filtering 50k+ rows of variants of a gene to get to 1 variant of interest
  • Capable of filtering this data on 60+ data  attributes 
Business Goal:
It almost became business opportunity to provide users with modular research solutions. If we are able to make ICA this connected suite where users don’t have to go to  other softwares to query their data, then the business can sell the whole suite and also cover a big market.
OPPORTUNITY
Business Impact Potential
The sequencing instruments produced by Illumina are of high value to any research lab or company around the world both in terms of the value they create in healthcare research, and quality/accuracy of the data they generate. A good user experience positively impacts the business in several ways:
CHALLENGE
Problem Statement
I did my summer 2020 internship at Illumina Inc. There are around 21 DNA sequencing instruments by Illumina and incase of any errors in the softwares of these instruments, the customers seek help of the customer application support who are experts in the respective fields.
SOLUTION
The ICA Query Builder
PERSONA
Understanding our users
Ingest: The data ingestion happens mostly on the backend and is done by developers with a good context of genomics.
Query: The data is cleaned and filtered for further use by a bioinformatician. A bioinformatician is able to group, filter and analyze data to identify patterns and create reports out of it.
Analyze: These reports are then consumed by Genomic scientist to give out clear analysis and recommendations. This can be in a research setup or a clinical setting.
In this case study talks about the case of bioinformatician and what pain points we tried to solve for the users.
DEFINING USER GOALS
How might we help users....
ITERATING WITH USERS
UX research plan
In collaboration with UX researchers, we carried out research at various stages of the product development cycle. We worked with Labs in countries like USA, Canada, UK, South Korea and Singapore.
Illumina is very heavy on research as in healthcare the stakes are high and we want push out well researched products to the customers. There is less scope of experimentation once the products are rolled out. But feedback is the key, so as a designer, I have high interaction with the users and stakeholders to figure out the right flows.
After I did the first round of prototyping, we did a concept validation usability test to gather feedback from the users. Based on the feedback the designs were iterated and after the BETA release, we are currently in the process of doing a diary study UX research with the users. 

WHAT USERS SAID
Research findings

01

Users need more expansive ways of filtering and querying data

02

Queries/filters are reused and modified over time

03

The different products use different ways of querying the data
EXPLORATIONS
Brainstorming solution features
Selected Solution
Query Builder
Building re-usable component that provides complex yet intuitive filtering mechanism. Following were the features of this component:
  • Multipurpose
    The Query Builder is able to provide functionality of traditional filtering, with logical operators and coding the query
  • Made for all
    The Query Builder is able to provide functionality of traditional filtering, with logical operators and coding the query
  • Extensible
    The Query Builder is able to provide functionality of traditional filtering, with logical operators and coding the query
Navigation
Slider Panel: Traditionally the data was presented in the rows and the filter would appear from the left. Asking questions like do users even need to see the vast amount of data while filtering?
Full page modal view (Selected solution): Users need to see the attributes and a basic understanding of how many rows are getting filtered once they apply the filter. Therefore I went with a full page modal giving space to not only perform filtration with ease but also viewing the real time query building
Half page modal: The real estate got restricted and the context in the background did not provide much value to users decision making on query.
Version 1
Prototyping round 1
CONCEPT VALIDATION
Usability testing round 1
My fellow designer, researcher and I, conducted prototype usability testing with the users. These discussions were highly collaborative with subject matter experts and bio-scientists.  The UX researchers helped us flesh out questions for users:
1. How do they feel about inclusions and exclusions as mechanism? Was that enough?
2. Do they feel comfortable coding queries?
3. Do they want to view the unfiltered data so often and  would want to view it before applying filters?

KEY FEATURES
Final designs
#UserStory1
1. Selecting attributes and using AND/OR/NOT operators to create query
The main highlight of this query builder was using the interchangeable boolean operators. The attributes are now selected as chips which can be deleted as per user's wish. Each attribute is preceded by an operator and the query gets formed in a basic english readable format. If user wants to build bigger nested queries, they can click on add condition and start making bracket queries. The left and the right panels are individually scrollable.
Link To Prototype
Query builder trigger flow and using boolean operators
#UserStory2
2. Creating/Coding queries and toggling views, viewing molecular filters
The second suggestion that came out of the research was having a way for users to write their own queries. We presented the user with a switch to view a raw SQL query. User can edit the code and it gets reflected in the left panel. Though this needs a lot work on the developer’s end, we did not ship this feature in the BETA launch.
Link To Prototype
Interchangeable list & code view
#UserStory3
3. Extensibility: Reusing component in other Illumina products
Making this component reusable across various software products helped users stick to one mental model of filtering. I reused this component in variant filtering mechanism of another product called 'Variant Viewer'
Query builder used in Variant Viewer
Queries treated as shareable entities
SOLUTION DEMO
Final Prototype
MID-FIDELITY PROTOTYPES
Important Design Explorations
1. Layout - Multiple page navigation v/s Single page dashboard
I started the tool ground up, therefore, I had the liberty to choose the layouts of the desktop application. I explored various options of which there were 3 choices I brainstormed upon - Tab based layout, Single page layout with button navigation. and Single page layout with button in proximity to content. Backed by various discussions with my team I chose option 3 because:
  • The primary functionality of the tool is search which should be the homepage
  • Add, edit and reserve functionalities do not need a separate page as they are functions of the landing page
  • Maintaining consistency with current Illumina dashboards was an important consideration as it would create cognitive load for the users
2. Navigation UX patterns - Tab v/s Modal
The add and edit functionality were two actions which were primary actions for the developers. I decided to go wth the modal based navigation due to following reasons:
  • Because it was a desktop application, modal was an effective way of focussing user's attention where user cannot perform other actions other than thing on the modal.
  • The context of modal functions was very close to the content on the home page - they were all error data of instruments. Therefore the back and forth movement is easier in dismissible modal
  • Choosing modal was a trade-off between modal error caveats and navigation overhead between tabs
3. Action button positioning - Header v/s Content
This decision of moving the buttons was very small but very strategic. According to the users, the "Add" button in proximity to the data was more discoverable than in the header.
4. Data comprehension - Pagination UX pattern
The data sets of the errors were in large in number and to make the search results comprehensible to the user, I decided to use pagination pattern. Pagination as a UX pattern is used to display subset of sorted data in a comprehensible form. The foreseen benefits of pagination were:
  • Reduce percieved complexity of data sets
  • Give a rough idea around length of search results and save them from infinte scrolling which does not fit this use case
  • Independence and control on whether user wants to navigate to more search results or not
5. Loading states choices - Page level loader v/s Component level loader
ROAD AHEAD
Reflections
01
Team and Role
My role
Designer
Developer
Team
Toshi Gupta
Ruchita Lodha
Duration
8 Weeks
Mar'20-May'20
Tools
Unity
Vuforia
ARCore
Figma
02
Motivation
Dyslexia is a language based learning disorder which is found in 1 in 5 students and kids who have difficulty often avoid reading because it's stressful.
We wanted to use an immersive technology like AR/VR/MR for good together with digital game based learning to enhance the learning experience and help students retain things in a less stressful and playful way.
03
Problem Statement
To build an accessible learning experience for kids diagnosed with dyslexia between the age of 3-6 years. To help kids be less stressed mentally while learning to read and write alphabets.
04
Challenges in a classroom setup
There are specific set of challenges faced by dyslexic children in a classroom setup:
1. Manual Learning: Lack of multimedia based interaction to address learnability issues.
2.Individual learning approach: Teachers are less focused on students who have dyslexia in a classroom setup.
3. Less variation in learning: Lack of use of variety of senses such as seeing, hearing, talking, and touching.
05
Our Solution
To build an augmented reality game-based alphabet learning application for kids between age 3-6 years by augmenting the real world objects around them. The application would help students learn alphabets with phonetics and associated real world objects, identify and differentiate between alphabets and write them.
06
Why Augmented Reality?
We did a qualitative research on ways and methods adopted to help dyslexic kids learn faster like the Orton Gillingham method and the Wilson Method. We studied the online videos available  for teachers to pick out the key components that are very important while helping in dyslexia.
We realized thats supporting these methods with augmented reality for multi-sensory learning (Kinesthetics, Visual, Tactile, Phonetics) coupled with game based learning would help students get accurate and faster in alphabet identification
07
User Journey Mapping
Potential users: Kids who find it difficult to read, learn and identify alphabets.
The idea is to build an application that augments the alphabet cards/alphabet book with 3D holograms and support the phonetic learning through sound assistance. It will have 3 main features:
1. Learning about the shape and usage of alphabet
2. Identification of alphabets after learning through games
3. Learning to draw the alphabets through guidance
08
Lo-Fi Sketches
09
Introducing JoJo - the voice assistant
‍To help the students engage and navigate better with the learning and games, we introduced a cute animated hippo!
The main reasons behind having a voice assistant are:
1. Help students navigate between different parts of the application
2.Lower the burden of reading instructions for dyslexic kids
3.Give a comfortable learning experience through their "Friend- JoJo"
10
Technology decisions
1. The application is developed in Unity and tested on an android and iOS mobile device
2. To enable enhancements on a book/alphabet card, we decided to go for a marker-based approach in Vuforia

*This project was carried out during COVID-19 and therefore our plan of enabling the application on Hololens could not go through.
11
High Fidelity prototype and interactions
2D menu and instructions: The game starts with a 2D menu with an introduction by a friendly assistant JoJo. JoJo guides the user to the different sections of the application like Learn, Play and draw.
You can listen to JOJO's instructions in the final video attached.
Dragging/dropping and success/failure animations: To test students' capability to identify the learned alphabet, they are asked to drag and drop the associated 3D hologram into the ring options. Based on the answer the application reacts gently with animations of right and wrong answer.
Shooting with a ball: For letter identification, the application is supported with physics enabled bowling game. The students' are asked to shoot the associated hologram to the right letter glasses.
The right and wrong answer are distinguished with sounds.
Drawing: The students can reference the drawing technique animation and try drawing with a physical marker.
12
Final video
12
Reflection and learnings
All Projects
Next Project
Related projects
© TOSHI GUPTA 2020