Labfolder

Das Produkt

Labfolder ist ein elektronisches Laborbuch (ELN), das als papierlose Lösung Wissenschaftlern dabei helfen soll, ihre Ergebnisse zu dokumentieren und die Forschung ihrer Abteilung zu skalieren. Jahrzehntelang haben Labore auf der ganzen Welt aus unterschiedlichsten Bedenken den Schritt zur Digitalisierung nicht gewagt. Doch in einer Zeit, in der Wissenschaft skaliert und Wissen innerhalb der Labore zugänglich gemacht werden soll, spielt Labfolder eine wichtige Rolle: Es macht das Festhalten von Ergebnissen so einfach und flexibel wie möglich und hält dabei alle Daten sicher.

Technisch gesehen ist Labfolder eine webbasierte Anwendung, mit der Wissenschaftler ihre Daten zentral verwalten und gleichzeitig gemeinsam daran arbeiten können. Das spezialisierte Format des ELN ermöglicht es den Wissenschaftlern, jedes im Labor benötigte Dateiformat hochzuladen und anzuzeigen – auch große, hochauflösende Bilder von Mikroskopen und anderen Laborgeräten. Damit ist es ein leistungsstarkes Werkzeug, um in der Forschung kein Detail zu übersehen.

Überblick

Ich war für das Redesign von Labfolder verantwortlich und von 2015 bis 2022 die einzige Designerin im Team.

Der erste Meilenstein war das Redesign des Notebooks. Dazu gehörten:
• Redesign der User Experience und der Benutzeroberfläche, einschließlich Durchsuchen, Filtern, Erstellen, Ausblenden und Teilen von Einträgen.
• Konzeption neuer Funktionen von Grund auf, etwa eines WYSIWYG-Texteditors mit LaTeX-Unterstützung, einer Integration eines Tabelleneditors mit Unterstützung komplexer Formeln, eines integrierten Editors zum Zeichnen chemischer Formeln für die Chemie, eines selbst entwickelten Mechanismus zum Hochladen und Anzeigen von Dateien sowie eines selbst entwickelten Mikrotiterplatten-Editors für die Biologie, der mit Laborgeräten zum Auslesen von Well-Platten verbunden werden kann.

Der zweite Meilenstein war das Redesign der kollaborativen Funktionen des ELN, die auf Berechtigungen basierten. Dazu gehörten:
• Redesign der Gruppenverwaltung
• Redesign der Projekt- und Vorlagenverwaltung
• Redesign des Datenexports und der zugehörigen User Experience

Plan

Die Schritte, mit denen das Redesign des ELN angegangen wurde und die im weiteren Verlauf dieser Fallstudie ausführlich erläutert werden:

Research & Erkenntnisse

👩🏻‍🏫 1 Stakeholder-Workshop pro Monat

um die Erwartungen jeder Abteilung an bestimmte Funktionen zu verstehen und einen ersten Plan für die Designs zu erstellen, die anschließend mit Nutzern validiert werden.

Erkenntnisse

👉🏻 Das meiste Feedback aus diesen Workshops betraf neue Funktionen speziell für das Notebook, etwa einen besseren Texteditor, einen besseren Tabelleneditor, einen besseren Bildeditor, einen neuen Editor für chemische Formeln sowie einen neuen Mikroplatten-Reader und -Editor.

👉🏻 Die Verbesserung, auf die sich alle einigen konnten, war ein flexibleres Layout für das Notebook, das weniger „kastenförmig“ wirkt.

💬 20 Nutzerinterviews pro Quartal

um zu überprüfen, ob die entworfenen User Flows für alle in diesem Quartal geplanten Funktionen verständlich und benutzerfreundlich waren.

Erkenntnisse

👉🏻 Die Nutzer hatten große Probleme mit der Ladezeit des Notebooks, die teilweise über 20 Sekunden betrug.

👉🏻 Die Nutzer hatten Schwierigkeiten, Einträge im Notebook zu finden, die sie selbst oder Kollegen aus demselben Team erstellt hatten. Die bis dahin vorhandenen Filter halfen dabei kaum.

👉🏻 Insgesamt herrschte bei der Arbeit mit Labfolder ein Gefühl von Unordnung – wegen der Navigation und der stark auf Filtern basierenden UX, aber auch wegen der Art, wie die Einträge in den Projekten dargestellt wurden.

🧑🏻‍💻2 technische Breakdown-Sessions pro Monat

bzw. pro Sprint, um mit den Entwicklern über die geplanten Funktionen zu sprechen und zu klären, wie sie sich in die bestehende monolithische Architektur einfügen lassen.

Erkenntnisse

👉🏻 Die Ladezeit des Notebooks lag an den ins System hochgeladenen Bildern: Wissenschaftler müssen zum Beispiel Mikroskopiebilder hochladen. Diese Bilder von Laborgeräten sind in der Regel sehr groß.

👉🏻 Ein weiterer Aspekt war die Kombination aus Filtern und endlosem Scrollen. Das funktionierte bei großen Datensätzen, großen Bildern und vielen Nutzern, nach denen gefiltert wird, schlecht. Bei jedem neuen Filterkriterium wurde ein API-Aufruf ausgelöst, was für den Endnutzer zu einer sehr zähen Erfahrung führte, da jeder Aufruf bis zu 5 Sekunden dauern konnte.

👉🏻 Das Redesign musste in mehrere Phasen aufgeteilt werden, um einen kompletten Stillstand für den Neuaufbau zu vermeiden:
- Phase 1: Reskinning des Notebooks mit kleineren visuellen Änderungen.
- Phase 2: Schrittweiser Neuaufbau des gesamten Produkts samt Backend.

Priorisierte Journeys

Aus der Research-Phase ergaben sich die folgenden Journeys, die der PM und ich unter Berücksichtigung technischer Abhängigkeiten zuerst angehen wollten:

Das Notebook-Erlebnis, um das „Gefühl von Unordnung“ zu beseitigen

Dazu gehörte, wie der Nutzer das Notebook erlebt, wenn er es aufruft: Wie findet er das Notebook und wie sieht er seine Einträge? Konkret bedeutete das:
• Navigation im ELN
• Struktur des Notebooks für eine bessere Darstellung der Einträge
    •• Navigation zwischen Einträgen
    •• Kopfbereich des Eintrags
    •• Inhalt des Eintrags
• Klare Aktionen für Einträge, damit für Nutzer kein Zweifel besteht, was sie mit ihren Informationen tun können.

Filtererlebnis, um die langen Ladezeiten zu verringern

Dazu gehörte, wie die Filter dargestellt und wie das Filtern ausgelöst wird.

Sucherlebnis, um die schlechte Auffindbarkeit von Informationen zu verbessern

Dazu gehörte die Entwicklung einer erweiterten Suche auf Basis logischer Operatoren.

Design Ops

Das neue Designsystem für Labfolder folgte den WCAG-Standards, den Material-Design-Richtlinien und dem neuen Branding von Labfolder nach der Unternehmensfusion, aus der Labforward hervorging.

Es war in drei Bereiche gegliedert: Assets, Styles und Komponenten. Hier ein kleiner Einblick in eine der Komponenten, die Checkboxen, und wie sie mit Entwicklungsspezifikationen dokumentiert wurden (lange bevor Figma diese Funktion überhaupt anbot).

Designlösungen

In diesem Abschnitt fasse ich die im Vorgehen beschriebenen UX-, UI- und Testphasen pro Funktion zusammen. Dabei konzentriere ich mich allerdings nur auf bestimmte Funktionen, um die Fallstudie kompakt zu halten.

Hauptnavigation des ELN

3 Hauptmenüpunkte mit vielen darin verschachtelten Unterpunkten – dadurch war kaum sichtbar, was in Labfolder alles zu finden war.

Zunächst musste ich alle Navigationspunkte erfassen und klären, was sie jeweils enthielten.

Damals wurden verschiedene Layouts auf Papier vorgestellt. Am sinnvollsten war das Layout mit einer Seitennavigation, da sehr viele Punkte auf den ersten Blick sichtbar sein mussten. Hier ein Wireframe der gewählten Lösung:

Ich habe mit den Leitern von Marketing und Customer Success zusammengearbeitet, um Feedback zur Navigation einzuholen. Beide verfügten bereits über viele Informationen zu diesem Thema, und das bestätigte die Idee einer Seitennavigation.

• Eine Umfrage des Customer-Success-Teams brachte positives Feedback zur Navigation: Die Nutzer gaben an, dass sich Labfolder mit dem Seitenmenü viel einfacher und übersichtlicher erkunden ließ. Einige sagten sogar, sie hätten Optionen entdeckt, von denen sie gar nicht wussten, dass es sie gibt!

Struktur des Notebooks

Eintragsliste (Navigation)

Die Notebook-Ansicht ist wie ein endloser Feed aller Einträge, sortiert nach den Einstellungen des Nutzers. Nutzer sehen tatsächlich ALLE Inhalte, die Kollegen in ihrer Abteilung veröffentlichen, und ohne Autorenfilter wird die Informationsmenge unüberschaubar. Es gibt keine direkte Möglichkeit, die Einträge eines Autors anzuzeigen, ohne manuell einen Filter anzuwenden. MEINE Informationen lassen sich nicht auf den ersten Blick finden.

Die API-Endpunkte und das Backend insgesamt sind nicht auf einzelne Einträge ausgelegt, und das musste sich ändern.

Was müssen Nutzer an einem Eintrag auf den ersten Blick erkennen? Das war die erste Frage, die es zu beantworten galt. Zunächst habe ich die verfügbaren Metadaten eines Eintrags erfasst.

Anschließend habe ich in einem Workshop vor Ort mit 15 Nutzern eine Übung durchgeführt, um die für sie wichtigsten Metadaten herauszufiltern.

Sie konnten frei auf Papier zeichnen, das Whiteboard nutzen oder Word bzw. Excel verwenden, wenn ihnen das leichter fiel.

Aus dieser Übung konnte ich ableiten, dass der Titel des Eintrags, das Datum der letzten Änderung und der Nutzer, der den Eintrag zuletzt bearbeitet hat, die wichtigsten Metadaten waren.

Eine weitere Erkenntnis war, dass eine Seitenleiste für Einträge benötigt wurde, um schnell zwischen Einträgen zu wechseln, ohne den gesamten Inhalt durchsehen zu müssen. Durch eine feste Seitenreihenfolge sollte das den Nutzern ein Gefühl von Ordnung vermitteln.

Auch Projekttitel und Tags wurden ergänzt, doch die Nutzer meinten letztlich, dass das bei der Suche nach Einträgen zu viele Informationen zum Sichten sein könnten.

In diesem Workshop habe ich ein Wireframe mit der Eintragsliste vorgestellt. Den Nutzern zufolge erfüllte es ihre Anforderungen.

Zusätzlich zu den voreingestellten Filtern im Panel habe ich Schnellfilter vorgeschlagen, mit denen Nutzer ihre Einträge leichter finden. Ausgewählt wurden:
• Meine Einträge anzeigen (in allen Projekten)
• Einträge anzeigen, an denen ich mitarbeite
• Meine Lieblingseinträge anzeigen

• Diese Screens kamen bei den Nutzertests sehr gut an. ❤️

• Leider wurde die Eintragsliste vom Management depriorisiert, da sie nicht als geschäftskritisch angesehen wurde.

Kopfbereich des Eintrags

Der Titel des Eintrags war nicht prominent genug. Der gesamte Kopfbereich wirkt wie ein Container für Metadaten, weshalb Nutzer ihn meist ignorieren und die Metadaten als Inhalt im Eintrag wiederholen, zum Beispiel in Form großer Überschriften.

Nachdem die zuvor gestellte Research-Frage beantwortet war (Was müssen Nutzer an einem Eintrag auf den ersten Blick erkennen?), habe ich mit dem Layout des Kopfbereichs experimentiert und dabei auch die Aktionen ergänzt, die auf Eintragsebene unverzichtbar waren.

Ich habe 3 Varianten erstellt, die von Nutzern validiert werden sollten. Dieses Mal habe ich eine einfache Online-Umfrage genutzt, um Präferenzen und Meinungen zu sammeln. Hier die Varianten und der Gewinner:

So sah der Kopfbereich des Eintrags zusammen mit dem Rest der Seite aus:

Learnings