Projekt A steht exemplarisch für die Verbindung von kreativer Strategie und technischer Präzision. Es zeigt, wie durchdachtes Design und agile Entwicklung zu einem digitalen Produkt führen können, das nicht nur funktioniert, sondern begeistert. In diesem Artikel werfen wir einen detaillierten Blick auf die Entstehung, die Herausforderungen und die Ergebnisse dieses wegweisenden Vorhabens.
Ausgangslage und Zielsetzung
Der Kunde – ein mittelständisches Unternehmen aus dem Bereich nachhaltige Konsumgüter – stand vor der Aufgabe, seine Online-Präsenz grundlegend zu erneuern. Die bisherige Website war technisch veraltet, nicht responsive und bot eine verwirrende Benutzerführung. Die Absprungraten lagen bei über 65 %, und die Conversion-Rate stagnierte trotz hoher Werbeausgaben. Das Ziel war klar: eine moderne, benutzerzentrierte Plattform zu schaffen, die die Markenidentität widerspiegelt und gleichzeitig die Verkaufszahlen steigert.
Wir begannen mit einer umfassenden Analyse der Ist-Situation. Dazu gehörten eine Nutzerbefragung, eine Wettbewerbsanalyse sowie ein technisches Audit der bestehenden Infrastruktur. Dabei zeigte sich, dass die Zielgruppe vor allem Wert auf Nachhaltigkeit, Transparenz und ein einfaches Einkaufserlebnis legt. Aus diesen Erkenntnissen leiteten wir drei Kernziele ab: Steigerung der Nutzerfreundlichkeit, Optimierung der mobilen Darstellung und Integration eines nahtlosen Bestellprozesses.
Konzeption und Designprozess
In der Konzeptionsphase entwickelten wir gemeinsam mit dem Kunden ein detailliertes Pflichtenheft. Dabei setzten wir auf einen partizipativen Ansatz: In mehreren Design-Sprints entstanden Wireframes und interaktive Prototypen, die frühzeitig getestet wurden. Die Herausforderung bestand darin, die umfangreiche Produktpalette (über 200 Artikel) übersichtlich darzustellen, ohne die Ästhetik zu beeinträchtigen.
Das visuelle Design orientierte sich an der Corporate Identity des Unternehmens: natürliche Erdtöne, klare Typografie und viel Weißraum. Besonderen Wert legten wir auf die Darstellung der Nachhaltigkeitsaspekte – jedes Produkt bekam eine eigene „Öko-Karte“ mit Zertifikaten und Herkunftsinformationen. Diese Transparenz wurde von den Testern sehr positiv aufgenommen und steigerte das Vertrauen in die Marke.
Technische Umsetzung und Herausforderungen
Technisch setzten wir auf ein Headless-CMS, um maximale Flexibilität zu gewährleisten. Die Wahl fiel auf Strapi als Backend und Next.js für das Frontend – eine Kombination, die schnelle Ladezeiten (Core Web Vitals) und eine einfache Skalierbarkeit verspricht. Die größte technische Hürde war die Integration des komplexen Filtersystems für die Produktsuche. Der Kunde wollte nach Kategorien, Inhaltsstoffen, Zertifikaten und Preis filtern können – und das in Echtzeit.
Wir lösten dieses Problem durch eine Kombination aus server-side rendering und optimierten Datenbankabfragen. Ein weiterer Knackpunkt war die Migration der Bestandsdaten aus dem alten System. Um Datenverluste zu vermeiden, führten wir mehrere Probeläufe durch und entwickelten ein Mapping-Tool, das die Felder automatisch zuordnete.
„Die Zusammenarbeit war geprägt von Offenheit und Vertrauen. Das Team hat nicht nur geliefert, sondern immer mitgedacht – genau das braucht es für ein Projekt dieser Tragweite.“ – Zitat eines beteiligten Mitarbeiters
Content-Strategie und SEO-Maßnahmen
Parallel zur technischen Entwicklung erarbeiteten wir eine umfassende Content-Strategie. Ziel war es, die Marke als Vordenker im Bereich Nachhaltigkeit zu positionieren. Dazu gehörten ein Blog mit Ratgeberartikeln, ein Glossar zu ökologischen Begriffen sowie Produktbeschreibungen, die nicht nur Fakten nennen, sondern Geschichten erzählen. Jeder Text wurde suchmaschinenoptimiert aufbereitet, ohne an Lesbarkeit einzubüßen.
Wir führten eine Keyword-Recherche durch und identifizierten Long-Tail-Keywords wie „biologisch abbaubare Reinigungsmittel“ oder „plastikfreie Verpackung für unterwegs“. Diese flossen in die Überschriften und Meta-Beschreibungen ein. Um die Sichtbarkeit zusätzlich zu erhöhen, implementierten wir ein internes Verlinkungssystem, das die thematisch verwandten Artikel miteinander verknüpfte. Die Ergebnisse ließen nicht lange auf sich warten: Bereits nach drei Monaten stieg der organische Traffic um 120 %.
Testing und Qualitätssicherung
Bevor die Website live ging, durchlief sie eine intensive Testphase. Wir testeten auf unterschiedlichen Endgeräten (Smartphones, Tablets, Desktop) und Browsern. Neben funktionalen Tests führten wir auch Usability-Tests mit echten Nutzern durch. Dabei kamen Tools wie Hotjar und Lookback zum Einsatz. Die Rückmeldungen flossen direkt in die Optimierung ein – so wurde beispielsweise der Checkout-Prozess von vier auf zwei Schritte verkürzt, was die Abbruchrate um 30 % senkte.
Ein besonderes Augenmerk legten wir auf die Barrierefreiheit. Die Website erfüllt die WCAG-2.1-Richtlinien auf Stufe AA. Dazu gehören Kontrastverhältnisse, Alternativtexte für Bilder und eine vollständige Tastaturnavigation. Diese Maßnahmen erweitern nicht nur die Zielgruppe, sondern verbessern auch die Suchmaschinenbewertung.
Ergebnisse und Lessons Learned
Seit dem Launch im Mai 2023 hat sich Projekt A als voller Erfolg erwiesen. Die Conversion-Rate stieg um 45 %, die durchschnittliche Verweildauer von 1:20 Minuten auf 4:10 Minuten. Besonders erfreulich war der Anstieg der Newsletter-Anmeldungen um 200 % – ein Indikator für das gestiegene Markenvertrauen. Auch die Absprungrate sank auf unter 30 %.
Zu den wichtigsten Erkenntnissen zählt, dass eine enge Zusammenarbeit zwischen Designern, Entwicklern und Content-Teams entscheidend ist. Regelmäßige Abstimmungen und ein gemeinsames Verständnis der Nutzerbedürfnisse verhindern Reibungsverluste. Zudem hat sich der Headless-Ansatz bewährt: Er ermöglicht es, unabhängig von der Frontend-Technologie zu arbeiten und künftige Erweiterungen wie einen PWA-Modus oder eine Sprachversion einfach nachzurüsten.
Ausblick und nächste Schritte
Projekt A ist nicht abgeschlossen, sondern ein fortlaufender Prozess. Geplant sind ein internationaler Rollout (englische und spanische Version) sowie die Integration einer KI-gestützten Produktempfehlung. Auch die Personalisierung der Startseite basierend auf dem Nutzerverhalten steht auf der Roadmap. Der Kunde hat bereits Interesse an einem ähnlichen Relaunch für seine Schwestermarke signalisiert – ein weiterer Beleg für die nachhaltige Wirkung des Projekts.
Für uns bei Kreativsonar war Projekt A ein Leuchtturmprojekt, das gezeigt hat, wie digitale Transformation in der Praxis funktioniert. Erfahrungen aus diesem Projekt fließen in unsere aktuellen Arbeiten ein, etwa in Projekt B und Projekt C, die ähnlich ambitionierte Ziele verfolgen.