Labfolder ist ein elektronisches Laborbuch (ELN) – eine papierlose Lösung, die Wissenschaftler:innen dabei unterstützt, ihre Forschungsergebnisse zu dokumentieren und die Forschung innerhalb ihrer Abteilungen zu skalieren.

Technisch handelt es sich um eine webbasierte Anwendung, die Forschenden hilft, ihre Daten zentral zu verwalten und gleichzeitig kollaborativ zu arbeiten. Das spezialisierte Format des ELN ermöglicht es, nahezu jeden im Labor benötigten Dateityp hochzuladen und zu visualisieren, wodurch es zu einem leistungsstarken Werkzeug wird, um kein Detail im Forschungsprozess zu übersehen.

Zu den entwickelten Funktionen gehörten unter anderem ein eigens entwickelter WYSIWYG-Texteditor mit LaTeX-Unterstützung, die Integration eines Tabelleneditors mit Unterstützung komplexer Formeln, ein integrierter chemischer Strukturzeichner für chemische Anwendungen, ein selbst entwickelter Mechanismus zum Hochladen und Visualisieren von Dateien sowie ein eigens entwickelter Mikrotiterplatten-Editor für biologische Anwendungen, der mit Laborgeräten zur Auswertung von Well-Platten integriert werden kann.

Weitere Bereiche der kollaborativen Funktionen umfassen Gruppenverwaltung, Projektverwaltung, Exportfunktionen und Vorlagenmanagement. Diese werden durch ein differenziertes Berechtigungssystem gesteuert, um sicherzustellen, dass die richtigen Nutzer innerhalb der Organisation Zugriff auf die jeweils relevanten Informationen haben.

Die Herausforderung

Ein verwirrender Feed mit unendlichem Scrollen und keiner vorherigen Designintervention

Ursprünglich 2013 von Wissenschaftler:innen und Softwareentwickler:innen entworfen, hatte das Labfolder ELN ein altmodisches Look-and-Feel, das einem analogen quadratischen Notizbuch ähnelte. Die primäre Benutzererfahrung war ein feedbasierter Ansatz mit Filtern und unendlichem Scrollen, was schließlich zu Performance-Problemen führte und die Nutzer verwirrte, da die analoge Erfahrung eines wissenschaftlichen Notizbuchs (strukturiert nach Projekten und innerhalb dieser nach Experimenten) völlig verloren gegangen war. Es gab keine wirkliche Möglichkeit, visuelle Hinweise zu finden, wie man die Einträge innerhalb eines Projekts navigiert. Beim Öffnen der Anwendung herrschte der allgemeine Eindruck von „Unordnung“.

So sah es 2015 aus, als ich dem Unternehmen beitrat.

2) Meine Rollen im Prokekt

Das Produktteam allein

Aufgrund begrenzter Budgets in den ersten Jahren, in denen ich mit dem Team arbeitete, hatte ich eine hybride Rolle zwischen Product Designer und Product Manager.
In meiner Design-Rolle, die ich von 2015 bis 2020 innehatte, führte ich direkt Nutzerinterviews in den Laboren durch und während der Pandemie per Videocall. Die Interviews umfassten sowohl UI-AB-Tests als auch Interaktionstests mit funktionalen Prototypen (erstellt mit UXPin).
In meiner Produktrolle arbeitete ich direkt mit dem CEO und dem Marketing-Team zusammen, um zunächst die dringend benötigten Features umzusetzen, bevor wir uns auf das große Ganze konzentrierten. Ich betreute das Backlog, leitete Sprint-Planungen, Backlog-Refinements und Retrospektiven von 2015 bis 2020.

3) UX Neudefinierung

Schmerzpunkte, adressiert durch User Story Mapping

Der zentrale Schmerzpunkt, der, wie bereits erwähnt, das Redesign auslöste, war die Art und Weise, wie die Navigation gestaltet war, sowie die offensichtliche mangelnde Auffindbarkeit einer klaren Struktur in den von den Nutzer:innen generierten Daten, zusätzlich zu den Performance-Problemen, die durch große Dateien verursacht wurden. Das Redesign war dabei nicht nur eine Designaufgabe, sondern umfasste ebenso umfangreiche Frontend- und Backend-Arbeiten. Durch den Einsatz der User-Story-Mapping-Methode konnten Produkt- und Entwicklungsteams sowohl auf die geschäftlichen als auch auf die teambezogenen Prioritäten abgestimmt werden sowie Blocker und Abhängigkeiten visualisieren.

UX Design

Design Sprints wurden eingeführt, um nach der Auswertung von Hunderten direkt über die Support-Plattform eingegangener Feedback-Berichte sowie nach Videocalls mit Nutzer:innen erste Ideen auf Papier zu entwickeln.
Ideation-Workshops wurden mit verschiedenen Stakeholdern organisiert, um zu prüfen, wie ähnlich die Wahrnehmung des ELN war. Die zuvor erstellten Personas wurden während dieser Workshops geteilt, um sie zu validieren und gegebenenfalls anzupassen. Zusätzlich wurden neue Personas entwickelt, um die geplanten neuen Funktionalitäten abzudecken.

4) UI-Neudefinition

Erste Prototypen: Validierung von Ideen mit echten Nutzer:innen

Ich begann damit, die wichtigsten Features für die Nutzer:innen zu prototypisieren – darunter Filter, Navigationsdesign und das Design der Einträge. Die Prototypen waren funktional, um genau zu zeigen, welche Interaktionen enthalten sein würden, und enthielten zusätzlich Demo-Szenarien, damit die Nutzer:innen nachvollziehen konnten, welche Möglichkeiten ihnen zur Verfügung stehen.
Durch die Nutzung einer Voting-Plattform konnte ich den Einfluss jeder Funktion bewerten, Prioritäten festlegen und Trends ableiten.

Für diese ersten Prototypen wurde eine UI-Bibliothek auf Basis der damaligen Markenidentität (2016) erstellt, um mit dem Aufräumen des Frontends zu beginnen und gleichzeitig die UI zu standardisieren.

Produkt-Rebranding aufgrund einer Unternehmensfusion: Neues und finales Designsystem

Da das Unternehmen mit einem anderen fusionierte, wurden neue Brand Guidelines entwickelt, um die neue Identität abzubilden. Anschließend begann ich mit der Erstellung des finalen Designsystems unter Verwendung der neuen Farbpalette, der Schriftbibliothek, der unterstützten Responsive-Breakpoints sowie der Mikrointeraktionen. Dabei orientierte ich mich an den Best Practices von Googles Material Design und erfüllte die WCAG-Standards, um darauf aufbauend die Notebook-UI und deren priorisierte Features neu zu gestalten.

UI-Reskin: Erster Schritt des Redesigns

Design Ops + Agile

Da agile Methoden Kompromisse erfordern, bestand der erste Ansatz aus Produktsicht darin, die bestehende Benutzeroberfläche zunächst zu reskinnen, bevor alles neu implementiert wurde, um den Nutzern etwas Neues zu bieten. Dafür wurde ein sechswöchiger Sprint mit gepaartem Design- und Entwicklungsarbeit von drei Frontend-Entwickler:innen durchgeführt, in dessen Rahmen das gesamte ELN reskinned wurde. Die Architektur der Filter und der Navigation blieb unverändert, während die Laborbuch-Erfahrung überarbeitet wurde und nun wie ein White-Paper-Notizbuch dargestellt wird, bei dem die Blöcke nicht mehr sichtbar sind, wodurch die visuelle Belastung jeder einzelnen Eintragung und ihrer Elemente reduziert wird.

Finales UI-Redesign: Laborbuch

Mit mehr Zeit zur Verfügung kam endlich der Moment, das finale UI-Redesign zu starten. Das Ziel des Redesigns bestand darin, die Navigationserfahrung zu verbessern, indem diese an die Seite verlegt wurde und gleichzeitig eine klare Möglichkeit geschaffen wurde, die Einträge eines Projekts zu navigieren. Dazu werden die Einträge nun als Karten dargestellt, um eine Navigation ähnlich einer Notizbuchseite zu ermöglichen. Dieser Ansatz half zudem, die Ladezeiten der Seiten zu verbessern, die durch die große Menge an Daten und Bildern sonst schnell überlastet werden konnten.

Finales UI-Redesign: Projektmanagement

Auch der Bereich Projektmanagement der Anwendung wurde überarbeitet. Es wurden Möglichkeiten hinzugefügt, Projekte in Baum-, Spalten- oder Layer-Ansicht zu durchsuchen. Die Herausforderung bestand darin, im Worst-Case-Szenario 10.000 Projekte darstellen zu können – so viele Projekte wurden einer Organisation laut bisherigen Berichten maximal angezeigt, insbesondere für Gruppenadministratoren. Eine Funktion wurde implementiert, mit den Nutzern die für sie relevanten Projekte auswählen können, um sicherzustellen, dass nichts übersehen wird, ohne dabei die Performance zu beeinträchtigen.

Finales UI-Redesign: Exportmanagement

Der Bereich Exportmanagement der Anwendung war besonders wichtig, da Nutzer häufig ihre Daten für Veröffentlichungen in wissenschaftlichen Fachzeitschriften exportieren wollten. Da die Exporte asynchron abliefen, wurde ein „Export-Center“ eingerichtet, in dem alle Exporte eingesehen werden konnten, inklusive Statusanzeigen für Erfolg, Misserfolg und Fortschritt.

6) Reichweite des Designs