Web Vitals
/
Theme Liquid
/
JavaScript
/
Shopify Apps
/
Github & DevOps
/
HTML 5 + CSS3
Vetevo - Shopify Plus Theme Update und Optimierung
Besseres Design & bessere Performance dank Theme Overhaul
Übersicht - Vetevo Webshop
Vetevo beauftragte uns mit der Verbesserung der Frontend-Leistung Ihres Online-Shops. Durch den intensiven Einsatz von Shopify-Apps und Page-Buildern war die Website langsam, unattraktiv und schwer zu warten geworden. Sie brauchten professionelle Hilfe, um diese Probleme zu beheben und die Benutzererfahrung zu verbessern. Hier kamen wir ins Spiel.
Kunde
Vetevo GmbH
Dienstleistungen
Webentwicklung
/
Geschwindigkeits- und SEO-Optimierung
Dauer
7 Monate
Das Team
1 Projektmanager
/
2 Frontend-Entwickler
Herausforderungen und Ziele
Zum Start des Projektes wurden mit zwei großen Problemen konfrontiert: Erstens war das Shopify-Theme von Vetevo nicht auf die Anforderungen der Google Web Vitals vorbereitet, was sich in schlechter Performance und schlechten SEO-Werten ausdrückte. Zweitens wurde das Design des Shops aufgrund der Verwendung von vielen Shopify-Apps und Page Buildern den professionellen Produkten und der Vision von Vetevo nicht gerecht. Die Dinge mussten sich ändern.
Unser Ansatz
In enger Zusammenarbeit mit Vetevo und nach einer ausgiebigen technischen Prüfung entschieden wir, das bestehende Theme zu optimieren, anstatt ein komplett neues zu entwickeln. Durch technische Audits erstellten wir einen Plan, der die Anforderungen des Marketing-, Design- und Technik-Teams berücksichtigte. Schlussendlich entwickelten wir ein komplettes Designsystem mit dem Kunden und implementierten dieses in Shopify.
67
Änderungen zur Verbesserung der Ladezeiten
2-6x
Schnellere Ladezeit im gesamten Shop
50+
Deployments von Features und Updates
3
-köpfiges Especial Team
Roadmap - Effiziente Arbeit in Sprints
Wir führten wöchentliche Meetings durch, in denen unsere Entwickler und Designer eng mit dem Vetevo-Team zusammenarbeiteten. Gemeinsam entwickelten wir ein standardisiertes Designsystem für zentrale Elemente wie Buttons, Farben und Schriftarten, um schnellere Ladezeiten zu erreichen. Dieses System nutzten wir für A/B-Tests, um neue Seitendesigns zu validieren und funktionierende Lösungen zügig im Online-Shop zu implementieren.
Entwicklung eines Designsystems
A/B Testing
Umsetzung
Optimierung
Was ist ein Designsystem?
Ein Designsystem ist ein Rahmenwerk aus wiederverwendbaren Designkomponenten wie Schriftformaten, Buttons und Tabellen. Es hilft Produktteams, eine einheitliche Designsprache zu wahren, leistungsstarke Elemente in A/B-Tests zu validieren und diese effizient im Code umzusetzen.
Ein Designsystem ist ein Rahmenwerk aus wiederverwendbaren Designkomponenten wie Schriftformaten, Buttons und Tabellen. Es hilft Produktteams, eine einheitliche Designsprache zu wahren, leistungsstarke Elemente in A/B-Tests zu validieren und diese effizient im Code umzusetzen.
→ Konzept & UX UI Design - Standardisieren, Entwickeln, Optimieren!
01 Entwicklung eines flexiblen Designsystems
Basierend auf den vorhandenen Designkonzepten von Vetevo entwickelten wir ein klares Designsystem. Unser Ziel war es, Verbesserungen vorzunehmen, ohne das Rad neu zu erfinden. Die Erstellung neuer Seiten und Layouts wurde durch die Nutzung wiederkehrender Komponenten einfacher und schneller.
02 Grundlage für Content schaffen
Durch die geschickte Anwendung des Designsystems auf die bestehenden Elemente des Themes erreichten wir ein deutlich verbessertes Markenimage sowie einen schlanken und standardisierten Online-Shop. Zusätzlich entwickelten wir neue Komponenten für dynamischere Inhalte und Landingpages, die Vetevo integrieren wollte. Dank Shopifys Stores 2.0 können diese nun flexibel beim Erstellen von Landingpages verwendet werden
03 Optimierte Lösungen finden
Durch umfangreiche A/B-Tests identifizierten wir die besten Lösungen für bestehende Elemente und neue Komponenten. Die Umsetzung dieser Ideen hatte einen entsprechend positiven Einfluss auf die Conversionrate des Shops.
04 Performance-Optimierung
Bei der Entwicklung und Verbesserung der technischen Leistung des Online-Shops legten wir besonderen Fokus auf schnellere Ladezeiten und die Optimierung der Google Web Vitals. Dies führte nicht nur zu einer verbesserten Nutzererfahrung, sondern wurde auch von Google mit besseren Suchmaschinen-Rankings belohnt.
→ Marketingvorteile - Ein märchenhaftes Ende für das Marketingteam von Vetevo
Das Marketing-Team von Vetevo kann nach unseren Änderungen schnell und einfach Inhalte ändern sowie neue Landingpages erstellen – und das ohne technische Unterstützung. Dies konnten wir durch die Erstellung neuer Sections und die Aktualisierung des Themes auf Shopify Stores 2.0 ermöglichen. Die verbesserten Ladezeiten des Online-Shops sorgen zudem dafür, dass Besucher schnell und reibungslos finden, wonach sie suchen, was direkt zu einem verbesserten Return on Ad Spend (ROAS) führte.
→ Technische Daten - Verbesserte Leistungen
Durch die zahlreichen kleinen Anpassungen am Shopify-Theme von Vetevo konnten wir Großes erreichen. Durch die Optimierung der Google Web Vitals glänzt der neue Shop mit hervorragenden Werten in den Bereichen First Input Delay (FID), Largest Contentful Paint (LCP) und Cumulative Layout Shift (CLS). Die Seiten des Webshops laden in der Regel in unter 2 Sekunden, und nur 0,1 Sekunden vergehen, bevor Interaktionen durchgeführt werden können.
Bereiche der Optimierung
Ergebnis & Ausblick
Durch unsere umfassende Überarbeitung des Themes wurden in vielen wichtigen Bereichen schnell Erfolge erzielt. Die Nutzererfahrung, Ladezeiten und SEO-Performance haben sich deutlich verbessert. Wir haben Vetevo eine langfristig zuverlässige Basis für Ihre Online-Präsenz geschaffen, die Ihnen eine flexiblere Infrastruktur für all Ihre Marketingziele bietet.
67
Änderungen zur Verbesserung der Ladezeiten
2-6x
Schnellere Ladezeit im gesamten Shop
50+
Deployments von Features und Updates
3
-köpfiges Especial Team
Kundenreferenz -
Erstklassige Experten
„Wir wussten, dass wir erstklassige Experten und Entwickler als Partner benötigen, um unseren Shopify-Shop weiterzuentwickeln. Mit Especial haben wir eine Agentur gefunden, die nicht nur unsere spezifischen Wünsche umgesetzt hat, sondern auch mit ihrer kompetenten Beratung zum Erfolg unseres Unternehmens beigetragen hat.“
- Dr. Daniel Ringbeck, Head of Product
Vetevo belegte den 31. Platz
in Jung von Matt's StartUp Brand Ranking und schlagen damit, dank Ihrer verbesserten Online-Markenpräsenz, große Brands wie Flaconi, Flixbus oder Hello Fresh.
