Revolution des Online Shopping

– Entwicklung einer nahtlosen User Experience für eine Social Commerce App

Meine Rolle

UX-Designer,
Technisches Projektmanagement

Zeitplan

8 Wochen, 2023

Leistungen

Research
UX Design
Design System
Webdesign

Das Startup SIYU.live will Online Shopping neu definieren und die Lücke zwischen Live-Shopping-Erlebnissen und Social Media schließen. Es wurde eine einzigartige Plattform geschaffen, die E-Commerce grundlegend neu denkt.

Als UX-Designer lag der gesamte Konzeptions- und Designprozess in meinen Händen. Um die Idee zum Leben zu erwecken war durch ein knappes Budget und geringe Ressourcen viel Kreativität gefragt. Aktuell befindet sich die App in der finalen Phase der technischen Entwicklung.

Problem Statement

Die Plattform soll sich mit Online-Shopping in Live-Streams und Dropshipping auf einem mäßig erfolgreichen Markt neben bereits etablierten Händlern positionieren. Ohne eine differenzierte User Experience und einen echten Mehrwert bietet SIYU den potentiellen Usern ein bereits bekanntes Shopping-Erlebnis, das kein langfristiges und bahnbrechendes Engagement bewirkt.

Research

Potentiale trotz Big Player auf deutschem Markt

Das Projekt begann mit einer Markt- und Nutzerrecherche, um Potenziale und Herausforderungen frühzeitig zu identifizieren. In China boomt Live Commerce mit prognostizieren 281,2 Mrd. US-Dollar im Jahr 2023. Der Erfolgs wird den Folgen von COVID-19 und der Moderation durch Influencer und Prominente zugeschrieben – die Glaubwürdigkeit der Produktpräsentation sei von höchster Priorität. Das klassische Teleshopping der 90er und 200er basierte ebenfalls auf der starken Bindung zwischen Moderator und Zuschauer sowie Selling by Story Telling.

Große Händler wie Amazon, Douglas, Tchibo und MediaMarktSaturn versuchen den Trend auf dem europäischen Markt zu reproduzieren. Jedoch zeigt eine Studie aus 2023, dass 42 Prozent der deutschen Befragten keine Anreize zum Ausprobieren von Live-Shopping sehen. In einer separaten Untersuchung zu Shopping-Trends für 2024 offenbart sich hingegen enormes Potenzial auf Social Media. 66% von Gen Z und Millennials bekundeten, dass sie aktiv über Influencer Empfehlungen shoppen und 79% von Gen Z’s Käufen wären sogar allein durch Social Media motiviert.

Große Marken implementieren klassische Teleshopping-Formate in ihren Online-Shops

Kaufentscheidungen von Gen Z und Millennials werden stark von Social Media beeinflusst

Verbraucher suchen nach bequemen Online-Shopping-Erlebnissen mit Empfehlungen von vertrauenswürdigen Personen

USPs

Chancen durch Social Commerce und Marktfragmetierung

Durch die Erkenntnissen der Research wurde der Fokus der App auf Social Commerce gesetzt. Als unabhängige Anbieter bietet SIYU dem User eine breite Palette an Produkten von verschiedenen Marken auf einer einzigen Plattform. Im Gegensatz dazu sind viele Live-Shopping-Lösungen auf einen Sektor beschränkt, wie zum Beispiel Douglas im Bereich Beauty. Diese Marktfragmentierung ermöglicht eine innovative Positionierung auf dem deutschen Markt.

Durch die Verbindung von Social-Media und E-Commerce entsteht eine tiefere Verbindung zwischen Shopping Erlebnis und Kauf. Im Mittelpunkt dabei steht die Interaktion zwischen Usern und Moderatoren bzw. Creators, ohne aufwändiges Hochglanzstudio. Die App positioniert sich damit primär als Verkaufsort und sekundär als Social Media Platfform. Sie schafft eine einzigartige Shopping-Inspiration, ohne auf störende Werbung angewiesen zu sein. Der User wird bewusster Rezipient von Kaufanreizen in einer nahtlosen, inspirierenden und nutzerzentrierten Erfahrung.

Umfassende Produktvielfalt

Keine Einschränkung der Produktauswahl durch unabhängige Stellung auf dem Markt als Zwischenhändler.

Verschmelzung von Produktempfehlung und Kauf

Die Shopping-Inspiration durch Influencer wird direkt mit dem Point of Sale kombiniert zu einer unmittelbare Kaufaufforderung.

Minimalem Ablenkungsfaktor beim Einkaufserlebnis

Werbung wird nicht als störender Faktor wahrgenommen, sondern vom User aktiv aufgesucht.

Reichweite der Live Shows durch duales Format

Live-Shows wirken sowohl im klassischen Teleshopping Long-Form-Content als auch als vertrautes Social-Media-Format und sprechen so unterschiedliche Usergruppe an.

Lebendige Produkterfahrung für informierte Kaufentscheidung

Der Produktkatalog wird durch Clips der Live-Shows belebt, die dem User eine authentische und immersive Eindruck der Produkte bieten.

Feature Scope

Vision für das MVP mit begrenzten Ressourcen

Aus den Insights zu der Konkurrenz und dem Business Plan wurden Fragen nach dem “How might we”-Framework abgeleitet. Es galt zu definieren, welche Probleme SIYU für die User lösen kann. Wegen der sehr begrenzten Zeit wurde ein Minimal Viable Product angestrebt, wobei ein Backlog als Auffangpool für vielversprechende aber entbehrliche Funktionen diente.

Wie können wi den Kaufprozess so flüssig wie mögliche mit dem Live Stream verschmelzen?

Wie können wir einen Mehrwert aus vergangenen Live Streams für den User schaffen, um auch nach dessen Aufnahme das User Engagement aufrechterhalten?

Wie können die Interaktion unter den Usern für eine gemeinsame Shopping Experience fördern?

Wie können wir die klassische Teleshopping Show mit 60+ Minuten mit dem Short Form Content auf Social Media Plattformen verbinden?

Planung von User Flows mit strategischer Zeitverteilung

Die Features für das MVP wurden als User Stories formuliert und in User Flows gruppiert. Je nach Komplexität, Innovationsgrad und Impact auf die UX wurde das Design-Tempo für den Flow angepasst. Simple Flows landeten direkt im High-Fidelity-Prototypen, während zentrale Funktionen wie der Kauf in einer Live-Show mit Wireframes bis zum Usability-Testing ausführlich konzipiert wurden.

Als Viewer möchte ich Produkte aus den Streams direkt in der App kaufen können, um Zeit und Aufwand bei der Bestellung zu sparen.

Als Viewer möchte ich die Aktivität meiner abonnierten Streamer und Produkte auf einem Blick erfassen, um schnell zu dem gewünschten Content zu navigieren.

Als Viewer möchte ich für kommende Live Streams einen Countdown sehen, um den Zeitraum besser einschätzen zu können und den Termin in meinem Stream-Kalender zu speichern.

Als Viewer möchte ich relevante Informationen und vergangene Streams zum Produkt aufrufen können, um die bestmögliche Kaufentscheidung zu treffen.

Als Viewer möchte ich auch alte Streams ansehen, um flexibel in meinem Kauferlebnis zu sein und keine Inhalte zu verpassen.

Als Creator möchte ich direkt Einblicke zu meinen Streams, Followern und Verkaufszahlen meiner beworbenen Produkte sehen können, um meine Aktivität optimal zu bewerten.

Als Viewer möchte ich gezielt nach Streams zu einem Produkt suchen, um eine informierte Kaufentscheidung zu treffen.

Als Viewer möchte ich im Live Chat des Streams Fragen stellen können, um mehr über das Produkt zu erfahren und den Verlauf des Streams aktiv mitzugestalten.

Als Brand Manager möchte ich aussagekräftige Daten zu der Performance meiner Produkte einsehen, um meine Strategie entspr. anzupassen.

Design System

Harmonie zwischen Funktionalität und Branding

Das Design System baut auf einem Corporate Design auf, bestehend aus zwei Font-Faces, dem Logo und der Primärfarbe Neongelb. Die größte Herausforderung bestand darin, eine Balance zwischen Neutralität und Markenpräsenz zu finden.

Besonders in den Commerce fokussierten User Flows steht das Produkt im Mittelpunkt – die SIYU-Marke muss sich zurückhalten. Das Design System besteht dafür aus einer reduzierten dualen Farbpalette und setzt die Brandfarbe auch als Indikator für Interaktionen ein.

Das UI-Design wurden sukzessiv in Figma als responsive, anpassbare Components mit Variants für einen Light- als auch Dark-Mode entwickelt. Ein weiterer Fokus war die optimale Skalierbarkeit des Systems, um sowohl Anforderungen einer App sowie denen einer Website gerecht zu werden. Im gesamten Designprozess wurden die Richtlinien zur Barrierefreiheit gemäß den Web Content Accessibility Guidelines (WCAG) berücksichtigt, sodass bspw. immer mindestens ein AA-Level-Kontrasts erreicht wird.

Prototyping

Genug von Choice Overload – UX der Live-Show

Die Interaktion innerhalb einer Live-Show ist der entscheidende Punkt für die User Experience. Hier wurden viele 'How might we'-Fragen mit der Inspiration von erfolgreichen Elementen des chinesischen Verkaufsmodells, dem schnell getakteten Content auf Social-Media-Plattformen sowie dem Reiz des klassischen Teleshoppings gelöst.

Die ursprüngliche Vision von einer traditionellen Video-Plattform mit einer Übersichtsseite wurde früh verworfen, um eine übermäßige Auswahl und Entscheidungslähmung für den User zu verhindern. Stattdessen gelangt man in der App direkt in eine Live-Show, ähnlich dem klassischen Fernseherlebnis oder dem Endlos-Scrollen auf TikTok. In diesem TV-Mode läuft immer der Content der gefolgten Creator, sowie feste Wiederholungen der Shows – feste Streaming-Zeiten sind kein Hindernis mehr für das Shopping-Erlebnis.

Vor dem Designprozess wurde von den Startup-Gründern eine Ansicht mit Kacheln im Stil von Youtube oder Netflix erwägt. Sie wich der komprimierten Experience der App.

Ein Overlay über dem Live Video ermöglicht dem User entweder sich im Chat auszutauschen oder Produkte dem Warenkorb hinzuzufügen. Nach der Show werden kurze, relevante Clips auf den entsprechenden Produktdetailseiten platziert, um langfristig von der Produktpräsentation zu profitieren.

Design Iteration

UI-Check mit AI Tool

AI-Tools sind eine kostengünstige und skalierbare Möglichkeit die UI ohne aufwendige Tests mit echten Usern zu verbessern. Einige zentrale Screens wurden mit Gazeplots und Heatmaps analysiert, indem die simulierte Augenbewegung eines Users mit der angestrebten visuellen Hierarchie verglichen wird.

Da die Usability der Produktdetail-Ansicht entscheidend für die Conversion-Rate ist, wurde sie mithilfe einer Heatmap verbessert. Zusammengehörige Informationen wie Titel und Preis sind nun visuell gruppiert und ein Overlay fasst nur die wichtigsten beiden CTA-Buttons.

Before

After

Landing Page

Beta Launch mit MVP E-Commerce Website

Vor dem Abschluss der App-Entwicklung wurde ein Beta-Launch mit einer MVP-Website geplant, um bereits wertvolles Feedback der ersten User zu sammeln. Die Features beschränkten sich auf den Live-Stream mit Chat, einen Checkout und einem CTA zum Anwerben von potentiellen Influencern.