The Light Atelier

E-Commerce

Wie können wir eine interaktive Nutzererfahrung eines Lampen-Online-Shops schaffen, die nicht nur intuitiv und funktional ist, sondern auch emotional bindet?

User Szenario: Unsere User Persona Lisa Lampe sucht eine spezielle Tischlampe, die sie in einem Cafè entdeckt hat und nachkaufen möchte.

Ziel des User-Flows:  Lisa findet nicht nur eine Lampe – sie fühlt sich emotional abgeholt, inspiriert und sicher in ihrer Entscheidung.

Dieses Projekt ist 2025 innerhalb von 2 Wochen in einer Gruppe von 3 Personen während des UX/UI Bootcamps der neuefische GmbH enstanden. Für das Endergebnis sieh Dir gern das nachfolgende Video (2:15 Min) an.

Dieses Projekt haben wir bei der User Story von unserer User Persona Lisa Lampe gestartet. Lisa wünscht sich Folgendes:

"Als designaffine Interior-Liebhaberin möchte ich mich intuitiv im Lampen-Onlineshop orientieren können, um hochwertige Leuchten gezielt zu entdecken und ihre Funktionen sowie Lichtwirkung leicht zu verstehen – passend für jeden Raum und Anlass.

Eine interaktive Nutzererfahrung mit spielerischen Elementen soll mir dabei nicht nur Orientierung, sondern auch ein Gefühl von Geborgenheit vermitteln, das mich inspiriert und zur weiteren Nutzung motiviert."

Nach der Erstellung des User Flows und eines Moodboards haben wir folgende Design Prinzipien passend zum Thema Licht festgelegt:

Geborgenheit (Licht erzeugt Stimmung): Durch warme Farben, sanfte Übergänge und stimmungsvolles Bildmaterial bekommt der Nutzer ein Gefühl von Zuhause und Wohlbefinden.
Klarheit (Licht ins Dunkel bringen): Eine reduzierte, strukturierte Oberfläche sowie klare Infos zu Funktionalität lenken den Fokus auf das Wesentliche und erleichtern die Orientierung der Nutzer:innen.
Kontext (Ins Rampenlicht setzen): Produkte werden nicht isoliert, sondern im passenden Wohnumfeld gezeigt.
Qualität (Ins rechte Licht rücken): Hochwertige Materialien, langlebige Technik und exzellente Verarbeitung spiegeln sich auch im visuellen Design und der durchgängigen Nutzererfahrung wider.

Wireframes und Interviews: Die ersten Ideen für den Online-Shop haben wir mit Stift und Papier visualisiert, in Excalidraw zu Low-Fidelity Wireframes weiterentwickelt und letztendlich in High-Fidelity Wireframes und den Prototypen umgesetzt. Produktkarten mit Hovereffekt und andere wiederkehrende Elemente sind in einem Design System untergebracht.

Die warmen Farben und freundlichen Icons spiegeln den Aspekt der Geborgenheit aus den Design Prinzipien wieder und die kantige Typografie verbindet diesen mit der technischen Thematik der Produkte.

Zum Überprüfen des Prototypen klickten zwei Testpersonen in 1:1 Interviews durch den Prototypen. Mithilfe der Impact-Effort-Matrix bewerteten wir die Erkenntnisse und setzten die wichtigsten Punkte mit Blick auf den zeitlichen Rahmen um.