logo

ProactivePortal

Use big data to monitor instrument performance, detect issues and diagnose on the fly.

Role

I was the sole UX Designer / Engineer in the team. I worked with four Data Scientists, one Backend Engineer and two Project Managers for this project.

Illumina Proactive Portal
Illumina Proactive Portal
25%
faster case resolution using Illumina Proactive.
7.3%
Increase in yield for NovaSeq
$170k
Saved per year in licensing fees alone by using open source tools.

"... lab staff loves Proactive as it helps them avoid the hassle of sharing files with tech support ..."

"Proactive helped an FSE diagnose faster a slow decrease in intensity of 55.3% over two-and-a-half-year period!"

BACKGROUND

About Illumina

Illumina, Inc. provides sequencing and array-based solutions for genetic and genomic analysis. Approximately 90% of the genomic data available to date has been produced by instruments manufactured by Illumina. It powers cancer research and companies like 23&Me and Ancestry.

What is Proactive

Illumina instruments work on some very critical and expensive applications. Customers are eager to maximize performance from the instruments and prevent or minimize downtime in the event of a breakdown. Illumina Proactive gathers instrumentation data from the instruments regularly for our highly qualified Service & Support (S&S) team to use in the event of a breakdown.

The data also allows our data science team to run ML algorithms to detect potential issues in advance. ProactivePortal is the interface that the S&S team can use to access the instrumentation data and alerts in graphical or tabular format.

ISSUES

Many types of users

The Service & Support is made of different kinds of roles that support the customers uniquely. Some roles monitor instruments on a case-by-case basis and have general expertise in the domain. In contrast, others dig deeper to ensure customer success. All the roles have a varied set of requirements, competence, and beliefs.

The new iteration of ProactivePortal was designed to cater to all these roles.

Aging Design & Infrastructure

ProactivePortal was first implemented using a proprietary UI framework designed for smaller IoT applications. This framework allowed developers to author the front end using backend languages like JAVA. There were limits to the framework, and the team could not address critical user requests due to its limitations.

The architecture of the new ProactivePortal prioritizes flexibility and performance.

Business Goals

Reduce instrument downtime and cost to fix instruments. Better access to data, can dramatically reduce downtime. Develop a custom solution which can offer more flexibility to implement the required features.

Illumina Proactive Portal

Fig: The previous version of the ProactivePortal was hard to use

PREVIEW

Illumina Proactive Portal

USERS

Service & Support

A dedicated team of and highly qualified make sure that the instruments are up and available for critical research and diagnosis activities. All roles have their own requirements, competence, and beliefs.

Eric Boyer, 24

Field Service Engineer

About

Visits the customer location to install new instruments or to fix one. Uses ProactivePortal to diagnose the problem.

Receives suggestions from Tech Support on how to fix the problem.

Orders parts from Illumina (sometimes in advance, if possible) to get the instrument up and running.

Has a bachelors’ degree in Mechanical Engineering.

Goals

Get the instrument up and running for the customer as soon as possible. They may lose thousands of dollar for every day the instrument is idle.

Looks for issues which are hard to deduce from data alone, like instrument/lab condition.

Lela Inglis, 41

Field Application Scientist

About

Assists customers with their projects. Helps them configure the Illumina instrument according to their needs.

Trains the lab staff on how to use the Illumina Instruments.

Uses ProactivePortal to monitor the individual instrument and account performance.

Has a PhD in a relevant field.

Goals

Ensure maximum utilization and smooth operation for Illumina’s customers.

Brief lab directors on instrument on performance and utilization of instruments on a monthly cadence.

Olga Brown, 38

Tech Support

About

Responds to emails and calls from Illumina customers around the globe.

Uses ProactivePortal to get more information about the instrument and suggest a fix remotely.

Highly qualified and experienced with various instruments and use cases.

Has a PhD in a relevant field.

Goals

Quick resolution of issues.

Try to diagnose the issue remotely. Sending an FSE costs more time and money.

Checkup on the instrument once the fix is implemented.

RESEARCH

Focus Group

Focus Group

Conducted several focus group with different user groups to learn about their challenges, beliefs, requirements and reaction to some concepts.

Interviews

Interviews

Get a deeper understanding of different users’ work, goals, pain points and explore how ProactivePortal may help them achieve their goals.

Surveys

Surveys

Validate some ideas that emerged from Focus group and interviews. I also allowed some extra space in the survey for users to suggest their own ideas.

Surveys

Competitive Analysis

Analyzed some tools which are frequently used by the Service & Support, and the previous version of ProactivePortal.

DESIGN PRINCIPLES

Before designing the UI for the ProactivePortal, I selected some design principles to guide the designing process.

Better Information Architecture

Information should be highlighted in order of importance. Links should be provided where possible to navigate between different part of ProactivePortal.

White Space

More emphasis on clean minimal aesthetics white space. I was inspired by the neomorphic trend, and I have used shadows to emphasize separation rather than lines when possible.

Design Principles

DESIGN SYSTEM

Colors

Colors

Typography

Colors

Elements

DEVELOPMENT

Developing from Scratch

I was the only front-end developer and designer in the Proactive team. This helped speed up the implementation process as there was no need to sync between the design and development team. I used popular, well-known packages along with React to help me with the development.

react

React is arguably the most popular JS framework at the moment. It prioritizes performance and developer experience. A majority of other popular packages work well with React.

antd

Ant Design is an open source React library developed by the Ant Group to streamline their development. I was able to build on top of the many components that the library has to offer.

ts

TypeScript catches errors and provides fixes before running the code. It helped me manage the large codebase.

ts

D3.js is a flexible charting library. It provided a good level of flexibility to develop some complex charts.

styled

Styled components is a CSS in JSX library. Having the styles in the same file as the component prevents context switching.

storybook

Storybook helped me document the various components. It helped me keep track of the components I have developed. It also helped my manager analyze the progress of the project.

grunt

Grunt is a taskrunner. I used it to integrate some legacy libraries with the project.

postman

Postman helped my sync with the backend developer in my team. It made it easy to share updates and test the API response independent of the UI component.

docker

Docker helped us optimize the build process. It cut down the time needed to build and deploy.