Wie wir für CSL und Boostboxx durch ein komponentenbasiertes Design-System die Conversion steigerten und das BFSG 2025 erfüllten

Die in die Jahre gekommenen Onlineshops von CSL Computer und der Gaming-Marke Boostboxx wiesen erhebliche Schwächen in der mobilen Conversion und der Barrierefreiheit auf. Durch unsere Entwicklung eines komponentenbasierten, Mobile-First UX-Design-Systems konnten wir zwei optisch völlig unterschiedliche, aber strukturell identische Shops erschaffen, die die Entwicklungsaufwände minimieren und die strengen gesetzlichen Anforderungen des BFSG 2025 erfüllen.

Projektübersicht

• Kunde: CSL Computer & Boostboxx
• Branche: E-Commerce / Hardware & Gaming-PCs
• Plattform: Komponentenbasiertes Design-System (Figma)
• Herausforderung: Veraltetes Design, schwache mobile Conversion, fehlende Barrierefreiheit (BFSG 2025)
• Lösung: Unser duales UX-Design-System, Mobile-First-Strategie, CRO-optimierter PC-Konfigurator
• Ergebnis: 100 % BFSG-konform, drastisch reduzierter Custom-Code, autarke Design-Pflege durch den Kunden

Ausgangssituation und Problem

CSL Computer steht seit 1999 für leistungsstarke Computersysteme und betreibt zwei zielgruppenspezifische Onlineshops: Den Hauptshop CSL Computer für Multimediasysteme und Boostboxx für hochperformante Gaming-PCs.

Das bestehende Design beider Shops entsprach nicht mehr den heutigen E-Commerce-Standards.

Typische Probleme in dieser Ausgangslage, mit denen der Kunde an uns herantrat:

• Ein veraltetes, statisches Design, das nicht für mobile Endgeräte (Smartphones) optimiert war.

• Eine unklare Benutzerführung in komplexen Bereichen (wie dem PC-Konfigurator), die zu Kaufabbrüchen und einer niedrigen Conversion Rate führte.

• Ein akutes rechtliches Risiko: Das Design entsprach nicht den gesetzlichen Barrierefreiheits-Richtlinien des kommenden Barrierefreiheitsstärkungsgesetzes (BFSG 2025).

Zielsetzung des Projekts

Unser Hauptziel war die komplette Neugestaltung des UX-Designs beider Shops, um sie zukunftssicher und gesetzeskonform aufzustellen. Konkret haben wir folgende Punkte fokussiert:

• Multibrand-Effizienz: Die Shops sollten optisch völlig unterschiedlich (Multimedia vs. Gaming), aber strukturell absolut identisch sein.

• Compliance: Vollständige Erfüllung der BFSG 2025 Richtlinien (Barrierefreiheit).

• Mobile Excellence: Konsequenter Mobile-First-Ansatz zur Erfüllung der Google Core Web Vitals.

• Conversion Rate Optimization (CRO): Eine intuitivere Nutzerführung im Checkout und im komplexen Produktkonfigurator.

Lösung und Architektur

Um die gegensätzlichen Anforderungen an zwei Marken bei gleichzeitig effizienter Programmierung zu lösen, entwickelten wir bei digital.manufaktur ein maßgeschneidertes, komponentenbasiertes Design-System.

Anstatt zwei Shops komplett getrennt voneinander zu entwerfen, stellten wir die Entwicklerperspektive in den Mittelpunkt. Unser Team entwarf in Figma wiederverwendbare Design-Komponenten (Buttons, Formularfelder, Produktkarten). Diese Komponenten bilden das strukturelle Fundament für beide Shops. Durch unseren Einsatz sogenannter Design-Token (wie Farben, Typografie, Abstände) kann eine Struktur mit nur einem Klick in das CSL-Design oder das Boostboxx-Design verwandelt werden.

Zusätzlich haben wir die Barrierefreiheit als nativer Bestandteil der UI-Bibliothek integriert: Spezifische Kontraste und klar definierte Focus-States (für die Tastaturnavigation) verankerten wir direkt auf Komponenten-Ebene.

Umsetzung

• Der Produktkonfigurator: Das Herzstück beider Shops haben wir optisch und funktional radikal vereinfacht, um den Nutzern eine übersichtliche Zusammenstellung ihres Wunsch-PCs zu ermöglichen (inkl. intelligenter Ladeanimationen).

• Optimierte Startseite: Wir implementierten eine aufgeräumte Bannerstruktur und das neue Feature „PC nach Budget“, um unentschlossene Nutzer schneller in den Sales-Funnel zu leiten.

• Checkout-Redesign: Den Kassenbereich haben wir komplett überarbeitet. Neben einer klareren Customer Journey integrierten wir smarte Cross-Selling-Optionen nahtlos in den Ablauf.

• Autonomie für den Kunden: Nach Abschluss übergab unser Team die vollständigen, strukturierten Figma-Dateien an CSL. Das Inhouse-Team ist nun in der Lage, unser Design-System völlig eigenständig weiterzuentwickeln.

Ergebnisse und KPIs

Durch unsere strategische Neuausrichtung des UX-Designs verfügt CSL nun über ein hochperformantes Frontend-Fundament, das beide Marken stärkt und rechtlich absichert.

• Gesetzeskonformität: Durch angepasste Kontraste und interaktive Focus-States erfüllen beide Shops die strengen Barrierefreiheits-Vorgaben des BFSG 2025.

• Entwicklungs-Effizienz: Da beide Marken dieselbe von uns geschaffene strukturelle Komponenten-Basis nutzen, wird der Einsatz von Custom-Code auf ein absolutes Minimum reduziert. Das spart CSL massive Entwicklungs- und Wartungskosten.

• Optimierte Nutzerführung: Unsere zielgruppengerechte CRO-Strategie (insbesondere im Konfigurator und Checkout) unterstützt die Conversion-Ziele beider Plattformen klar und messbar.

Learnings und Best Practices

• Ein System, viele Marken (Multibrand-Design): Wer mehrere Zielgruppen (z. B. Gaming und Multimedia) bedient, sollte niemals zwei isolierte Shops designen. Ein von uns zentral angelegtes Komponenten-System spart bei der Programmierung bis zu 50 % der Aufwände.

• Barrierefreiheit ist Conversion-Treiber: Das BFSG 2025 zwingt Händler zum Handeln, doch wir wissen: Barrierefreie Designs (klare Kontraste, große Touch-Flächen, einfache Navigation) verbessern die Usability für alle Nutzer und senken die Absprungrate drastisch.

• Dev-Centric Design: Ein UX-Design ist nur gut, wenn es sich wirtschaftlich programmieren lässt. Wenn unsere Designer und Entwickler von Tag 1 an in Komponenten (statt in statischen Seiten) denken, bleibt der Code für unsere Kunden wartungsfreundlich und zukunftssicher.

Fazit

Unser Projekt für CSL Computer und Boostboxx beweist, dass sich anspruchsvolles Multibrand-E-Commerce, Conversion-Optimierung und Barrierefreiheit nicht ausschließen. Durch unseren intelligenten Einsatz eines komponentenbasierten Design-Systems in Figma haben wir eine Basis geschaffen, die optisch zu 100 % auf die jeweiligen Zielgruppen zugeschnitten ist, technisch aber aus einem Guss stammt. CSL erfüllt damit nicht nur pünktlich die Vorgaben des BFSG 2025, sondern verfügt nun über eine hochgradig skalierbare und wartungsarme UX-Architektur für die Zukunft.