ThemeIsle Redesign: So ging es und wie viel kostet es

ThemeIsle-Neugestaltung


Ich hasse es, ein Buzzkill zu sein, aber ich bin kein Fan von Redesigns. Ich bin aufgeregt, wenn ich Ihre Website alle paar Jahre ändere und aktualisiere, und ich verstehe, warum so viele Menschen es lieben, sich selbst durchzuhalten, aber das bin einfach nicht ich.

Meine Einstellung war schon immer, dass Design sein muss "gut genug," und dass es etwas ist, das im großen Schema der Dinge keinen großen Unterschied machen wird.

Trotzdem war ThemeIsle zur Abwechslung längst überfällig. Sogar ich konnte sehen, dass die Dinge nicht mehr für 2019 bereit waren. Als die Entscheidung getroffen wurde, die Dinge durcheinander zu bringen, habe ich den Prozess dokumentiert, damit wir aus dem Übergang so viel wie möglich lernen können.

Nun, da die Das neue Design von ThemeIsle wurde eingeführt Lassen Sie uns auf das vorherige Design, die getroffenen Entscheidungen, die für das neue Design gesetzten Ziele und den Ablauf zurückblicken.

Verknüpfungen:

  • �� Gedanken zum alten Design
  • �� Das neue Design kommt herein
  • �� Neue Website-Struktur
  • �� Bessere Zielseiten und Mobilgeräte

Altes ThemeIsle-Design und seine Probleme ��

1. Die Probleme des Designs selbst

Ehrlich gesagt habe ich das ursprüngliche Design von ThemeIsle nie als schlecht angesehen. Ich meine, ich wusste, dass es nicht großartig war (ich habe schließlich Augen), aber ich dachte nicht, dass es ein Problem ist, das unsere Marke beeinflussen oder den Umsatz negativ beeinflussen kann.

Außerdem ist es eine Weile her, dass die Website gestartet wurde, und in den frühen Tagen war das Design ziemlich auf dem Niveau dessen, was es sonst noch gab.

Im Laufe der Jahre haben wir jedoch viele A / B-Tests, andere sogenannte Verbesserungen, verschiedene SEO-Optimierungen usw. durchgeführt. Da es vor allem keinen führenden Design-Benchmark oder keine führende Kontrolle gab, verlor die Website ihre Konsistenz. Zum Beispiel hatten wir diese normale Seite für unser ShopIsle-Thema und diese ziemlich benutzerdefinierte für RokoPhoto:

shopisle vs rokophoto

Letztendlich habe ich erkannt, dass ein ausgefeilteres Design unsere Marke ein wenig stärken und mehr Aufsehen erregen kann, da der Verkauf an Designer ein Bereich ist, in den wir expandieren möchten.

Das war mein Hauptgrund für die Überarbeitung der Website.

2. Die Website-Struktur und das Geschäftsmodell

Dies war eines der Dinge, die mich am meisten störten. Als wir die Website zum ersten Mal starteten und bauten, sollte sie ein Themenclub sein. Wir hatten 10-20 Themen und wollten sie als Paket verkaufen. Ziemliech direkt.

Zu dieser Zeit hatten wir auch ein Support-Forum und nach dem Start der Hauptseite stießen wir auf ein Plugin, das ein neues Zuhause brauchte. Es war ein gutes Geschäft, also haben wir es an Bord gebracht und es auch in das Hauptangebot aufgenommen. Es machte nicht so viel Sinn, es als Teil des Themenpakets dort zu haben, aber es war das Beste, was wir damals für möglich gehalten haben. ��‍♂️

In den letzten fünf Jahren hat sich der Markt verändert und wir haben verstanden, dass wir nicht mehr 20 verschiedene Themen erstellen und pflegen müssen. Es ist auch nicht das, was jemand erwartet. Wir sind in der Ära von "Flaggschiff-Themen" – wo ein Geschäft ein Hauptthema oder nur ein paar davon anbietet und dann zusätzliche Upgrades oder Designpakete.

Wir haben uns entschlossen, ebenfalls einen ähnlichen Weg einzuschlagen und an nur zwei oder drei Themen zu arbeiten. Gleiches gilt für unsere Plugins.

Wir haben auch gelernt, dass einzelne Produktmarken stärker sind und mehr Potenzial haben als "Hauptwebsites," Daher ist es sinnvoller, diese hervorzuheben. Denken Sie das X-Thema gegen Themeco.

Ein weiteres beitragendes Element ist das ThemeIsle Blog. Es ist in den letzten fünf Jahren stark gewachsen und hat es uns ermöglicht, eine Marktposition zu sichern, die wir zu Beginn nicht für möglich gehalten haben.

3. Unsere technische Schuld

Zwei Dinge, über die ich hier sprechen möchte:

a) Geschwindigkeit der Website

Die alte Site hatte viele alte Sachen und Technologien. Wir haben unsere Produkte zunächst direkt über die Website mit unserem handgefertigten System verkauft.

Es gab viele Iterationen der Engine der Site, die zu unzähligen verschiedenen ACF-Feldern führten, die im Laufe der Zeit schwierig zu verwalten waren. Wir haben auch ein Forum betrieben, ein Partnerprogramm gehostet, die Dokumente gehostet und wahrscheinlich eine Reihe anderer Dinge.

Insgesamt war die Struktur nicht sehr effizient, was zu einer recht schlechten Leistung führte.

Nebenbei bemerkt, wir sind seitdem zu FastSpring gewechselt und kümmern uns nicht mehr allein um den Verkauf. Während wir einige der anderen Systeme auf ähnliche Weise loswurden, war vieles noch vorhanden.

b) Einkaufswagenstruktur

Aufgrund der Art des Geschäfts – mit mehreren Produkten und mit einzelnen Marken, die stärker wachsen können als die Marke des Mutterunternehmens – habe ich erkannt, dass es an der Zeit ist, den tatsächlichen technischen Aufbau der Dinge aufzuteilen.

Insbesondere ist es besser, Kundendaten vom Front-End-Teil zu trennen (die Themenlisten sowie die Autoren und deren Inhalte sowie alle Marketingbemühungen). Auf diese Weise wird die Geschwindigkeit der Front-Site nicht durch Plugins wie EDD oder andere Vorgänge im Hintergrund beeinflusst, die das Geschäft zum Laufen bringen.

Das Marketingteam würde auch mehr Kontrolle über die Website erhalten, und wir könnten separate Websites / Marken für die Produkte einrichten und gleichzeitig einen einheitlichen Kundenbereich auf store.themeisle.com beibehalten.

4. Landing Pages und Mobile

Als wir die ursprüngliche Website starteten, war Mobile nicht wirklich eine Sache. Speziell in unserer Nische, in der kaum jemand Themen kaufte, während er telefonierte. Selbst jetzt haben wir noch sehr wenige Mobilfunkkunden.

Mobilgeräte haben jedoch an Bedeutung gewonnen, und der Trend dürfte sich fortsetzen. Immerhin verwendet Google jetzt seinen mobilen Crawler über den Desktop.

Kurz gesagt, wir haben uns entschlossen, benutzerdefinierte Zielseiten für unsere Top-Produkte zu erstellen und daran zu arbeiten, die Conversions zu verbessern. Mobile ist hier von entscheidender Bedeutung, da wir uns zum Ziel gesetzt haben, die Seiten nicht nur mobilfreundlich, sondern auch mit AMP kompatibel zu machen.

Es kommt das neue ThemeIsle-Design ��

Okay, mit dem Bühnenbild und meiner Begründung wollen wir nun sehen, wie sich alles abgespielt hat.

1. Design und Ästhetik

Das können Sie selbst beurteilen, aber für mich war das ein absoluter Erfolg!

Hier ist das alte Design:

ThemeIsle altes Design

Und hier ist der Neue:

ThemeIsle neues Design

Die Website sieht für das Auge viel konsistenter und angenehmer aus. John Fraskos von AnalogWP gestaltete das Design. João Santos, der normalerweise für uns an Comics arbeitet, hat einige benutzerdefinierte Illustrationen erstellt. Und schlussendlich, Catalin Vasile, Der ursprüngliche ThemeIsle-Designer arbeitete am neuen Logo.

Allein dieser Teil kostete wahrscheinlich zwischen 10.000 und 15.000 US-Dollar. Obwohl das Design selbst fast unmöglich ist, den ROI zu verfolgen, glaube ich, dass sich die Investition lohnt. Angesichts der Tatsache, dass wir fünf Jahre gebraucht haben, um die Website neu zu gestalten, machen die Kosten nur weniger als 0,5% des Umsatzes aus. Wenn dies also zu einem Aufwärtstrend führt, lohnt sich das Projekt leicht!

2. Neue Website-Struktur

Die Einführung einer neuen Struktur hat die Komplexität etwas erhöht, aber auch dazu geführt, dass der Verkehr zu unseren Top-Produkten gestiegen ist, was immer gut ist. Auf der anderen Seite ist der Verkehr zu unseren Themenkategorien gesunken. Aber das ist OK.

Die Hauptsache hier ist, dass ThemeIsle nicht a sein soll "Themen platzieren," aber bekannt sein als die "Schöpfer von Neve und Hestia."

Um dies zu erreichen, haben wir uns entschlossen, diese Produkte auf der Homepage, der Themenseite, zu veröffentlichen und die allgemeine Preisseite vollständig zu entfernen (dies ergab keinen Sinn). Wir haben uns auch vorgenommen, individuelle Logos für Produkte und dann originale Zielseiten für die Top-Produkte (mit eigenem Branding und allem) zu erstellen. Außerdem haben wir hier und da einige Verbesserungen vorgenommen, um die einzelnen Marken hervorzuheben.

Hestia vorher und nachher

3. Technische Schulden gelöst

Wieder zwei Dinge:

a) Geschwindigkeit der Website

Unsere Ladezeiten sind jetzt 50% schneller. Dabei sind wir jedoch in Schwierigkeiten geraten.

Um uns zu zwingen, sowohl unsere eigenen Produkte als auch den neuen Blockeditor (mit dem unser Entwickler nicht vertraut war) zu verwenden, haben wir die Erfahrung beim Erstellen von Websites völlig durcheinander gebracht.

Gutenberg ist noch nicht da oder zumindest hilft es nicht, wie wir es benutzt haben. Es ist immer noch nicht die beste Wahl für Zielseiten. Wenn Sie Geschwindigkeit wünschen, sollten Sie sich besser auf etwas wie ACF mit handgefertigten Strukturen verlassen. Wenn Sie vor allem Flexibilität bevorzugen, können Sie sich für Beaver Builder oder Elementor entscheiden, wie wir es für die Homepage getan haben.

Wenn es darum geht, Websites mit Blick auf die Leistung zu erstellen, ist die Aufgabe immer noch nicht einfach. Sie können sich nicht wirklich auf Plugins verlassen, um alle Probleme für Sie zu lösen, und Sie müssen viel selbst tun. Hier ein Kommentar von Cosmin Serbanescu, dem Hauptentwickler des Redesign-Projekts:

cosmin

Es war eine wahre Freude, an der Neugestaltung der ThemeIsle-Website zu arbeiten, und es ist definitiv eines der komplexesten und herausforderndsten Projekte, an denen ich je gearbeitet habe.

Der wahrscheinlich schwierigste Teil war, dass ich aufgrund des geschwindigkeitsorientierten Ansatzes, den wir von Anfang an hatten, mindestens zweimal überlegen musste, bevor ich eine Funktion oder einen Website-Bereich implementierte, ohne Plugins von Drittanbietern oder unnötige Bibliotheken und den Code so sauber wie möglich zu halten möglich.

b) Neue Warenkorbstruktur

Dieser Teil verlief ziemlich reibungslos, da wir jetzt alles auf store.themeisle.com eingerichtet haben.

Natürlich hatten wir, wie bei diesen Dingen üblich, am Starttag einige Probleme, aber wir haben es gerade noch rechtzeitig herausgefunden.

In diesem Setup werden, wie bereits erwähnt, alle Kunden- / Benutzerdaten in einer separaten Instanz vom Front-End gespeichert, die die Themenlisten, Blogs und Marketing-Seiten enthält.

4. Bessere Landing Pages und Mobile

Im Rahmen des Redesigns haben wir neue Landing Pages für alle unsere Schlüsselprodukte wie erstellt Firn, Hestia, ShopIsle, Zelle, Feedzy, Visualizer, und WP Produktbewertung.

Von allen scheint die Landing Page für Hestia – auf der wir den größten Teil unserer Anstrengungen unternommen haben – die besten Ergebnisse zu erzielen. Derzeit werden ~ 10% bessere Conversion-Raten erzielt. Wir sehen uns derzeit Daten im Wert von rund einem Monat an, was mich optimistisch macht.

Hestia neu

Insgesamt scheinen wir für die gesamte Website Umsatzverluste zu verzeichnen. Es gab jedoch so viele Änderungen, einschließlich der Beseitigung von mehr als 10 Produkten (die alle einen geringen Umsatzanteil hatten), dass es schwierig ist, dem Design selbst etwas zuzuschreiben.

Dies bezieht sich auf ein weiteres Ziel, das ich mir für dieses Jahr gesetzt habe. Selbst wenn wir nur 90% des Umsatzes vor Änderungen behalten und gleichzeitig ein um 50% einfacheres Geschäft führen können, wird es sich lohnen. Mit einfacherem Geschäft meine ich weniger Produkte, was weniger zu verwaltende Seiten, weniger zu dokumentierende und zu unterstützende Dinge und damit mehr Zeit für die Verbesserung der vorhandenen Produkte bedeutet.

Die Optimierung der neuen Website für Handys verlief insgesamt großartig, aber nicht zu 100% problemlos. Die Wahl von Gutenberg als Grundlage für die Erstellung der neuen Seiten war nicht einfach und hat unsere mobile Leistung am Ende nicht wesentlich gesteigert.

Wir haben es nicht geschafft, die Implementierung für Produkt-Landing-Pages unter die 50-KB-Marke zu bringen, daher konnten wir sie nicht in AMP bereitstellen (es gibt eine Einschränkung, wie groß das CSS für AMP sein kann). Wir haben jedoch AMP auf Kategorieseiten.

Insgesamt war es schwierig sicherzustellen, dass das Design mit Gutenberg, Elementor und anderen Bauherren zusammenarbeitet. Es geht nicht nur darum, sicherzustellen, dass diese Builder ihre Struktur ausgeben können, sondern auch darum, dass das Ergebnis auf dem Bildschirm Ihren Erwartungen entspricht. Schließlich möchten wir die Seiten später ändern können und keine Änderungen auf Codeebene vornehmen müssen, um dies zu ermöglichen. Deshalb muss das Design mit Bauherren zusammenarbeiten.

Der Hauptdesigner John Fraskos hat zu dieser Herausforderung Folgendes gesagt:

Fraskos

Die größte Herausforderung bestand darin, ein konsistentes, skalierbares Design zu erstellen "Baumeister-Agnostiker" da Teile des Projekts mit verschiedenen Layout Builder-Technologien ausgeführt werden. Es ist uns gelungen, eine visuelle Basissprache für alle Komponenten einzugrenzen und beizubehalten, die sich mit jedem Layout-Builder leicht replizieren lässt und uns eine zukunftssichere Sicherheit bietet.

Die Seiten sind jetzt auf Mobilgeräten viel einfacher zu navigieren, und dies ist kein Zufall. Wir haben große Anstrengungen unternommen, um das mobile Erlebnis zu gestalten und darüber nachzudenken, was für mobile Besucher im Vergleich zu Desktop-Besuchern wichtig ist. Schauen Sie sich einige unserer Produktseiten auf Mobilgeräten und Desktops an und sehen Sie, was anders ist (dieses, zum Beispiel).

Die gesamte Implementierung sowie die Marketingarbeiten für Kopien und Texte, Zielseiten und andere Kampagnen dauerten einige Zeit. 1.500 Arbeitsstunden, um genau zu sein. Wir haben es uns zum Ziel gesetzt, eine ernsthafte Zeiterfassung durchzuführen und eine Bestandsaufnahme aller für das Projekt aufgewendeten Minuten vorzunehmen.

Wenn Sie es mit dem Stundensatz multiplizieren, den Sie berechnen möchten, liegt dieser Wert wahrscheinlich zwischen 50.000 und 100.000 US-Dollar. Mit anderen Worten, wenn wir eine ähnliche Site für einen Dritten erstellen wollten, müssten wir mehr als 100.000 US-Dollar in Rechnung stellen, um sie rentabel zu machen.

Die größte Herausforderung für uns insgesamt war die Tatsache, dass dies ein einmaliges, einzigartiges Projekt war. Ich meine, dass wir normalerweise keine E-Commerce-Websites erstellen, daher verfügen wir nicht über die erforderlichen Prozesse, und das Team und seine Fähigkeiten sind nicht für Projekte zum Erstellen von Websites strukturiert.

Wir hatten Mühe, unsere Arbeit zu organisieren, und wussten nicht, wie wir alles führen oder strukturieren sollten. Wir hatten auch kein engagiertes Team (wir haben es immer noch nicht), das alle nach vorne gerichteten Projekte und Standorte abwickeln würde. Das Erstellen von Themen und Plugins für Benutzer ist etwas ganz anderes. Dank John Fraskos, der uns auf den richtigen Weg gebracht hat, haben wir uns letztendlich für Sketch for UI Design, Invision for Design Collaboration und Feedback und Slack für alltägliche Diskussionen entschieden. Und wir haben viele Iterationen durchlaufen, sodass jedes dieser Tools auf jeden Fall benötigt wurde.

Design-Iterationen

Die Hauptfrage wäre also wahrscheinlich; halte ich das Projekt für einen Erfolg??

Es hängt davon ab, ob.

Wir sehen keine kurzfristigen Umsatzsteigerungen aufgrund der Neugestaltung. Wir haben immer noch Probleme mit der Bearbeitung und der Optimierung der Website. Das Projekt hätte auch reibungsloser verlaufen können. Letztendlich sehe ich jedoch immer noch keine bessere Investition, die uns auf langfristige Ergebnisse einstellen würde.

Das nächste Jahr wird zeigen, ob das Projekt erfolgreich ist oder nicht. Ich bin gespannt, wie sich die Dinge entwickeln.

Auch zusammen mit dem Neve Pro startet und unser WCEU-Sponsoring markiert für uns den Beginn einer neuen Ära. Eine Ära des Versuchs, ein etablierteres Unternehmen zu werden, statt nur eines Geschäfts mit einigen Themen.

Ich war auch nicht der einzige, der die Show hier leitete. Es war eine gute Teamleistung und eine wesentliche Änderung unserer Geschäftsrichtung – näher an den Kunden heranzukommen und mehr auf seine Bedürfnisse einzugehen, indem wir uns auf weniger Produkte mit höherer Qualität konzentrieren.

Nochmals vielen Dank an alle, die an dieser Neugestaltung teilgenommen haben!

Vergessen Sie nicht, auszuchecken die neue ThemeIsle!

Vergessen Sie nicht, an unserem Crashkurs teilzunehmen, um Ihre WordPress-Site zu beschleunigen. Mit einigen einfachen Korrekturen können Sie Ihre Ladezeit sogar um 50-80% reduzieren:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map