The product

Labregister is a Lab Inventory Management System (LIMS) developed to help scientists keep track of the available devices, reagents, samples, chemicals, etc. in the lab, as well as to visualize DNA sequences, purchase dates, expiry dates, and other relevant metadata, along with the possibility to register them into the system via barcode scanners.
Other features included an advanced search functionality powered by logical operators and the registration of parent and children components that were made in the lab as part of self-production.

The challenge: From extension to an app of its own

Labregister was originally designed in 2016 to be an extension of Labfolder's ELN. The design journey started when, by business decision, Labregister should become its own product.

This is how the LIMS looked in 2016. At this point, there wasn't an existing styleguide for Labfolder's extensions.

Experience Redefinition

Pain points

One of the biggest pain points to solve for the users was the fact that they needed to manipulate the database extensively at an Excel level, and in the beginning of the LIMS, the functionalities were really limited. So in collaboration with Charité - Berlin Institute of Health, the reshaping of the product started. By this time, it was decided that it was necessary to turn this extension into an app of its own to allow all features required to perform correctly.

Feature Design

For every missing feature detected, I ran 1 week design sprints to collect UI ideas, did quick wireframes to assess feasibility with engineers, prototyped, and then tested them with the BIH scientists. Since the time for the deliveries was really tight, most of the design work was done directly an the prototypes rather than re-wireframing the features in case changes were needed.

After the features were tested and accepted, I made use of Miro to document the user flows and their edge cases, visually for everyone in the company curious to see how the feature is supposed to work, and as decision flows for engineers.

Design System

Because the company merged with another, new brand guidelines were created to fit the new identity. I started then to create the final Design System using the new color palette, as well as the font library, the resposive breakpoints we wanted to support and the microinteractions, while following best practices from Google's Material Design and meeting WCAG standards, to then restart the Notebook UI and its prioritized features following those.

Redesign with Material Design

To follow consistency with the other products of the company, and also to offer the users an easier way to navigate their databases, a collapsible side navigation was offered to browse information by research groups. A table-based UI to enable bulk operations, such as editing, duplicating and archiving was also provided. The item details could be seen and edited individually by clicking the name or the ID.

Design contributors

I was a sole contributor during my employment time at Labforward GmbH.