Back
SeraCare

Scientific research app for medical laboratories

Technologies: Angular, Typescript, Rx.js, D3.jsTime together: 11 months Team: PM, BA, 2 developers, QA

OVERVIEW

SeraCare is a prominent company in the medical diagnostics industry, supplying materials and reagents to facilitate infectious disease and genomic testing in laboratories and research centers around the world. They also provide technologies for ensuring diagnostic safety and accuracy.

Previously, we developed an interface for this company, used for implementing math calculations for their inner procedures. And then, we were onto the next project for them — a complex front-end application for supporting pilot studies.

PURPOSE AND NEED

SeraCare needed an app intended for scientific research in medical laboratories. The application needed the functionality to monitor and document complex medical studies and to compare data from other labs. 

Complex research involves a certain number of steps (e.g., those required to test a blood sample or other diagnostic materials) that are repeated consecutively to acquire a sample size. Every step requires certain actions, equipment or instruments, and materials to get the results that should be saved for later analysis. Researchers also use these metrics to assess the results.

As one of the examples, think of how companies develop a new drug. It must undergo numerous tests and experiments before the product can hit the shelves — if it is approved. 

All things considered, the company needed an application that would:

  • monitor the workflow of experiments
  • account for materials used in the process
  • compare the results to one another
  • compare the results to the baseline

WORKFLOW

The client already had an MVP and clients interested in a full-fledged product. At this point, there was a need for a complex commercial application that the company could offer to their partner laboratories. 

We worked in close collaboration with the SeraCare developers. They handled the back-end coding, while our task was to create the interface for the application on the front end.

TECHNOLOGY

The main technology we used was Angular. It’s a high-performance web development framework with a component-based architecture for ensuring higher quality and clean code. We integrated the application with the Auth0 authorization service as per the client’s request. Our job was to implement forms, validation, front-end security, and an access policy. Other technologies include:

  • D3.js — a library with extended capabilities for creating any types of custom charts
  • TypeScript — a programing language with great tools and potential for higher scalability and clean code
  • Rx.js — a library for organizing data flows and events

In addition to that, we worked with the BEM (block-element-modifier) methodology, which is a better technique for structuring the code and user interface in complex projects.

STRUCTURE AND FEATURES

The application is called QC Management. It’s a subscription-based web application for creating experiment workflows, carrying out experiments, monitoring them, and analyzing the results. 

Now, let’s go over the application’s main features.

WORKFLOW TEMPLATES

A workflow template shows the stages that each experiment undergoes. Each stage consists of steps necessary to complete it, along with specified metrics. Additionally, the metrics may include parameters and thresholds that define whether the results are positive or negative. A lab can create any number of workflows for their research needs.

EXPERIMENT EXECUTION

Each workflow execution is called a “run.” A researcher chooses which workflow is used for the run, fills out the data about the materials used (including the batch number), variables, and the experiment’s results.

Once the research results are ready, they are visualized in the table format and analyzed by the administrator in charge, who can also set the final status to Passed or Failed.

DATA ANALYSIS DASHBOARD

The interface outputs a list or runs with the state of variables on each step, as well as status charts. The dashboard helps analyze the current run and compare it to the previous ones in a workflow.

EXPERIMENT REVIEW

The head of the department has special access that allows them to go over all the runs and steps and review the data. Once they review a piece of data and mark it as Checked, it will be displayed separately from the rest, marked as Approved.

PEER REVIEW APP

We also created a version of the software called Peer Review. The app allows users to input research results and compare them with other labs. It is also a subscription-based application, like QC Management.

CHALLENGING FEATURES 

We managed to overcome all the challenges and replace the old MVP with a new awesome user interface — a complex multi-level structure with workflows, runs, and other functions.

Going into the project, it already had the back-end source code, so we had to adapt to it and cooperate with developers who worked outside our team.

Other than that, there were a few sophisticated features that posed quite a challenge, such as:

  • Custom charts for research analysis. We chose D3 libraries to produce great custom charts manually instead of the ready-made ones. This allowed us to highlight the necessary data.
  • Authorization system. We created a three-step form in which every step requires validation. Otherwise, if the user were to close the form mid-process, it would create an unnecessary workload for the application.
  • Hierarchy of user authorization. There are three categories of users in this system, each having a different access level. The structure includes:
    • A SeraCare admin (company-side) — can create a lab admin and give access to one or both products
    • A lab admin (client-side) — can create users
    • Users — heads of departments and lab assistants or technicians who carry out the research experiments

The lab itself might have an office hierarchy in which case the SeraCare admin can create several lab admins.

Aside from the functionality, we also added some perks to boost the user experience. For example, PDF reports are a handy feature that allows users to download the research results in a more convenient format. This one is much appreciated by the users, as well as the other application capabilities.

RESULTS

We successfully created a commercial subscription-based application the client was very much satisfied with. Afterward, SeraCare hired in-house developers to maintain and further develop the project.

more cases to explore
Transpose

Creating a Project Management Tool

Country: United StatesTechnologies: Angular, Django, Python, PostgreSQL, Solr, Sass, AWSTime together: 2 years Team: PM, BA, 4 developers, QA