Doppelte mobile Verkäufe in einem Drupal Commerce Store

Bei Droptica haben wir ein neues Design für einen Online-Shop für mobile Geräte für einen der ältesten Verlage in Polen entworfen und implementiert. Wir nutzten Drupal 7 Commerce und führten Suchmaschinenoptimierung durch. Das Ergebnis? Erhöhte Verkaufszahlen!

Verlag

Vor drei Jahren begannen wir, mit dem Wydawnictwo WAM Verlag, einem der ältesten polnischen katholischen Verlage, zusammenzuarbeiten und ihnen unsere Drupal-Entwicklungsdienste anzubieten. Neben Büchern zu religiösen Themen veröffentlichen sie auch wissenschaftliche und populärwissenschaftliche Publikationen, insgesamt rund 150 Titel pro Jahr. Zu ihren Produkten gehören Gebetbücher, Katechismen, akademische Dissertationen, Literatur, Biografien, Bücher für junge Erwachsene und Kochbücher, darunter die berühmten Rezepte von Schwester Anastasia.

„Das bewundernswerteste Werk unserer Zeit“ sagte Papst Pius XI. über das „Apostolat des Gebets“, das die Grundlage des in Krakau ansässigen Wydawnictwo WAM Verlages war. Es wurde 1872 von den Jesuiten gegründet. In der Praxis bedeutet dies, dass WAM 2017 sein 145-jähriges Jubiläum feierte.

Darüber hinaus erhielt der Verlag zahlreiche Auszeichnungen und Ehrungen, darunter den Magellan-Preis, den Feniks-Preis 2014 und viele mehr.
Der Verlag betreibt auch einen Online-Shop und Deon.pl – eine soziale Netzwerk- und Nachrichten-Website.

Beginn der Zusammenarbeit

Wir begannen unsere Zusammenarbeit mit dem Bau von Modulen, um den Einkauf auf ihrer Website zu verbessern. Einige bemerkenswerte Beispiele sind:

• ein Modul, das es Benutzern ermöglicht, gekaufte Produkte als Geschenke zu versenden;
• Auswahl von Abholpunkten;
• Integration von Drupal Commerce mit Freshmail, was es dem Verlag ermöglicht, Newsletter gezielt an Kunden zu senden und Informationen über neue Produkte über E-Mail zu senden.

Mobile Version

Unsere Aufgabe bestand darin, den oben genannten Drupal Commerce Store zu modernisieren. Auf dem Desktop war er schön und angenehm; bei mobilen Geräten sah es jedoch anders aus. Der Store wurde vor einigen Jahren mit Drupal 7 erstellt, als mobiles Einkaufen größtenteils unbekannt war. Die Zeiten haben sich geändert. Kunden erwarten, die Produkte durchstöbern, mehr Informationen über die Produkte erhalten und sie mit jedem mobilen Gerät kaufen zu können.

Da die Standards heute völlig anders sind als bei der Einrichtung des Stores, musste das Grafikdesign und Layout verbessert werden, um das Einkaufen von mobilen Geräten aus bequemer zu gestalten.

Es besteht kein Zweifel, dass der Verkehr und die Einkäufe von mobilen Geräten zunehmen. Gleichzeitig sollten wir bedenken, dass, selbst wenn der Kunde die Bestellung lieber über einen Computer aufgibt (z.B. weil er möglicherweise Daten lieber über eine Standardtastatur eingibt), er sich oft mehr über das Angebot informiert und Produkte auf einem Mobiltelefon oder Tablet durchsucht.

Wir mussten handeln.

Wir begannen mit der Vorbereitung eines neuen grafischen Designs. Unser Grafikdesigner erstellte ein auf mobile Geräte zugeschnittenes Design, das nicht nur gut aussieht, sondern auch die Interaktion mit dem Benutzer verbessert und erleichtert.

Wir entschieden, dass wir nicht nur das Layout ändern, sondern auch geeignete Schriftarten wählen würden, die auf mobilen Geräten besser sichtbar sind, und die Farben ändern. Das Desktop-Design würde unverändert bleiben.

Nach einigen kleinen Änderungen akzeptierte der Kunde das neue Design und unsere Entwickler begannen damit, daran zu arbeiten.

Wir begannen mit der Umstellung von CSS auf den SASS-Preprozessor. Variablen, Mixins und eine klarere Struktur machten die Arbeit an Designänderungen schneller und effizienter.

Gleichzeitig begann unsere QA-Abteilung damit, Tests in Codeception zu erstellen. Eine der Hauptbedingungen war, das Desktop-Layout unverändert zu lassen. Das Testing in Codeception sollte das aktuelle Erscheinungsbild erfassen und über mögliche unerwünschte Änderungen im Laufe der späteren Arbeiten informieren.

Nach den ersten Vorbereitungen begannen wir mit der Layout-Änderung. Unsere Hauptpriorität war der Kaufprozess – die Warenkorb-Seite, die Auswahl der Zahlungsmethoden und der Lieferung. Dann änderten wir die Produktseiten, Informationsseiten und Suchergebnisse.

Gleichzeitig entwickelten wir neue Tests, um sicherzustellen, dass Änderungen im Code keine Änderungen in anderen Store-Bereichen verursachen, die schwer zu erkennen wären.

Es stellte sich heraus, dass nicht nur Änderungen in SASS/CSS, sondern auch zusätzlicher JS-Code erforderlich waren. Zum Beispiel hatte die Website eine Anzahl von Karussells mit Grafiken. Um sicherzustellen, dass sie ordnungsgemäß funktionierten, mussten wir den vorhandenen JavaScript-Code zusätzlich ändern und erweitern. Wir haben zusätzliche Drop-down-Elemente auf Unterseiten in kleineren Auflösungen hinzugefügt und das Menü komplett umgebaut, zusammen mit der Hinzufügung des sogenannten Sticky-Menüs für mobile Geräte.

Vor jeder Implementierung führten wir automatische und manuelle Tests durch, analysierten den gesamten Kaufprozess und überprüften unterwegs das Layout. Wir prüften alles in verschiedenen Umgebungen und Browsern. Wir beseitigten alle Fehler, die auftraten, und stellten sicher, dass das Layout einheitlich war.
Im gesamten Prozess implementierten wir die Ergebnisse unserer Arbeit regelmäßig, durchschnittlich einmal pro Woche.

Zusammenfassung der Änderungen

• Verbessertes Layout für mobile Geräte – jetzt klar, ansprechend für Kunden und erleichtert die Navigation auf der Seite und das Einkaufen.
• Änderungen im Kaufprozess (Formulare wurden an das mobile Layout angepasst), um das Einkaufen zu beschleunigen und die Auswahl von Liefer- und Zahlungsmethoden über Smartphones und Tablets zu erleichtern.
• Fehlerbehebung auf mobilen Bildschirmen.
• Die Website wurde an aktuelle Standards angepasst.
• Einführung automatisierter Tests, um uns bei der Fehlerbehebung zu helfen und die Zeit der Entwickler zu sparen.
• Reduzierte Sitzungsdauer in Verbindung mit gesteigerten Einnahmen für Kunden, die mobile Geräte verwenden. Dies bedeutet, dass Kunden schneller finden, was sie suchen, als zuvor.
• Erhöhung der auf mobilen Geräten getätigten Einkäufe um 200%.

Der Kunde war mit dem neuen Layout sehr zufrieden, aber wir waren am meisten zufrieden mit dem Verkaufsanstieg. Nach einigen Monaten der Messungen stellte sich heraus, dass nicht nur über die Desktop-Version mehr Einkäufe getätigt wurden, sondern die Einkäufe mit mobilen Geräten im Vergleich zum gleichen Zeitraum des Vorjahres sich verdoppelt hatten.

SEO

Nach der Fertigstellung der Arbeiten am mobilen Layout konzentrierten wir unsere Bemühungen auf die SEO (Suchmaschinenoptimierung und Positionierung), um neue Kunden zu gewinnen, den Traffic auf der Website zu erhöhen und neue Informationen über Produkte in den Suchergebnissen hinzuzufügen.

Wir begannen damit, die Website mit der Google Search Console zu verbinden, einem Tool, das es uns ermöglichte, den Traffic auf der Website zu messen, die Leistung zu verbessern und Fehler zu erkennen. Dann implementierten wir Änderungen basierend auf dem SEO-Audit, einschließlich:

• Verbesserung der Überschriften;
• Hinzufügen einer Benachrichtigung für Redakteure, falls die optimale Zeichenzahl im Beschreibungstag überschritten wird – die Informationen in diesem Tag werden als Hinweise bei Suchvorgängen angezeigt;
• Hinzufügen einer Sitemap;
• Hinzufügen von Preis- und Produktverfügbarkeit zu den Google-Suchergebnissen;

Zusätzlich optimierten wir die Größe, die Proportionen und die Qualität der Grafiken auf der Website.

Die Größe der Grafiken und die Ladegeschwindigkeit der Seite sind entscheidend für die Optimierung der Google-Suche. Je schneller die Seite lädt, desto besser ist das Ranking, was wiederum die Wahrscheinlichkeit erhöht, auf einer hohen Position in den Suchergebnissen zu landen.

Kleinere Grafiken führen zu schnelleren Ladezeiten der Seite. Eine schnellere Verbindung ermöglicht es, mehr Kunden zu bedienen. Schnelles Laden der Seite ist auch wichtig für Kunden, die Smartphones und Tablets verwenden, insbesondere wenn ihre Verbindung schwach und langsam ist. Dadurch können mehr Menschen bequem die Seiten durchsuchen und häufiger einkaufen.

Ergebnisse der SEO-Arbeiten

• Änderungen, die zu einer höheren Position in den Suchmaschinenergebnissen führten.
• Erhöhter Traffic von Suchmaschinen (Google und andere). Der Traffic stieg um 50%.
• Indizierung aller Seiten des Wydawnictwo WAM Verlagsbuchhandels. Google und andere Suchmaschinen durchsuchen nun den gesamten Seiteninhalt, indizieren alle Produkte und verbessern die Wettbewerbsfähigkeit des Verlags.
• Hinzufügen von Tools zur Information über den Traffic auf der Website.
• Die Suchergebnisse enthalten zusätzliche Informationen zu Preis und Verfügbarkeit.
• Vereinfachtes Arbeiten für Redakteure (SEO-konforme Informationen) beim Hinzufügen neuer Artikel.

Zusammenfassung

Die Arbeit am neuen mobilen Layout und an SEO-bezogenen Änderungen führte zu einer Reihe von Vorteilen für den Wydawnictwo WAM Verlag. Die wichtigsten davon waren:

• Ein signifikanter Anstieg des Website-Traffics und der Verkäufe in den Monaten nach der Einführung der Änderungen.
• Erhöhung der Desktop-Verkäufe um 50% im Vergleich zum Vorjahr.
• Erhöhung der Einkäufe mit mobilen Geräten um 200% im Vergleich zum Vorjahr.
• 84% mehr neue Nutzer.
• Ein neues Layout, das es Kunden von Smartphones und Tablets erleichtert, zu navigieren und einzukaufen.
• Neues Layout und Grafikdesign für mobile Geräte.
• Schnellere Ladezeiten der Seite.
• Reduzierung der Absprungrate.
• Vollständige DSGVO-Konformität des Stores.
• Verbesserter (vereinfachter und beschleunigter) Kaufprozess – vom Warenkorb bis zur Auswahl der Liefermethode.
• Sicherstellen, dass Google und andere Suchmaschinen alle Inhalte, Produkte und Artikel crawlen.
• Zusätzliche Produktinformationen in den Google-Suchergebnissen.
• Vereinfachtes Arbeiten für Redakteure in der Buchhandlung.
• Einhaltung der aktuellen Standards.
• Einführung automatisierter Tests, die es Entwicklern erleichtern und beschleunigen, in Zukunft für den Verlag zu arbeiten.

Wir setzen unsere Zusammenarbeit mit dem Wydawnictwo WAM Verlag fort. Derzeit arbeiten wir an der Verbesserung der Lagerprozesse.