Im letzten Artikel haben wir die Vor- und Nachteile einer Headless E-Commerce-Website besprochen. Jetzt ist es an der Zeit, die beiden führenden Headless-Plattformen, Shopify und Swell, miteinander zu vergleichen. Jede dieser Plattformen hat Stärken und Schwächen, aber nur du kannst entscheiden, welche die beste Option für deine E-Commerce-Website ist.

Die E-Commerce-Plattform Shopify ist im Vergleich zu Swell der klare Marktführer. Shopify ist ein Synonym für E-Commerce und ist oft die erste Plattform, die die meisten Leute erwähnen, wenn sie über E-Commerce sprechen. Über 1 Million E-Commerce-Unternehmen nutzen Shopify in über 175 Ländern.

Shopify-Storefronts sind sehr beliebt und werden von Top-Marken wie Pepsi und Staples genutzt. Ein Viertel des Shopify-Umsatzes stammt von Großunternehmen wie Nestle und Unilever. Es liegt auf der Hand, dass Shopify eine großartige E-Commerce-Plattform bietet, die große Unternehmen anzieht.

2. Die Storefront-API bietet eine hervorragende Headless-Integration

Shopify erleichtert die Integration in eine Headless-Site mit seiner GraphQL Storefront API. Entwickler können mit den API-Bibliotheken von Shopify ganz einfach schnelle und einzigartige Kundenerlebnisse schaffen. Wähle aus einer langen Liste von beliebten Frameworks wie:

3. Integrationen und Apps von Drittanbietern

Shopify verfügt über Tausende von Integrationen und Apps von Drittanbietern, mit denen du deine E-Commerce-Website verbessern kannst. Die meisten etablierten Shopify-Besitzer haben eine handvoll Integrationen integriert, während 35 % bis zu 10 Integrationen nutzen.

Nutze Integrationen, um neue Kunden in dein Geschäft zu bringen und deinen Umsatz zu steigern. Verbinde deine Geschäftssysteme und baue das Kundenerlebnis von Anfang bis Ende aus. Mit Integrationen und Anwendungen von Drittanbietern kannst du auf neue digitale Veränderungen eingehen, die Ansprache deiner bestehenden Kunden personalisieren und gezielte Werbeaktionen basierend auf Kundenverhalten durchführen.

Shopify hat einen eigenen App-Store, in dem du nach Tausenden von nützlichen Integrationen suchen kannst. Du kannst für so ziemlich alles eine Integration oder eine Drittanbieter-App finden. Shopify bietet alle Favoriten wie  MailChimp, Printify, Google, und Instafeed, sowie kleinere Nischenintegrationen.

Mit einer Million Shops, die Shopify nutzen, gibt es eine große Community rund um die Plattform.

Die lebendige Community von Shopify macht deine Arbeit als Shopbesitzer viel einfacher. Finde und verbinde dich mit Entwicklern, Marken und Shopbesitzern aus der ganzen Welt. Profitiere vom ständigen Angebot an Shopify-Talenten und bleibe auf dem Laufenden über die neuesten E-Commerce-Trends.

1. Anfänglich fehlte die Unterstützung für Headless

Shopify wurde nicht mit dem Gedanken an einen Headless-Ansatz entwickelt, sondern nachträglich angepasst um die wachsende Nachfrage nach Headless-Optionen zu erfüllen. Das bedeutet, dass Shopify nicht so anpassbar oder flexibel ist wie eine E-Commerce-Plattform, die speziell für die Unterstützung einer Headless-Architektur entwickelt wurde.

2. Extrem begrenzte Optionen und Varianten

Shopify ist nicht für die Aufnahme von vielen Optionen und Varianten für deine Produkte ausgelegt. Du bist auf 3 Optionen und 100 Varianten pro Produkt beschränkt. Das klingt erstmal ausreichend, oder? Ist es in vielen Fällen aber leider nicht. Wenn du anpassbare Produkte in deinem Shop verkaufst, wirst du diese Einschränkung schnell zu spüren bekommen. Schauen wir uns das mal genauer an, damit du besser verstehst, wie limitierend das ist:

Stell dir vor, du verkaufst ein T-Shirt mit drei Optionen:

Wenn du eine weitere Option hinzufügen möchtest, wie Länge, Breite, benutzerdefinierten Text oder was auch immer du dir vorstellen kannst, kommst du nicht weiter. Du musst zuerst eine Option entfernen. 

Stell dir nun die Werte für diese drei Optionen vor:

Farbe: Rot, Blau, Gelb, Grün, Orange, Schwarz, Grau

Stil: Rundhalsausschnitt, Scoop-Ausschnitt, V-Ausschnitt

Die Größe hat vier mögliche Werte, die Farbe sieben und der Stil drei. Multipliziere diese Werte miteinander (3 x 7 x 4), und du bist bereits bei 84 Varianten. Du kannst zu keiner deiner Optionen einen weiteren Wert hinzufügen, ohne die 100-Varianten-Regel zu überschreiten.

In einer E-Commerce-Landschaft, in der Optionen und Größenvielfalt im Vordergrund stehen, stellt dies ein großes Problem dar. Deine Kunden werden sich beschweren, dass du ihre Größe nicht führst oder das Produkt nicht in genügend Farben oder Varianten hast.

Wenn du dich zu einer internationalen Marke mit Kunden auf der ganzen Welt entwickeln willst, brauchst du die richtigen Lokalisierungsfunktionen. Bei Shopify musst du Hürden überwinden, um all deine Produktnamen, Optionsnamen und Variantennamen in die richtige Sprache zu übersetzen, damit sie für internationale Besucher geeignet sind. Du musst eine separate App aus dem Shopify App Store verwenden, da die Übersetzungsfunktionen nicht nativ unterstützt wird.

Das Ziel einer Headless-Plattform ist die Anpassung an die Erwartungen deiner Kunden. Was auch immer du dir ausdenken kannst, du solltest es auch umsetzen können. Shopify ist unzureichend, insbesondere bei der Anpassung des Checkouts.

Du bist auf eine bestimmte Anzahl von Styling-Optionen für deine Checkout-Seiten beschränkt. Wenn du Änderungen vornehmen möchtest, die über diese Optionen hinausgehen, bist du gezwungen, ein Upgrade auf Shopify Plus durchzuführen. Shopify Plus kostet dich zusätzliche $2000 (oder mehr) pro Monat, nur damit du benutzerdefinierte Checkout-Skripte hinzufügen kannst.

Sobald du auf Shopify Plus aufrüstest, kannst du die checkout.scss.liquid-Assets bearbeiten. Aber sollte diese Anpassung nicht einfach in der Standardversion von Shopify enthalten sein?

Die Kunden wollen sehen, was sie kaufen, bevor sie sich zu einem Kauf entschließen. Sie möchten die Produkte aus verschiedenen Blickwinkeln oder, im Falle von Kleidung, an verschiedenen Modellen betrachten. Shopify schränkt die Möglichkeit ein, diese Kundenerwartung zu erfüllen, indem es nur ein Bild pro Variante unterstützt. 

Verkaufst du ein Hemd mit Motiven auf der Vorder- und Rückseite? Dann musst du dich entscheiden, welche Seite des Hemdes du zeigen willst. Verkaufst du eine Uhr mit zahlreichen interessanten Designmerkmalen? Leider kannst du nicht jedes Merkmal zeigen, sondern musst ein einziges Foto auswählen, das diese Variante repräsentiert. 

Ein Bild pro Variante ist eine große Einschränkung für eine E-Commerce-Website, vor allem, wenn du mit Shops konkurrierst, die mehrere Produktbilder pro Variante zeigen.

5. Benutzerdefinierte Attribute sind nicht nativ unterstützt

Wenn du deine Produktbeschreibungen mit benutzerdefinierten Attributen erweitern möchtest, kannst du das bei Shopify nicht standardmäßig tun. Du hast ein Beschreibungsfeld für jedes Produkt, und das war's. Wenn du die Beschreibung an mehreren wichtigen Stellen auf der Produktseite erweitern und mit Bildern kombinieren möchtest, musst du einen Workaround nutzen. 

Du musst ein separates Headless CMS verwenden, wenn du zusätzlichen Text, Bilder oder andere Daten für ein Produkt hinzufügen möchtest. Natürlich kannst du Shopify-Metafelder verwenden, aber das ist eine umständliche Umgehung, die sich zudem nur auf Text beschränkt.

Swell wurde speziell für einen Headless- und API-first-Ansatz entwickelt. Das bedeutet, dass die Swell-Plattform um das Prinzip der Anpassbarkeit und Flexibilität herum aufgebaut wurde. Mit Swell kannst du jede Art von Storefront erstellen, die du dir vorstellen kannst. 

Swell verfolgt bei den Lokalisierungsfunktionen einen nativen Ansatz, der es dir ermöglicht, dein Geschäft problemlos auf alle Regionen der Welt auszuweiten. Alle Aspekte der Übersetzung sind nativ integriert, sodass Währungen, Preisanpassungen und einzelne Felder automatisch übersetzt werden. Außerdem hast du die Möglichkeit, Preisanpassungen für Produkte und Varianten sowie für einzelne Währungen individuell vorzunehmen. Passe die Preise für bestimmte Regionen je nach den aktuellen Markttrends nach oben oder unten an.

Du musst dir keine Sorgen machen, dass deine Produkte zu viele Variationen oder Optionen haben, um auf deiner Website angezeigt zu werden. Mit Swell bist du nicht auf eine bestimmte Anzahl von Varianten oder Optionen beschränkt. Du kannst deinen Kunden problemlos Produkte mit 10, 15 oder sogar 20 Optionen und Tausenden von Varianten anbieten.

Deine Kunden werden von der verbesserten Auswahl an Produkten begeistert sein. Sie können genau die Farbe oder Größe des Produkts auswählen, das sie suchen. Kunden kaufen oft für ein ganz bestimmtes Produkt ein, und wenn sie diese eine Farbe, Muster, Material oder Größe in deinem Geschäft nicht finden können, gehen sie woanders hin. Der Wettbewerbsvorteil von unbegrenzten Produktvariationen und -optionen kann nicht hoch genug eingeschätzt werden.

4. Grundlegende Checkout-Anpassungen + Skripte

Swell bietet alle beliebten grundlegenden Anpassungen für den Checkout, die Kunden erwarten. Passe die Checkout-Seite an das Branding deiner Website an. Füge Express-Checkout-Funktionen und Geschenkoptionen hinzu. Du kannst Skripte einfügen, etwas, das du nicht tun kannst, ohne Shopify Plus zu kaufen.  

Du kannst sogar einen komplett eigenen Checkout erstellen, obwohl dies ein großes Unterfangen ist und in den meisten Fällen nicht zu empfehlen ist.

Du kannst so viele Fotos für deine Produktvarianten einstellen, wie du willst. Mit Swell bist du nicht auf ein einziges Bild pro Variante beschränkt. Wenn du verschiedene Aspekte einer Variante zeigen möchtest, kannst du genau das tun. Deine Kunden werden die verbesserte Produktfotografie zu schätzen wissen.

6. Unbegrenzte benutzerdefinierte Attribute

Hebe deine E-Commerce-Website mit benutzerdefinierten Attributen hervor und verbessere deine typischen Produktbeschreibungen, indem du benutzerdefinierte Produktattribute in Form von Text, Bildern und anderen Medien hinzufügst. Wenn deine Produkte wichtige Verkaufsargumente haben, die du hervorheben möchtest, kannst du das mit den unbegrenzten benutzerdefinierten Attributen von Swell erreichen.

Shop-Besitzer, fühlen sich wahrscheinlich eher mit einer etablierten Marke im E-Commerce-Bereich wohl. Swell ist eine neue E-Commerce-Plattform, und obwohl sie überzeugende Funktionen und außergewöhnliche Anpassungsmöglichkeiten bietet, ist sie noch dabei, sich auf dem Markt zu etablieren. 

Wenn du dich für Swell entscheidest, gehörst du vielleicht zu den ersten Anbietern auf der Plattform. Es gibt viele aufregende Vorteile, aber aus geschäftlicher Sicht kann es auch beängstigend sein.

2. Begrenzte Integrationen und Apps von Drittanbietern

Swell ist noch neu auf dem Markt und die Entwicklung von Integrationen braucht Zeit. Derzeit fehlt es noch an einigen wichtigen Integrationen, die bei Shopify-Besitzern beliebt sind, wie PIM-Systeme und Lieferdienste. Wenn du auf diese Integrationen angewiesen bist und dir deine E-Commerce-Site ohne sie nicht vorstellen kannst, kann dies den Wechsel erschweren. 

Swell verfügt derzeit über 40 Integrationen auf der Plattform und es kommen ständig weitere hinzu. Es ist geplant, einen App-Store einzurichten, aber in der Zwischenzeit konzentriert sich Swell darauf, beliebte Integrationspartner zu gewinnen. Die meisten großen Namen sind bereits dabei, wie PayPal, Apple Pay, Klarna, MailChimp, Stripe und Slack.

Da Swell noch neu auf dem E-Commerce-Markt ist, ist die Community im Vergleich zu der von Shopify klein. Es ist definitiv schwieriger, Partner, Entwickler und Unternehmer zu finden, die derzeit mit Swell vertraut sind. Aber wenn die Plattform wächst, wird auch die Community wachsen. Wer weiß, vielleicht bist du Teil dieses Wachstums, wenn du dich entscheidest, auf die Plattform zu wechseln!

Swell oder Shopify: Auswahl einer Headless E-Commerce-Plattform

Was ist das Urteil? Wie entscheidet man sich für eine headless E-Commerce-Plattform, wenn sowohl Shopify als auch Swell ausgezeichnete Optionen sind? Es kommt darauf an, die Einschränkungen und Bedürfnisse des eigenen Shops zu berücksichtigen. Es gibt keine Einheitsgröße, wenn es um Headless-E-Commerce-Plattformen geht. Nur du weißt, welche Art von Kunden du ansprichst und welche Art von Produkten du verkaufen willst.

Wenn du eine E-Commerce-Website erstellen möchtest, die viele Produktvarianten anbietet und Produkte mit exzellenten Produktfotos, gezielten Produktbeschreibungen und innovativen Produktseiten präsentiert, ist Swell deine beste Wahl. Swell ist auch eine gute Wahl für Shops, die technische Produkte mit vielen Spezifikationen und anderen Informationen verkaufen, die Kunden beim Einkaufen wertvoll finden. Shopify kann nicht mit dem Grad der Anpassung konkurrieren, den Swell für Produktseiten bietet.

Wenn deine E-Commerce-Website jedoch stark von Anwendungen und Integrationen von Drittanbietern abhängt und weniger auf detailliertes Produktmarketing ausgerichtet ist, ist Shopify die beste Empfehlung. Shopify verfügt über Tausende von Integrationen, die einzigartige Möglichkeiten bieten, deinen Shop mit verschiedenen Diensten, sozialen Medien und Plattformen zu verbinden. Manche Produktlinien brauchen einfach nicht all den Schnickschnack und Optionen, die Swell bietet.

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Headless ist eine entkoppelte E-Commerce-Architekturstruktur, die sich als Alternative zur traditionellen monolithischen Architektur entwickelt hat. Bei einer monolithischen Softwarearchitektur befinden sich alle Frontend- und Backend-Ressourcen auf derselben Plattform. Sie ist stabil und einfach einzurichten, aber es ist schwierig, sie anzupassen, zu skalieren oder zu warten, um die Erwartungen des modernen E-Commerce zu erfüllen. 

Headless E-Commerce entkoppelt das Frontend vom Backend, so dass sich diese Systeme nicht gegenseitig beeinflussen:

Backend - Serverseite deiner E-Commerce-Website, Backend Inventarverwaltung, Bestellungen und Kundeninformationen

Frontend - Browserseite deiner E-Commerce-Website, zeigt die Benutzeroberfläche, Bilder und andere Elemente, mit denen deine Kunden interagieren

Frontend-Entwickler und -Designer haben bei der Verwendung einer Headless-Architektur wesentlich mehr Freiraum für ihre Ideen und Entwürfe. Die Frontend-Anwendung ist vollständig vom Backend-Code getrennt und interagiert nur über APIs mit dem Backend. Mit der Headless-Architektur entfällt der frustrierendste Teil der Arbeit eines Frontend-Entwicklers: die Überlegungen zum Backend. Entwickler genießen die Flexibilität, die Headless für den Entwicklungsprozess bietet.

Mit der Headless-Technologie kann dein Unternehmen über alle digitalen Kanäle hinweg die von dir gewünschten Benutzererlebnisse erstellen. Du bist nicht an ein einziges Website-Layout, eine einzige Struktur oder ein einziges Branding gebunden. Die Produktivität wird beschleunigt, und neue Frontend-Funktionen und -Erlebnisse werden (nach der Ersteinrichtung) in kürzeren Zeiträumen bereitgestellt.

Die Headless-Architektur gewinnt in der E-Commerce-Welt zunehmend an Bedeutung, denn die geschäftlichen Vorteile sind kaum zu übersehen:

1. Unbegrenzte Anpassungsmöglichkeiten für Logik und Design

Bei einer Headless-Architektur müssen sich die Entwickler nicht um die Backend-Logik kümmern und auch nicht darum, wie sich Änderungen auf die gesamte Codebasis auswirken. Frontend-Entwickler können jedes beliebige Frontend-Framework verwenden, z. B. React, Vue.js, Angular und andere.

Dein E-Commerce-Unternehmen kann so ganz einfach ein individuelles Benutzererlebnis schaffen, das zu deiner Marke passt. Durch die Sammlung von Kundendaten kannst du einzigartige Erlebnisse für Kunden schaffen, die sie woanders nicht finden.

Wie viele deiner Besucher verwandeln sich in Kunden? Die Verbesserung des Einkaufserlebnisses mit einer personalisierten E-Commerce-Website kann einen großen Unterschied in der Conversionrate ausmachen.

Leider ist die Conversionrate bekanntermaßen schwer zu ermitteln. Die meisten E-Commerce-Websites haben eine Conversionrate von 1,8 bis 6,25 %. Wenn du mehr Umsatz machen willst, musst du eine E-Commerce-Website erstellen, die Besucher lieben, deine Produkte präsentiert und die Käufer davon überzeugt, dass sie deine Produkte brauchen. 

Durch die Umstellung auf Headless kannst du Lebensqualitätsverbesserungen einführen, die den Kunden wirklich gefallen, wie z. B.:

Empfohlene Produkte basierend auf dem Suchverlauf oder den Klicks der Besucher

Diese Funktionen lassen sich mit einer monolithischen Architektur nur schwer einführen, während sie mit der Headless-Technologie ein Kinderspiel sind. E-Commerce-Websites, die bereits auf Headless umgestellt haben, berichten von einer Verbesserung der Konversionsraten um 20 bis 30 %. Das ist ein großer Gewinn für jedes Unternehmen.

Es ist 2022, deine E-Commerce-Website muss schnell sein. Deine Kunden werden nicht warten, bis deine Website geladen ist. 40 % der Verbraucher geben an, dass sie eine Website verlassen, wenn sie länger als 3 Sekunden zum Laden braucht. Es macht also wenig Sinn, neue Funktionen und Layouts hinzuzufügen, wenn die Benutzer sie nie zu Gesicht bekommen, weil sie die Seite wegklicken, bevor sie geladen ist.

Die Nutzer spüren die Verzögerung, wenn eine Reaktion der Benutzeroberfläche mehr als 0,1 Sekunden dauert. Untersuchungen haben ergeben, dass eine Verkürzung der Ladezeit einer Website um 0,1 Sekunden die Conversationrates um bis zu 8 % erhöhen kann. Warum ist Headless also eine bessere Option für eine schnellere Website?

Nun, das liegt an der monolithischen Architektur vieler E-Commerce-Plattformen. Integrationen und Plugins von Drittanbietern sind die einzige Möglichkeit, die Anpassungen und Funktionalitäten zu erhalten, wenn man mit der traditionellen Architektur arbeitet. E-Commerce-Websites fügen nach und nach weitere Integrationen hinzu, und ehe man sich versieht, ist das System ausgebremst. Jedes Mal, wenn eine Seite mit all Ihren Plugins geladen wird, müssen die Anfragen eine Reihe von Schritten und Prüfungen durchlaufen, was zu einem trägen Einkaufserlebnis führt. 

Mit Headless können diese Funktionen und Dienste direkt in die API der Plattform integriert werden. Verlasse die monolithische Architektur und versuche es mit Headless, wenn du eine effiziente Website willst, die ein schnelles Benutzererlebnis bietet.

Es wäre unverantwortlich, einige der Herausforderungen nicht zu erwähnen, die ein Headless-Konzept für E-Commerce-Websites mit sich bringt.

1. Erhöhter Zeitrahmen für die Umsetzung

Der Start mit Headless E-Commerce ist schwieriger als bei herkömmlichen monolithischen E-Commerce-Konzepten. Realistischerweise muss der Prozess durch wichtige Design- und Entwicklungsschritte gehen, damit eine qualitativ hochwertige E-Commerce-Website erstellt werden kann:

UX - Plane die Seitenstruktur und den Inhalt deiner Website in ein paar Workshops mit einer Branding-Agentur, um deinen Kunden eine umfassende Customer Journey zu bieten.

UI - Rechne damit, einige Wochen mit einem Designer zusammenzuarbeiten, um deine Seitendesigns zu realisieren

Entwicklung - Webentwickler erstellen deine individuelle Website von Grund auf. Dieser Schritt dauert am längsten und kann je nach Größe deiner Website einige Monate in Anspruch nehmen.

Alles zusammengenommen kann es 3 bis 6 Monate dauern, eine Headless-E-Commerce-Site von Anfang bis Ende zu implementieren. Herkömmliche E-Commerce-Websites benötigen nur einen Bruchteil der Zeit, bieten aber auch nur einen Bruchteil der Anpassungsfähigkeit und Flexibilität.

Eine Headless-Implementierung kann im Vorfeld teurer sein als eine herkömmliche E-Commerce-Architektur. Es sind Entwickler erforderlich (falls du sie nicht schon hast), um die von deinen Kunden gewünschten und erwarteten Funktionen zu entwickeln. Möglicherweise musst du dich mit UI-Designern und anderen E-Commerce-Experten beraten, um eine intuitive Website mit einem nahtlosen Einkaufserlebnis zu erstellen. 

Aber man sollte nicht wegen der Anfangsinvestitionen auf einer veralteten Plattform bleiben. Die Kostenbelastung ist nach der Einführung deutlich geringer, und der Return on Investment durch neue Kunden und eine höhere Conversionrate kann den Umzug mehr als ausgleichen.

3. Mehrere Technologien im Zusammenspiel = komplizierter

Wenn du ein technisch versierter E-Commerce-Betreiber bist, hast du vielleicht bereits einige Funktionen mit einer monolithischen Architektur entwickelt oder implementiert. Dies ist in vielen Fällen nicht mehr möglich, wenn du zu einer Headless-Lösung wechselst.  

Die Anpassungsfähigkeit von Headless bedeutet, dass mehr Technologien zusammenarbeiten. Wenn du dich nicht gut mit APIs und anderen Entwicklungstools auskennst, musst du die komplizierten Dinge einem Entwickler überlassen.

Welche Headless E-Commerce-Plattform ist die beste?

In unserem nächsten Artikel vergleichen wir die beiden führenden Headless-Plattformen, Shopify und Swell, im direkten Vergleich. Dort erfährst du, welche die beste Option für dein E-Commerce-Unternehmen ist.

Headless E-Commerce

Größte E-Commerce-Website für griechische Produkte, die mehr als 1000 griechische Produkte in 5 verschiedenen Sprachen weltweit verkauft.

Dieses Projekt wird aktiv in Zusammenarbeit mit With Love Internet unterhalten.

Beratung bei technischen Fragen zu integrierten E-Commerce-Diensten

Greek Flavours

Für Siemens ARTIFICIAL INTELLIGENCE @ CORPORATE TECHNOLOGY haben wir eine neue Intranetseite entwickelt. Sie dient der internen Kommunikation von Dienstleistungen und gibt den Bearbeitern der Website die Möglichkeit eigenständig und individuell Inhalte und Strukturen zu ändern.

Die alte Seite von Siemens AI@CT basiert auf einer überholten Web-Architektur, die verschiedene Probleme mit sich bringt:

Kein responsives Verhalten bei unterschiedlichen Screen-Größen

Umständliches Ändern von Website-Inhalten

Gestaltungseinschränkungen durch Technologielimitierungen

Um Trainings, Wissen und Prozesse von Siemens AI@CT intern darzustellen und zu verkaufen soll die aktuelle Seite neu entwickelt werden. Ein neues high-speed Web-Framework soll die Ladezeit der Seite perfektionieren und Editoren der Seite außerdem die Möglichkeit geben Inhalte einfach und schnell einzupflegen und anzupassen. Dafür soll ein indivduell angepasstes CMS in die Seite integriert werden.

Die neue Website haben wir mit dem komponenten-basierten Javascript Framework Gatsby gebaut. Dies ermöglichte uns die Erstellung von Seiten mit schnellstmöglicher Ladezeit. Lange unübersichtliche Seiten konnten dadurch auf mehrere kürzere Unterseiten gesplittet werden.

video-siemens-trimmed.mp4

Um die Corporate Identity von Siemens beizubehalten, haben wir das siemens-interne Design-Theme, in die neue Website integriert. Designelemente und Funktionen, welche mit der alten Technologie nicht umsetzbar waren, haben wir CI gerecht neu überdacht, designed und animiert.

Die neue Statusleiste führt Besucher nun übersichtlich durch die auf der Seite dargestellten Prozesse. Sie zeigt die aktuelle Scrollposition des Users und bietet jetzt, anders als vorher, auch auf mobilen Geräte eine nahtlose Experience.

Maßgeschneidertes Content Management System

Die von uns eingebauten Markdown-Dateien bilden ein individualisiertes und funktionsspezifisches Content Management System. Texte, Bilder, Icons, Seiten und Verlinkungen können damit ganz einfach bearbeitet und hinzugefügt werden. Dazu braucht es keinen technischen Hintergrund und die Funktion der Seite kann nicht ungewollt beeinträchtigt werden.

Inhalte wie z.B diese Texte über ein angebotenes Training (rot markiert) können sehr intuitiv über Markdown-Dateien geändert werden. Textformatierungen, Metadaten und das Einfügen von Komponenten können über einfache Codierungen vorgenommen werden.

Über den „Use Case Explorer“ können Projekte nach mehreren Kriterien intelligent gefiltert und angezeigt werden. Mit einem Klick auf das jeweilige Projekt werden weitere Detailinformationen angezeigt. Die Seite greift dabei auf eine bereits bestehende interne API zurück, in der die Projekte hinterlegt sind.

Siemens AI@CT

Für Biersafe, einen Bierzubehörhersteller aus Deutschland, haben wir einen neuen E-Commerce-Shop konzipiert und entwickelt.

BIERSAFE

Unsere Mission war es, den bestehenden Wordpress-Onlineshop mit modernster Technologie neu zu gestalten und zu entwickeln. Die neue Seite sollte das Einkaufserlebnis verbessern und letztendlich die Conversion steigern.
Zusammen mit Biersafe haben wir uns auf einen lückenlosen Entwicklungsprozess geeinigt. Dieser umfasste mehrere Schritte, die im Folgenden aufgeführt sind

In einer Discovery-Session und einem anschließenden Branding-Workshop haben wir das Biersafe-Team mit seiner Marke konfrontiert. Wir definierten den Kunden, überarbeiteten das Wertversprechen von Biersafe und schufen eine überzeugende visuelle Sprache.
Wir stellten fest, dass die Kunden von Biersafe größtenteils Hausbesitzer mittleren Alters mit einem Garten und einem großen Freundeskreis sind, die sich gerne draußen treffen.
Das Ergebnis war eine Branding-Guideline und eine auf diese Kunden zugeschnittene Seitenstruktur in Form von Wireframes.

Während die Branding-Guidelines und Wireframes die Grundlage für die Customer Journey legten, übersetzten unsere Designer diese in ein High-Fidelity User Interface. Besonderen Wert legten wir dabei auf ein Design, das stark mit der Sprache der zuvor geschaffenen Marke verbunden ist. Mit einer neuen sonnengelben Farbe, die Bier und Sonnenschein repräsentiert, und einer lässigen 70er-Jahre-Schriftart haben wir die visuelle Sprache von Biersafe aufgefrischt.
Das finale Design umfasste eine emotionale User Journey auf der Landing Page, eine funktionale Shop-Seite und informative Team- und Info-Seiten.

Um einen perfekt angepassten und hochperformanten Onlineshop zu erstellen, nutzten wir das Frontend-Framework GatsbyJS und integrierten die E-Commerce-Plattform Shopify. Die im E-Commerce-Bereich noch nicht häufig benutzte statische Seitengenerierung durch Gatsby sorgt für nahezu unmerkbare Ladezeiten. Das verbesserte Nutzererlebnis führt zu niedrigeren Absprungraten und höheren Abschlussraten.
Wir fügten Contentful als Content Mangagement System hinzu, damit Biersafe die Informationsinhalte einfach bearbeiten und neue Versionen der Seite veröffentlichen kann.

Nachfolgend kümmerten wir uns um das Deployment der neuen Seite und sorgten für einen nahtlosen Übergang von der alten zur neuen Seite ohne Ausfallzeiten.
Abschließend veranstalteten wir gemeinsam mit Biersafe einen Übergabe-Workshop, in dem wir erklärten, wie man den Produktkatalog in Shopify verwaltet und Inhalte auf der Seite ändert.
Seit der Übergabe hosten, warten und gewährleisten wir kontinuierlich die Sicherheit der Seite.
Prost!

Wir bauen
deine App

Excyting Lösungen

Excyting Lösungen

E-Commerce Store

Native App

Web App

Custom Website

Neuste Projekte

Greek Flavours

Siemens AI@CT

BIERSAFE

Wir bauen
deine
Produkte

Neuste Blogartikel

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Headless E-Commerce

Kontakt

Wir bauen deine App

Excyting Lösungen

Excyting Lösungen

E-Commerce Store

Native App

Web App

Custom Website

Neuste Projekte

Greek Flavours

Siemens AI@CT

BIERSAFE

Wir bauen deine Produkte

Neuste Blogartikel

Swell vs Shopify - Die beste Headless E-Commerce-Plattform

Headless E-Commerce

Kontakt

Wir bauen
deine App

Wir bauen
deine
Produkte