SeraCare
Scientific research app for medical laboratories
Country: United StatesTechnologies: Typescript, Angular, Rx.js, D3.jsTime together: 11 months Team: PM, BA, 2 developers, QAOVERVIEW
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. Lab software needed the functionality to monitor and document complex medical studies and to compare data from other laboratories.
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 medical lab software 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
Meet the people who made the product's features possible.
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.
The application is called QC Management. It is a subscription-based web application for clinical laboratory management — creating experiment workflows, running experiments, monitoring them, and analyzing results.
1. WORKFLOW TEMPLATES
A lab 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.
2. 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.
3. 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.
4. 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.
5. 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.
6. 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.
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.
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 laboratory software.
Subscribe for the news and updates
WE ACT AS TRUE TECH CO-FOUNDER
In collaboration with visionary entrepreneurs whose only missing puzzle is tech expertise, we brought to market over 70 products that make people and teams more productive.
