Vetevo - Shopify Plus Streamlining & Optimierung

Eine Theme Generalüberholung
für Shopify Plus

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 ansehen

Services

Web Development, Speed & SEO Optimization

Kunde

Vetevo GmbH

Dauer

7 Monate

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.

undefined

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.

01

Design System entwickeln

02

A/B Tests durchführen

03

Gewinner implementieren

04

Performance optimieren

undefined

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.

undefined

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.

undefined

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

undefined

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.

67

speed improvements

2-6x

schneller Ladezeit

50+

Deployments

3

Mitarbeiter bei Especial

undefined

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

KUNDENMEINUNG
Platz
31

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
Erkrather Str. 401
40231 Düsseldorf
Germany

Soziales