Eine E-Commerce-Experience durch Research und Usability-Tests verbessern Improving an E-Commerce Experience Through Research and Usability Testing
Ein research-basiertes Redesign für Nebulite – mit klarerer Produktsuche, stärkerer Nutzenkommunikation und einem intuitiveren Einkaufserlebnis.
A research-led redesign for Nebulite, focused on clearer product discovery, stronger value communication and a more intuitive shopping experience.
- RolleRole
- UX/UI Designerin & Concept Testerin in einem 4-köpfigen TeamUX/UI Designer & Concept Tester in a 4-person team
- MethodenMethods
- Stakeholder-Interview · User Interviews · Card Sorting · Usability-Tests · PrototypingStakeholder Interview · User Interviews · Card Sorting · Usability Testing · Prototyping
- ZeitraumTimeline
- 2 Wochen2 Weeks
- Tools
- Figma · FigJam
Die Herausforderung
The challenge
Nebulite ist ein Berliner Label für Mode aus Glasfasergewebe und bietet Premium-Festivalkleidung und Accessoires an. Die Produkte stechen durch Features wie Lichteffekte und interaktive Elemente heraus – doch im bestehenden Shop fiel es Nutzern schwer, das Sortiment zu verstehen und den Wert hinter den Preisen zu erkennen.
Nebulite is a Berlin-based fiber-optic fashion brand offering premium festival clothing and accessories. While the products stood out through features such as light effects and interactive elements, the existing shop made it difficult for users to understand the product range and recognize the value behind the pricing.
Ein Stakeholder-Interview und erste Recherchen zeigten Probleme bei der Sichtbarkeit der Produkte, zu viele Informationen auf einmal, fehlendes Vertrauen und eine schwache Website-Performance. Unser Ziel war ein klareres Einkaufserlebnis, das die unverwechselbare Festival-Identität der Marke bewahrt.
A stakeholder interview and early research highlighted issues around product visibility, information overload, trust and website performance. Our goal was to create a clearer shopping experience while preserving the brand’s distinctive festival identity.
Inhaltcontent
Research
Nutzerverhalten und Herausforderungen verstehenUnderstanding user behavior and challenges
Wir starteten mit einem Stakeholder-Interview, um die Geschäftsziele und Herausforderungen von Nebulite zu verstehen. Anschließend führten wir 6 User Interviews, um Einkaufsverhalten, Erwartungen und die Wahrnehmung des bestehenden Shops zu erkunden.
We started with a stakeholder interview to understand Nebulite’s business goals and challenges, followed by 6 user interviews to explore shopping behavior, expectations and perceptions of the existing shop.
Aus der Research ergaben sich drei wiederkehrende Themen:
The research revealed three recurring themes:
ProduktsucheProduct discovery
Nutzer hatten Mühe zu verstehen, wo sich Produkte befanden, und ihnen fehlte ein klarer Überblick über das Sortiment.
Users struggled to understand where products were located and lacked a clear overview of the assortment.
WertwahrnehmungValue perception
Die Website vermittelte die besonderen Features der Produkte nicht stark genug, um die Premium-Preise zu rechtfertigen.
The website did not communicate the products’ unique features strongly enough to justify the premium pricing.
Information & VertrauenInformation & trust
Große Bilder, dichte Inhalte und Performance-Probleme machten die Navigation mühsamer und die Seite weniger vertrauenswürdig.
Large visuals, dense content and performance issues made the experience feel harder to navigate and less trustworthy.
Nutzerbedürfnisse zusammenführenSynthesizing User Needs
Erkenntnisse verdichten und Muster erkennenIdentifying patterns and translating findings into insights
Wir haben die Erkenntnisse aus den Interviews in einem Affinity Diagram geclustert und wiederkehrende Muster in eine schlanke Persona und eine User Journey übersetzt.
We clustered the interview findings in an affinity diagram and translated recurring patterns into a lightweight persona and user journey.
Das zentrale Bedürfnis war klar: Nutzer wollten Inspiration und visuelle Wirkung – aber auch einen kurzen, verständlichen Weg zu passenden Produkten und genug Informationen, um deren Wert einschätzen zu können.
The central need was clear: users wanted inspiration and visual impact, but also a short, understandable path to relevant products and enough information to evaluate their value.
Die User Journey führte uns zum Problem Statement:
Following the User Journey led us to the Problem Statement:
„Wie können wir Festival-Shoppern helfen, passende Produkte schneller zu finden und den Wert der Premium-Features von Nebulite zu verstehen – ohne den expressiven Nightlife-Charakter der Marke zu verlieren?“
“How might we help festival shoppers discover relevant products faster and understand the value of Nebulite’s premium features without losing the brand’s expressive nightlife character?”
Design-FokusDesign Focus
Aus Erkenntnissen klare Gestaltungsziele ableitenTurning insights into clear design objectives
Produktsuche neu strukturierenRestructuring Product Discovery
Mit Card Sorting zu einer intuitiveren NavigationUsing card sorting to create more intuitive navigation
Um zu verstehen, wie Nutzer das Sortiment intuitiv ordnen, haben wir 3 offene Card-Sorting-Sessions durchgeführt.
To understand how users naturally organize the product range, we conducted 3 open card-sorting sessions.
Die Ergebnisse halfen uns dabei:
The results helped us:
- intuitive Kategorienamen zu finden
- die Navigation zu vereinfachen
- eine klarere Sitemap und einen klareren Kaufprozess aufzubauen
- identify intuitive category labels
- simplify the navigation
- build a clearer site map and purchase flow
Design-EntscheidungDesign decision
Die wichtigsten Produktkategorien wanderten auf die erste Navigationsebene.
Key product categories moved to the first navigation level.
So wurde aus einer Produktstruktur, die Nutzer erst entschlüsseln mussten, eine, die sie auf einen Blick verstehen.
This turned the product structure from something users had to decode into something they could understand at a glance.
Die Richtung testenTesting the Direction
Konzepte validieren und gezielt weiterentwickelnValidating concepts and refining the design
Wir haben zwei Mid-Fidelity-Konzepte erstellt und mit 5 Nutzern getestet.
We created two mid-fidelity concepts and tested them with 5 users.
Die Tests zeigten, dass Nutzer unterschiedliche Elemente aus beiden Konzepten bevorzugten. Statt eine Variante komplett zu übernehmen, haben wir die stärksten Elemente beider Konzepte kombiniert und damit Navigation, Bedienelemente und Produktdarstellung verfeinert, bevor wir ins High-Fidelity-Design gingen.
Rather than selecting one version entirely, the tests showed that users preferred different elements from both concepts. We combined the strongest elements from both tested concepts to refine navigation, controls and product presentation before moving into high-fidelity design.
Eine Moodboard-Umfrage half uns, die angestrebte visuelle Richtung rund um Innovation, Exklusivität, Stil und Spaß zu validieren. Daraus haben wir eine gemeinsame Figma-Style- und Komponentenbibliothek entwickelt, um Konsistenz im gesamten finalen Prototyp sicherzustellen.
A mood-board survey helped validate the intended visual direction around innovation, exclusivity, style and fun. We then translated this into a shared Figma style and component library to ensure consistency across the final prototype.
Ergebnis auf einen BlickOutcome at a glance
- klarere Produkthierarchie
- stärkere Kommunikation der Premium-Features
- vereinfachte Produktkonfiguration
- getestete Designrichtung
- clearer product hierarchy
- stronger communication of premium features
- simplified product configuration
- tested design direction
Den validierten High-Fidelity-Prototyp in Figma gibt es hier Explore the validated high-fidelity prototype in Figma here
Finales KonzeptFinal Concept
Research und Testing in ein konsistentes Einkaufserlebnis übersetzenTurning research and testing into a cohesive shopping experience
Das finale Konzept vereinte:
The final concept combined:
- klarere Navigation und Produkthierarchie
- bessere Sichtbarkeit der wichtigsten Produkt-Features
- strukturiertere Produktseiten
- interaktive Elemente wie Tag-/Nachtansicht und konfigurierbare Produktoptionen
- ein ausgereifteres visuelles System, das die Festival-Identität von Nebulite bewahrt
- clearer navigation and product hierarchy
- stronger visibility of key product features
- more structured product pages
- interactive elements such as day/night views and configurable product options
- a more polished visual system that preserved Nebulite’s festival identity
Das Konzept wurde im Designprozess durch Usability-Tests validiert, ging aber nicht live – daher liegen keine Conversion-Daten nach dem Launch vor.
The concept was validated through usability testing during the design process, but it was not launched to production, so no post-launch conversion data is available.
Video: Prototyp-Walkthrough auf YouTube ansehen Video: watch the prototype walkthrough on YouTube
VorherBefore
NachherAfter
Wir haben die Website einfacher nutzbar gemacht – mit einer klaren Struktur und einem aufgeräumten Menü für eine einfache Navigation. Eine durchdachte Content-Hierarchie sorgt dafür, dass wichtige Informationen leicht zugänglich sind. Visuelle Elemente wie Icons und kurze Videos verbessern das Verständnis und machen Spaß. Zusätzlich können Nutzer per Toggle zwischen Tag- und Nachtansicht des Produkts wechseln – das macht das Erlebnis persönlicher und unterhaltsamer für alle.
We made the website easier to use by creating a clear structure with a tidy menu for easy navigation. A content hierarchy ensures important information is accessible. Visual elements, including icons and short movies, improve understanding and add joy. Additionally, a toggle for interactions allows users to change how the product looks between day and night modes, making it more personal and enjoyable for everyone.
Nächste SchritteNext Steps
Wirkung messen und datenbasiert weiter optimierenMeasuring impact and iterating based on data
Wäre das Konzept umgesetzt worden, wären meine nächsten Schritte:
If the concept moved into production, I would next:
- den High-Fidelity-Prototyp in einer weiteren Usability-Test-Runde validieren
- Conversion, Produkt-Engagement und Absprungpunkte nach dem Launch messen
- auf Basis von quantitativem und qualitativem Feedback iterieren
- Validate the high-fidelity prototype with another usability-test round
- Track conversion, product engagement and drop-off points after launch
- Iterate based on quantitative and qualitative feedback
Die ganze Case Study gibt’s auf Medium (auf Englisch).
Read the whole Case Study on Medium.