Composable UX: Conversion-Rate-Booster & Chance für digitale Barrierefreiheit

Composability verspricht die Lösung für viele Herausforderungen der E-Commerce- und Digitalbranche zu sein. Wer eine MACH-Architektur anstrebt und mit dem Konzept von Composable Commerce erfolgreich sein möchte, braucht allerdings mehr als einen modularen Tech-Stack. In unserer Serie beleuchten Expert*innen die Potenziale und oft übersehenen Hürden von Composable-Commerce-Projekten aus Business-, User- und Technologie-Perspektive.

Teil 1: Vom Buzzword zur Business Strategie
Teil 2: Woran Composable-Commerce-Projekte scheitern 
Teil 3: Quality Assurance für langfristige Composable-Commerce-Erfolge
Teil 4: Composable Architecture x KI: Enabler für Optimierung & Innovation 

In der fünften Ausgabe lesen Sie, wie Designsysteme eine Composable Architecture unterstützen, neue Möglichkeiten für die Gestaltung einzigartiger Kundenerlebnisse schaffen und digitale Barrierefreiheit fördern.

Framework für eine ‚Composable UX‘: Was sind Designsysteme?

Eine Composable Architecture bietet bekannterweise den Vorteil, dass Unternehmen die jeweils besten Komponenten für ihre IT-Infrastruktur zusammenstellen können. So lassen sich digitale Angebote auf einfache Weise für unterschiedliche Anforderungen anpassen und erweitern.

Aus UX-Design-Sicht beschreibt das Konzept von Composability einen ebenso flexiblen Ansatz für die Gestaltung von Webseiten, Apps und Onlineshops. Umgesetzt wird dieser Ansatz durch ein sogenanntes Designsystem: ein Rahmenwerk mit klaren Richtlinien und wiederverwendbaren Komponenten für Gestaltungs- und Entwicklungsprozesse. Die kleineren Einheiten eines Designsystems lassen sich unabhängig voneinander erstellen, testen und austauschen – ganz ähnlich wie es bei einem modularen Tech-Stack mit entkoppelten Funktionen und API-basierten Diensten der Fall ist.

Ein bekanntes Beispiel ist das Atomic Design Framework, bei dem das User Interface (UI) in fünf Bausteine zerlegt wird: 

• Atome: Die kleinsten Bausteine einer Benutzeroberfläche, wie Buttons, Input-Felder oder Icons. Sie haben keine komplexe Funktionalität.
• Moleküle: Kombinationen von Atomen, die bereits einfache Funktionen haben, z. B. ein Suchfeld, das aus einem Input-Feld und einem Button besteht.
• Organismen: Komplexere Gruppen von Molekülen, wie eine Navigationsleiste, die mehrere Moleküle wie Logos und Menüs kombiniert.
• Templates: Layouts, die Organismen zu Seitenstrukturen verbinden und festlegen, wie Komponenten auf der Seite angeordnet werden.
• Seiten (Pages): Fertige Seiten mit echtem Inhalt, die zeigen, wie das Endprodukt aussehen wird, wenn es live geht.

Wie unterstützt ein Designsystem eine Composable Architecture?

Angenommen, ein Unternehmen möchte seine Website überarbeiten. Durch die Verwendung eines Designsystems teilen Experience Designer*innen die Produktseiten, Checkout-Prozesse und Benutzerprofile in kleinere, eigenständige Komponenten auf und können diese ganz nach Bedarf neu zusammenstellen, um verschiedene Designanforderungen und Benutzerpräferenzen zu erfüllen. In Kombination mit modularen Diensten und Funktionen eines Composable Tech-Stacks schafft ein Designsystem somit die flexible Basis für eine nutzerzentrierte, anpassungsfähige Customer Experience (CX).

Zudem verbessert es die Effizienz, Geschwindigkeit und Konsistenz im Designprozess: Durch die Aufteilung in kleinere Bausteine lassen sich Inhalte und Benutzeroberflächen agiler gestalten und unabhängig vom Ausgabekanal verwalten. Ein Produktbild kann beispielsweise in verschiedenen Layouts und Kontexten verwendet werden, ohne dass es mehrfach hochgeladen oder grundlegend verändert werden muss.

Weitere Beispiele für die Anwendung von Designsystemen

• Ein Artikel-Layout eines Blogs kann mit minimalen Anpassungen für eine mobile App oder ein interaktives Display genutzt werden.
• Ein Promotionsbanner auf der Website kann zusätzlich für digitale Werbung verwendet werden, ohne dass das Design komplett neu entwickelt werden muss.
• Ein Slider-Modul zur Anzeige von Bildern, Testimonials oder Produkten kann auf der Startseite, auf einer Produktseite oder in einem Blog-Post eingebettet werden.

Welchen Einfluss hat ein Designsystem auf die Customer Experience?

1) Nutzerzentrierte Erlebnisse

Durch die zusätzliche technische Integration können Experience Designer*innen einzelne Komponenten der Nutzeroberfläche hinzufügen, bearbeiten, aktualisieren oder entfernen, ohne das gesamte User Interface überarbeiten zu müssen. So lassen sich bestehende Designs problemlos für unterschiedliche Nutzergruppen optimieren und Erlebnisse an neue Erwartungen der Kundschaft anpassen.

2) Optimiertes User Interface

Durch den Einsatz benutzerdefinierter Komponenten entstehen einzigartige Frontends, die Webseiten und Shops von denen der Konkurrenz abheben und zu einem einheitlichen Markenauftritt beitragen. Optik, Navigation und Funktionsumfang der gesamten Plattform können gezielter auf die Bedürfnisse der Kundschaft abgestimmt werden. Das trägt zu mehr Engagement, einer höheren Conversion Rate und stärkeren Kundenbindung bei.

3) Nahtlose Customer Journey

In Kombination mit einer Composable Architecture erlaubt ein Designsystem die nahtlose Integration mehrerer unabhängiger Systeme und Dienste. In dieser einheitlichen Einkaufsumgebung müssen Kund*innen nicht mehr zwischen verschiedenen Services wechseln – eine zentrale Voraussetzung für eine konsistente und reibungslose Customer Experience.

4) Individuelle & personalisierte Inhalte

Anpassbare UI-Elemente vereinfachen das Erstellen und Einbinden von individuellem Content. Beispielsweise können ausgehend von den Präferenzen und Verhalten von Kund*innen jeweils passende Inhalte angezeigt werden, etwa Sonderangebote oder auch Ratgeberartikel und How-to-Videos, die zu den gesuchten oder gekauften Produkten passen.

5) Performance & Skalierbarkeit

Durch die Aufteilung in kleinere, unabhängige Einheiten kann ein Designsystem die Leistungsfähigkeit der gesamten E-Commerce-Architektur steigern. Selbst bei zunehmender Komplexität und Größe der Plattform wird bessere Performance, Verfügbarkeit und Stabilität aller Anwendungen erzielt.

Wie fördert Composability digitale Barrierefreiheit?

Die Flexibilität und Composability, die ein Designsystem für Gestaltungs- und Entwicklungsprozesse bietet, bergen auch Potenziale für die Barrierefreiheit digitaler Plattformen – ein Thema, das mit dem bald in Kraft tretenden European Accessibility Act (EAA) besonders aktuell und dringlich ist. Eine entscheidende Rolle für die Umsetzung der neuen Richtlinien spielt der Faktor Zugänglichkeit:

Mit einem Designsystem können digitale Umgebungen so gestaltet und angepasst werden, dass sie für Menschen mit unterschiedlichen Fähigkeiten sichtbar und nutzbar sind. Durch Tastaturbedienbarkeit, Alternativtexte und die Integration zusätzlicher Funktionen wird eine größere Bandbreite an Nutzungsfähigkeiten berücksichtigt. So können weit mehr potenzielle Kund*innen auf die Plattform zugreifen und die digitalen Angebote nutzen.

Auch B2B-Unternehmen können von der Composability eines Designsystems und der mit ihm erzielten Barrierefreiheit profitieren: Bessere Usability minimiert die Nutzungshürden für alle Anwender*innen, steigert die Conversion Rate und wirkt sich positiv auf die SEO-Performance aus.