Das Produkt

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, Vorlagenmanagement und Exportfunktionen. 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.

Meine Rolle: 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.

UX Design

Design Sprints wurden eingeführt, um nach der Auswertung von Hunderten direkt über die Support-Plattform eingegangener Feedback-Berichte und nach Videocalls mit den Nutzern Ideen zunächst auf Papier zu generieren.
Ideation-Workshops wurden mit verschiedenen Stakeholdern organisiert, um zu prüfen, wie ähnlich die Meinungen zum ELN waren. Die zuvor erstellten Personas wurden während dieser Workshops geteilt, um sie zu validieren und gegebenenfalls anzupassen. Neue Personas wurden ebenfalls während der Workshops erstellt, um neue Funktionalitäten abzudecken, die entwickelt werden sollten.

Erste Prototypen: Validierung von Ideen mit echten Nutzern

Ich begann damit, die wichtigsten Features für die Nutzer zu prototypisieren, nämlich die Filter, das Navigationsdesign und das Design der Einträge. Die Prototypen waren funktional, um genau zu demonstrieren, welche Interaktionen enthalten sein würden, und enthielten Demo-Szenarien, damit die Nutzer verstehen konnten, was möglich war.
Durch die Nutzung einer Voting-Plattform konnte ich den Einfluss jeder Funktion bestimmen, Prioritäten setzen und Trends ableiten.

Für diese ersten Prototypen wurde eine UI-Bibliothek basierend auf der Markenidentität jenes Jahres (2016) erstellt, um das Frontend aufzuräumen und natürlich die UI zu standardisieren.

Produkt-Rebranding aufgrund einer Unternehmensfusion: Neues und finales Designsystem

Da das Unternehmen mit einem anderen fusionierte, wurden neue Brand Guidelines erstellt, um die neue Identität abzubilden. Anschließend begann ich, das finale Designsystem zu erstellen, einschließlich der neuen Farbpalette, der Schriftbibliothek, der unterstützten Responsive-Breakpoints und der Mikrointeraktionen. Dabei orientierte ich mich an den Best Practices von Googles Material Design und den WCAG-Standards, um anschließend die Notebook-UI und deren priorisierte Features entsprechend 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.

Design-Mitwirkende

Während meiner Beschäftigung bei Labforward GmbH war ich die einzige Mitwirkende am Design.