Designing cloud-based dashboards for DNA sequencing instruments @Illumina Inc

Interaction Design / Visual Design / UX Research/ Genome Sequencing
HEALTHCARE GENOMICS
UX DESIGN
DASHBOARD DESIGN
UX INTERVIEWS
Team Members
Toshi Gupta
Ziqi Li (Developer)
Duration
10 weeks
(June 2020 - Aug 2020)
Tools
Sketch, Procreate
My Role
  • I conducted an end-to-end design process for the Error Lookup tool, an enterprise application for customer support teams and instrument developers at Illumina for error lookup and management. This tool enabled specialized teams at Illumina to access relevant information about the hardware instruments in order to answer all customers' queries efficiently.
  • I was the the solo designer on this product and collaborated with developers and product managers to ship the final version.
  • For the UX research process, I collaborated with various customer support teams, subject matter experts and instrument developers to understand the pain points.
Impact
The tool was developed and showcased at the final intern presentation week to all the major stakeholder groups at Illumina. The tool was not only appreciated for its capabilities of solving pain points for customer support and developers but was also envisioned as a smart assistive tool with AI capabilities in the future.
ABOUT THE COMPANY
Illumina Overview

21

Sequencing
Instruments

15k

Customers
globally

100

Instrument
Developers

20

Customer
Support teams
There are more than 21 DNA sequencing instruments produced by Illumina which are used by 15000+ researchers around the world and who are supported by around 20 customer support teams. All these genome instruments are operated through native or cloud -based softwares which are designed by the Experience Design team (which I was part of) and developed by the instrument development teams.
CHALLENGES
Problem Statement
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 Error Lookup Tool
RESEARCH FINDINGS
Understanding User Pain Points
User 1 : Illumina Customer Support
Findings
  • The customers have to answer long list of informational questions which is time consuming
  • Not single but multiple resources for customer support to browse from
  • Long turnaround times for solving trivial issues
  • Increased customer frustration due to long waiting hours
User 2 : Illumina's Instrument Developers
Findings
How error lookup tool solves our users' pain points?
Cloud-based web interface for over the air updates
Quick error search to save time of both CX and customers
Add and edit errors for different instrument platforms
Publishing errors with secure authentication of read/write access
WORKFLOWS
User journey map
KEY FEATURES
Exploration and Iteration
1. Search and Lookup
The main function of this tool is searching errors based on the most frequently used contextual parameters. Based on the minimum number of characters in the input box, the results are auto-filtered as the user selects values for each field.
The images below show the dashboard and its main UI elements that are used to perform the search function.
Iteration of the search functionality
Designs of loading states and result filters
Landing page screens (Click to zoom)
2. Add and edit errors through dashboard
The other important feature of this dashboard was to add and edit errors, dynamically. The images below show the different states in which the user adds a completely new error code in the system. Users can view more information about an error and make edits to the errors based on the ownership rights.
Iteration of Add/Edit error code modal
Design iterations of add new error code modal
Iteration of 'Add' button placement
Design iterations of add new error code modal
Screen for viewing and editing error code details (Click to zoom)
3. Publishing error codes to production
The dashboard also has the capability of publishing multiple errors to production which reduces the effort to handle each error individually.
Screen for selecting and publishing new error code (Click to zoom)
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
HIGH-FIDELITY PROTOTYPES
Final designs
WHAT I LEARNED
Reflections
RECOGNITION
Team feedback
Toshi interned for Illumina for an all-too brief stint in the Summer of 2020, and she was an excellent addition to our Experience Design team. She is thoughtful, disciplined, seeks and embraces feedback, collaborates well with designers, product managers and developers alike, displays flexibility, and seizes new opportunities whenever they arise.In her time here she delivered a fully-baked internal support tool designed from scratch that will create great value to our customers and support staff alike. To do this she conducted her own research, performed heuristic evaluations and led design reviews, delivered designs and specs to the development team on time, and established a roadmap for future enhancements to the tool. She did all this in two months while also working on a volunteer project that all of our interns must participate in, and supporting two additional projects at the last minute when they needed some extra XD support. She is going to go far in her career, and will be an asset to anyone who has the luck to hire her
Christopher Dye
Associate Director, Experience Design at Illumina
View other recognitions
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