Fallstudie B2B E-Commerce · 2018–2021

neolab.

Aus einer Bachelorarbeit über die Schwächen eines Laborshops wurde der Berufseinstieg. Dort habe ich das Frontend modernisiert — und gemerkt, dass sauberer Code ohne Usability nutzlos ist.

Frontend Development UX Research Visual Design
Rolle
Frontend Developer · UX Research
Branche
B2B Laborbedarf
Umfang
Webshop · 3 Jahre · Iterativ
Team
Marketing · Entwickler-Team
Stack
Magento · HTML/CSS · JS
neoLab.de — modernisierter Webshop nach dem Redesign

Modernes Design trifft auf Funktionalität.

Als Frontend Developer modernisierte ich den bestehenden B2B-Webshop für Laborbedarf — und stieß schnell auf eine unangenehme Wahrheit: Sauberer Code allein löst keine Usability-Probleme. Also habe ich proaktiv strukturierte Usability-Tests eingeführt und mich vom Entwickler zum Anwalt der Nutzer gemacht.

Die Herausforderung

Technisch komplex,
optisch veraltet.

Über Jahre gewachsene Magento-Plattform mit veraltetem Frontend - zentrale Funktionen wie Warenkorb und Produktsuche waren nur schwer auffindbar.

Nahtlose Integration ins bestehende Magento-System ohne Betriebsunterbrechung
Balance zwischen funktionaler Klarheit und visueller Attraktivität
Modernes Erscheinungsbild, das sich in die vorhandene Markenwelt einfügt

Modulares System,
iterative Verbesserung.

Auf Basis eines modularen Komponenten-Systems entwickelte ich die Oberfläche von Grund auf neu — und führte parallel strukturierte Usability-Tests nach der Thinking-Aloud-Methode ein. So wurde aus Code-Arbeit echte UX-Forschung.

  • Design & Entwicklung. Gestaltung und Umsetzung neuer UI-Elemente wie Artikelübersichten, Detailseiten und Spezialseiten.
  • Testing & Iteration. Usability-Tests mit realen Anwendern für Produktsuche, Bestellvorgänge und Warenkorbprozesse.
  • Content & Visuals. Banner- und Produktdesigns für eine konsistente Markenkommunikation.
01
UI-Konzeption
Neue UI-Komponenten auf Basis eines modularen Systems - von Navigation bis Detailseiten.
02
Thinking-Aloud-Tests
Mehrere Test-Runden mit echten Anwendern — sie verbalisieren ihre Gedanken beim Suchen, Bestellen, Warenkorb-Nutzen. Probleme werden unmittelbar sichtbar.
03
Visual Design
Banner und Produktdarstellungen - visuell konsistente Markenkommunikation für die Laborbranche.

Was die Tests
ans Licht brachten.

In den Thinking-Aloud-Sessions sprachen die Tester aus, was sie beim Klicken dachten — und genau das machte verborgene Probleme greifbar. Drei Befunde waren besonders prägend und flossen direkt in die neue Version ein.

01
Erkanntes Problem
Unübersichtliche Startseite
Viele gleichwertige Elemente, bunte Promotions und dichte Navigation - überfordernd beim ersten Besuch.
Umgesetzte Lösung
Klare visuelle Hierarchie
Reduktion konkurrierender Elemente, Whitespace und neu strukturierte Primärnavigation - Fachkunden finden den richtigen Pfad in Sekunden.
03
Erkanntes Problem
Fehlende Transparenz im Bestellprozess
Versandkosten und Lieferzeiten erst kurz vor Kaufabschluss - Misstrauen und Abbruchgedanken.
Umgesetzte Lösung
Frühe, mehrstufige Kostenkommunikation
Versandkosten-Hinweise bereits in der Produktübersicht, transparente Aufschlüsselung im Mini-Cart - weniger Überraschungen, niedrigere Abbruchrate.

Test-Session #4, neolab Usability-Test. Eine Stammkundin sucht nach dem Warenkorb-Symbol. Sie scrollt, klickt auf zwei andere Icons und sagt schließlich:

„Ich weiß, dass es da irgendwo sein muss - aber das Symbol kenne ich nicht. Wo ist mein Korb?"

- Stammkundin (8+ Jahre Bestellerfahrung), Usability-Test #4, Heidelberg, 2019
Konsequenz: Ersatz des originellen Custom-Icons durch das universell erkannte Warenkorb-Symbol an erwarteter Position oben rechts. Branding darf die Orientierung nie unterhöhlen. Aus „Wo finde ich es?" wurde sofortige Wiedererkennbarkeit - die wichtigste Lektion des gesamten Projekts.

Aus der Diagnose
wurde Realität.

Die Schwächen, die meine Bachelorarbeit 2018 dokumentierte, sind hier direkt ihren Lösungen aus dem Redesign 2021 gegenübergestellt.

01 · Startseite — Übersichtlichkeit
02 · Produktdetailseite — Steuerbarkeit

Wirkung & Ergebnisse

Ein Shop, der
spürbar besser wurde.

2+
Jahre Projektlaufzeit
Kontinuierliche Iteration mit Marketing- und Entwickler-Team - nicht einmalig, sondern als gemeinsamer Prozess.
2018
Diagnose, dann Umsetzung
Erst die Schwachstellen in der Bachelorarbeit dokumentiert, dann als Frontend-Entwickler bei neoLab schrittweise behoben — Diagnose und Lösung aus einer Hand.
4
Usability-Test-Runden
Echte Anwender statt Annahmen - jede Iteration validiert mit Fachkunden aus Laborbedarf.

Was ich aus diesem Projekt
mitnehme.

Drei Erkenntnisse, die meine Arbeit als Designer und Frontend-Developer nachhaltig geprägt haben.

Learning 01
Originalität schlägt Orientierung nicht.
Branding hört auf, wenn es Nutzer am Verstehen hindert. Universelle Patterns gewinnen immer gegen kreative Eigenwege.
Learning 02
Echte Tests > Annahmen.
Vermeintlich kleine Test-Erkenntnisse hatten den größten Einfluss. Heute setze ich Tests früher und häufiger an.
Learning 03
Frontend ist UX-Arbeit.
Code-Perspektive allein reicht nicht. Heute denke ich Frontend immer aus der Sicht der Menschen, die es täglich benutzen.
Wendepunkt

Die Erkenntnis, dass die wertvollsten Lösungen im Verständnis der Nutzer liegen, war mein Wendepunkt. Diese Erfahrung hat meine Arbeit als Designer geprägt: Code, Design und Research gehören für mich seitdem zusammen.

"If you think good design is expensive, you should look at the cost of bad design."
Ralf Speth
— Nächstes Projekt
Finfire.