Vetevo - Shopify Plus Streamlining & Optimierung
Eine Theme Generalüberholungfür Shopify Plus
Scrolle für mehr
01. - ÜBERSICHT
Die Ausgangslage
Das Shopify Theme von Vetevo wurde jahrelang mit Shopify Apps & Page Buildern erweitert. Dies führte zu schlechten Ladezeiten, einem uneinheitlichen Erscheinungsbild und schlechter Wartbarkeit. Durch einen professionellen Umbau des Frontends sollten diese Probleme gelöst werden.
Shop ansehenServices
Web Development, Speed & SEO Optimization
Kunde
Vetevo GmbH
Dauer
Apr. 2021 - Okt. 2021
Beteiligte Mitarbeiter
1 Project Manager, 2 Frontend Engineers
Herausforderung & Ziele
Es mussten zwei Probleme des aktuellen Shopify Theme gelöst werden: Einerseits war das Theme nicht für das Google Web Vitals vorbereitet, was zu schlechteren SEO Werten führt. Andererseits war das optische Erscheinungsbild durch viele Page Builder und Shopify Apps sehr uneinheitlich und wurde den professionellen Produkten und der Vision von Vetevo nicht gerecht.
Herangehensweise
Zunächst unterstützen wir Vetevo bei der Entscheidungsfindung: Soll das aktuelle Theme beibehalten oder ein neues entwickelt werden? Mit technischen Audits erarbeiteten wir einen Vorschlag, wie die aktuellen Anforderungen von Vetevo’s Marketing-, Design- und Tech-Teams auch mit dem aktuellen Theme umgesetzt werden könnten. Der Schlüssel war ein Design System in Shopify.
02. - ROADMAP
In agilen Sprints schnell zum Ziel
In wöchentlichen Meetings synchronisierten sich unsere Entwickler und Designer mit den Marketern und Designern von Vetevo. Zusammen erstellten wir ein Design-System, das die meisten Elemente wie Buttons, Farben und Schriften standardisierten und auf schnelle Ladezeiten auslegten. Anschließend wurde das Design System verwendet, um neue Page Designs im Shop mit A/B Tests zu validieren und schnell umzusetzen.
Design System entwickeln
A/B Tests durchführen
Gewinner implementieren
Performance optimieren
Ein Design System ist ein Rahmenwerk aus wiederverwendbaren Designkomponenten wie z.B. Schriftformatierungen, Buttons, Tabellen etc.. Es hilft Produkt-Teams dabei eine einheitliche Design-Sprache einzuhalten und performante, conversion-starke Elemente in A/B Tests zu validieren und schnell in Code umzusetzen.
03. - UMSETZUNG
Vereinheitlichen,
Ausbauen, Optimieren
01
Flexibles Design System entwickeln
Anhand der bestehenden Elemente im Theme und der Design Vorstellung von Vetevo erarbeiteten wir ein eindeutiges Design System. So wurde das Erstellen neuer Seiten und Layouts durch Einsatz der wiederkehrenden Komponenten einfacher und schneller.
02
Basis für Content schaffen
Durch Anwendung des Design Systems auf die bereits bestehenden Elemente im Theme wurde das Design des Onlineshops vereinheitlicht und der Markenauftritt verbessert. Darüber hinaus haben wir neue Komponenten für dynamischere Inhalte und neue Landingpages geschaffen. Dank Shopifys Stores 2.0 können diese nun auch frei für den Bau von Landingpages verwendet werden.
03
Optimale Lösung finden
Sowohl die bestehnden Elemente, als auch alle neuen Komponenten wurden extensiven A/B Tests ausgesetzt, um die jeweils beste Lösung zu identifizieren. Das half die besten Ideen zu identifizieren und wirkte sich entsprechend positiv auf die Conversion Rate des Shops aus.
04
Performance optimieren
Bei allen Maßnahmen Stand im Fokus, dass auch die technische Performance des Shops weiterentwickelt wurde. Stark verbesserte Ladezeiten und Optimierung nach Google Web Vitals wirken sich nicht nur positiv auf das Kundenerlebnis aus, sondern werden auch von Google durch ein besseres Suchmaschinenranking belohnt.
04. - MARKETING BENEFITS
Ergebnis für Vetevos Marketing Team
Mit den neuen Sections und dem Update des Themes auf Stores 2.0 kann das Marketing Team von Vetevo schnell und unkompliziert Inhalte anpassen, austauschen und komplett neue Landingpages kreieren, ohne dabei auf technische Hilfe angewiesen zu sein. So ist es ein leichtes die technische Infrastruktur für neue Kampagnen zu legen.
Die gesteigerten Leistungsdaten des Shops sorgen zudem dafür, das die Besucher des Shops schnell und reibungslos finden was sie suchen. Dies wirkt sich unmittelbar in einem gesteigerten Return on Advertising spend (ROAS) aus.
06. - TECHNISCHE DATEN
Verbesserte Leistung
Wir haben das Shopify Theme von Vetevo durch zahlreiche kleine Maßnahmen weiterentwickelt. Durch Optimierung in Richtung der Google Web Vitals überzeugt der Shop durch sehr gute Werte in den Bereichen First Input Delay (FID), Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS). So lädt die Webstore Seiten i.d.R. unter 2 Sekunden und es vergehen lediglich 0,1 Sekunden bis Interaktionen durchführbar sind.
Was optimiert wurde
Web Vitals
Theme Liquid
JavaScript
Shopify Apps
Github & DevOps
HTML5/CSS3
06. - ERGEBNIS & AUSBLICK
Ergebnis
Durch die umfassende Überarbeitung des Themes wurden unmittelbare Erfolge in vielen wichtigen Bereichen erzielt. Besonders User Experience, Ladezeiten und SEO Performance verbesserten sich merklich. Zudem verfügt Vetevo nun über eine auf Jahre belastbare Basis für Ihren Online Auftritt und ist wesentlich flexibler in der Umsetzung von Marketing Aktivitäten aller Art.
speed improvements
schneller Ladezeit
Deployments
Mitarbeiter bei Especial
07. - KUNDENMEINUNG
Wir wussten, dass wir erstklassige Experten und Entwickler als Partner benötigen, um unseren Shopify Shop weiter zu entwickeln. In Especial haben eine Agentur gefunden, die nicht nur unsere konkreten Wünsche umgesetzt hat, sondern auch durch darüber hinausgehende Vorschlägen zum unserem Unternehmenserfolg beigetragen haben.
- Dr. Daniel Ringbeck, Head of Product
Erreichte Vetevo im StartUp Marken Ranking von Jung von Matt und landet damit vor Größen wie Flaconi, Flixbus oder Hello Fresh - auch dank des verbesserten Marken-Auftritts online
KONTAKT
Kontakt
Adresse
Especial Digital GmbH
Erkrather Str. 401
40231 Düsseldorf
Germany