Shop-Review: Green-pig.de

Lesezeit: ca. 13 min.

Shop-Review: Green-pig.de

Das Shop-Review stellt keine rechtliche Beratung dar.

Inhaltsverzeichnis

1. → Branding & Konzeption
2. → SEO-Analyse
3. → Shop-Aufbau
4. → Content

Der Shop green-pig.de steht mit seinen nachhaltigen Haushaltsprodukten für einen grüneren Alltag. Doch wird dieses Motto auch so an den Kunden getragen?

Branding und Konzeption

Neuen Besuchern eines Onlineshops muss beim ersten Kontakt mit der Seite ersichtlich sein, worum es auf dieser geht.

Im Falle von green-pig.de gelingt dieses schnell und offensichtlich.

Farbkonzept

Noch vor dem ersten Wort springen einem die Grün- und Pinktöne ins Auge, wo zweites wohl eher dem Markennamen dient, bringt ersteres prägnant das Nachhaltigkeitsziel zum Vorschein.

Lediglich die Wahl der Tonwerte dürfte aufgrund des weißen Hintergrunds etwas dunkler ausfallen.

Kommunikation

Schon die Ankündigungsleiste enthält ein wichtiges zu Stichwort des Shops, diese konkrete Wortwahl zieht sich ebenso über die gesamte Startseite hinweg durch.

Mobile Startseite - Quelle: Green-pig.de

Kreative Assets

Das Logo ist entspricht dem gleichen Farbkonzept und funktioniert zudem auch einfarbig, was ein grundlegendes Element der Logo-Gestaltung darlegt. Leider ist es demgegenüber zu verspielt, um auch aus einer etwas entfernteren Bildschirmdistanz klar erkennbar zu sein.

Den Schriftzug neben dem Logo betrifft dieses Problem weniger stark, da hier eine klare Schriftart verwendet wurde, wenn auch diese im Bereich "PIG" zu schmal sein mag.

Zwischenfazit: 7 / 10 Punkte

Das Farbkonzept geht auf, aber ist einige Nuancen zu hell für den weißen Hintergrund. Für die Kommunikation vergeben wir volle Punkte. Beim Logo hingegen müssen wir für die zu filigrane Gestaltung Punktabzug verteilen.

SEO-Analyse

Wichtig, um organisch im Web gefunden zu werden ist eine gute SEO-Strategie, vor allem für Web-Shops. Dabei gibt es verschiedenste SEO-Faktoren, welche es im Groben zu beachten gilt.

Offpage-SEO

Im Offpage-SEO zählen vor allem die Punkte, welche nicht auf der Website selbst bearbeitet werden können.

Backlinks

Einer der wichtigsten Faktoren für gute Rankings sind die Backlinks.

Das Linkprofil von green-pig.de weist jedoch zu wenig dieser externen Verlinkungen auf. Somit ist dessen Erweiterung ein großer, organischer Wachstumshebel.

Domain Authority

Ebenfalls ist es wichtig zu wissen, wie seriös Suchmaschinen eine Website einstufen - spätestens seit dem Google EAT-Update.

Aufgrund der fehlenden Backlinks kann green-pig.de auch hier leider keine zufriedenstellenden Ergebnisse erzielen.

Onpage-SEO

In den Bereich Onpage-SEO fallen alle Faktoren, welche sich technisch auf der Website selbst umändern lassen.

Core Web Vitals (CWVs)

Die CWVs stehen für die technische SEO-Performance einer Seite. Google nutzt diese als KPIs zur Messung von Nutzererlebnissen. Ziel ist eine möglichst schnell ladende Website aufzubauen, ohne Layout-Shifts oder ähnlich negative Indikatoren.

Dabei wird unterschieden zwischen der Performance auf dem Desktop und mobilen Endgeräten. Der Fokus sollte klar auf mobile-first gelegt sein.

Mobile-Performance von green-pig.de

Es ist klar zu erkennen, dass zu viel ungenutztes JavaScript, zu große Bildelemente und iFrame-Inhalte die Ladezeit der Seite negativ beeinflussen.

Eine schlechtere Performance auf Mobilgeräten ist zwar üblich, jedoch sollte auch hier mindestens ein Wert von 60 erreicht werden, um als neuer Shop konkurrenzfähig zu bleiben.

Die negativen Folgen einer langen Ladezeit und blockierenden Elementen..!

Sobald ein neuer Nutzer die Seite entweder über eine Suchmaschine oder direkt durch Werbeanzeigen besucht, wird jede Sekunde entscheiden. Lädt die Website zu lange, springen prozentual mehr Personen ab. Darunter leidet die Performance organischer Suchen und bezahlter Werbeanzeigen.

Desktop-Performance von green-pig.de

In der PC-Version erreicht der Shop einen besseren Total-Score, aber das ist üblich und liegt bei den meisten Websites so vor. Dennoch, auch hier fallen der Speed Index, sowie LCP auf.

Um diese Fehler zu beheben, reicht es teils die Bildelemente neu zu skalieren und als komprimiertes .jpeg hochzuladen.

Andere Probleme hingegen müssen via Code-Eingriff gelöst werden, so zum Beispiel ungenutztes JavaScript. Aber auch andere Faktoren, wie zu viele Apps können die Leistung des eigenen Web-Shops negativ beeinflussen.

Doch keine Sorge, auch Google selbst gibt uns Empfehlungen für bessere CWV-Leistungen.

Mobile-Performance

Desktop-Performance

Das ungenutzte JavaScript haben wir hier noch einmal visuell dargestellt.

Bei der Umsetzung gibt es einige Punkte, welche einfach selbst optimiert werden können, dazu haben wir auch einige Lektionen in unserem SEO-Kurs eingebaut.

Für andere Hürdem - wie bspw. die Optimierung von JavaScript - benötigt es meist eines IT-Profis. An dieser Stelle können wir die Web-Agentur Webchaniker empfehlen.

Seitenstruktur

Da wir nicht alle Seiten des Shops einzeln analysieren werden, nehmen wir die Startseite als Beispiel.

Hier geht es bei der Struktur darum, eine logisch und semantisch korrekt aufgebaute Seite vorzuweisen, welche für Besucher und Crawler gleichermaßen übersichtlich ist.

---

---

Meta-Daten

Der Title-Tag von green-pig.de ist auf der Startseite mit über 120 Zeichen zu lang, empfehlenswert sind Titel mit rund 60 Zeichen.

Eine Meta-Description fehlt vollständig, diese sollte - wenn vorhanden - rund 140 Zeichen lang sein.

Überschriften

Die H1-H4-Überschriften sind semantisch korrekt aufgeführt. Lediglich zwei H6-Überschriften befinden sich oberhalb der H1-Überschrift.

Bilder

Es werden 36 einzelne Bildelemente auf der Startseite verwendet. Diesen 36 Bildern fehlen die Title-Attribute, 15 von ihnen weisen zudem keine Alt-Attribute auf. Für lokales, sowie Image-SEO und die Barrierefreiheit von Websites ist die Verwendung dieser Attribute ratsam.

Zudem werden teils .png-Bilder geladen, wenn möglich sollten diese mit .jpeg- oder .svg-Bildern ausgetauscht werden, um die Ladezeit zu verkürzen. Auch eine korrekte Skalierung der einzelnen Bilder ist stets angebracht.

Analyse

Wir haben einen vollständigen SEO-Audit für die Startseite von green-pig.de angefertigt.

Ansehen: SEO-Audit (PDF, 14 Seiten)

Zwischenfazit: 3 / 10 Punkte

Aufgrund der langen Ladezeiten, fehlenden Meta-Daten, des CWVs-Total-Scores, ungenutzten JavaScripts, Linkprofils und den zu wenig optimierten Bildern müssen wir leider ein relativ negatives Ergebnis von 3 Punkten festhalten.

Shop-Aufbau

Mit am wichtigsten von allen Bewertungskriterien ist der allgemeine Aufbau des Onlineshops. Hierbei analysieren wir die User-Experience, sowie das User-Interface auf Desktop- und Mobilgeräten.

Allgemeines

Unter diesen Abschnitt fallen Kriterien, welche unabhängig von der besuchten Unterseite auftreten.

Ladezeiten

Aufgrund der oben genannten Gründe benötigt der Onlineshop einige Sekunden, um vollständig funktionstüchtig zu sein. Hier empfehlen wir den Verzicht auf überflüssige Pop-ups, .png-Bilder oder iFrame-Einbettungen.

---

---

Mobile Startseite - Quelle: Green-pig.de

Newsletter-Pop-up

Sobald green-pig.de besucht wird, erscheint ein Pop-up, welches zur Eintragung in den Newsletter auffordert.

Hier haben wir direkt mehrere Bemerkungen abzugeben. Leider ist das Formular-Element verrückt und somit UI-unfreundlich.

---

---

Newsletter-Pop-up - Quelle: Green-pig.de

Abgesehen von dem verschobenen Layout innerhalb des Pop-ups verdeckt dieses auch relevante Inhalte beim Laden der Website. Somit kann es sein, dass Personen sich schlecht zurechtfinden und die Seite nach dem Öffnen wieder verlassen.

Für Content-Seiten ist dies ein weniger großes Problem, als bei Seiten mit Transaktionsintentionen. 

Diese haben i.d.R. eine geringere Absprungrate, weshalb eine überflüssige Erhöhung des Wertes negative Auswirkungen auf die organische Sichtbarkeit - und Conversion-Rate - haben kann.

Verschobenes Layout

Beim Aufrufen der Website verschiebt u.a. das Pop-up die Breite der Website, wodurch das Layout verschoben wird.

Mobile Startseite - Quelle: Green-pig.de

Cookie-Banner

Bei dem Aufrufen von green-pig.de wird kein Cookie-Banner (Opt-in) geladen. Das heißt, es wird keine Einwilligung abgefragt - die Cookies werden nicht blockiert, sondern direkt geladen.

Durch das Nicht-anzeigen des Cookie-Banners erhöht sich die Abmahngefahr für den Shop-Betreiber. 

Die dbzgl. relevanten Ressourcen sind zu finden in der aktuellen Fassung der Datenschutzgrundverordung. *

* Keine Rechtsberatung

Ankündigungsleiste (Mobilversion)

In der Mobilansicht der Announcement Bar lenkt diese zusammen mit der ersten Textzeile (siehe oben) viel Aufmerksamkeit von dem eigentlichen CTA-Button ab. Daher empfehlen wir einen klaren CTA innerhalb der Leiste selbst oder eine dezentere Gestaltung.

Header

Die Kopfzeile nimmt auf green-pig.de verhältnismäßig viel Platz ein und verkleiner sich nicht beim Herunterscrollen einer Unterseite. Dadurch geht viel Aufmerksamkeit in diesem Bereich "verloren".

Zudem empfehlen wir den Tel.-CTA anklickbar zu gestalten. Dies geht wie folgt:

<p>Jetzt anrufen:<br>
    <a href="tel:+49123456789">0123 456789</a>
  </p>

Des Weiteren empfehlen wir den Text-Link "Login" aus dem Header zu entfernen, da dieser bereits über das Icon (oben rechts) erreichbar ist. Im Header sollten maxial sieben, besser sechs oder weniger Verlinkungen angezeigt werden.
Der Warenkorb ist dank einer dezenten Border gut im Header ersichtlich.

Footer

In der Fußzeile findet sich das verschobene Formular-Element wieder. Dieses Formular sollte - sofern es global ist - sich jedoch automatisch abändern, sobald das Pop-up-Formular gefixt wird.

Live-Chat

Der Facebook Messenger (unten rechts) öffnet beim Betreten der Seite ein größeres Pop-up-Textfeld, wodurch weitere Aufmerksamkeit an dieser Stelle "verloren" geht. Dies ist vor allem dann relevant, wenn man berücksichtigt, dass wir (u.a. Websites) in "Z"-Richtung lesen. 

Startseite

Auf der Startseite sollte klar erkennbar sein, worum es im Onlineshop geht. Das gelingt green-pig.de unserer Auffassung nach gut. Doch der strukturelle Aufbau bietet an ein paar Stellen noch Verbesserungspotenzial.

CTA-Slider

Die Bildelemente sind gut gewählt, jedoch ist der CTA-Button im Slider leicht zu übersehen. An dieser Stelle raten wir zu einem Box-Shadow als Pattern-Interrupt oder einer zentralen Platzierung.

Auch die Farben des CTA-Buttons können beim Hovern einen höheren Kontrast vertragen. Ansonsten ist es jedoch gut, eine durchgängige Farbauswahl zu verfolgen!

CTA-Slider - Quelle: Green-pig.de

Textelemente

An einigen Stellen, wie bspw. in der Blog-Vorschau empfiehlt es sich den Einleitungstext etwas zu kürzen. Nur wenige Besucher werden sich die Texte vollständig durchlesen. Zudem tragen kürzere Texte zu einer besseren Mobile-User-Experience bei.

Social-Media-Einbettung

Der Post-Feed aus Facebook ist nicht zentriert, da vermutlich zu wenig Beiträge vorhanden sind. Dies wäre dann ein Content-Problem und kann u.a. durch mehr Social-Media-Beiträge gelöst werden.

Einheitliche Formen

Die Blog-Kategorien besitzen einen anderen Border-Radius, als die restlichen HTML-Elemente. Hier entsteht also ein - vermutlich - ungewollter Pattern-Interrupt an einer ungeeigneten Stelle.

Kategorieseite

Dies sind die wichtigsten Seiten im Onlineshop - abgesehen von den Produktseiten. Wieso? Ganz einfach, es sind die Kategorieseiten, welche via SEO in der organischen Suche ranken. Füge hier also relevanten Content hinzu, um diese Seiten für Onpage-SEO aufzubereiten. Weitere Tipps sind in unserem Marketing-Kurs enthalten.
Alternativ kann diese Leistung auch eine Web-Agentur, wie Webchaniker umsetzen.

Produktseite

Die wahrscheinlich wichtigste Seite in einem Onlineshop ist die Produktseite. Hier können sich gerne einmal Fehler einschleichen, auch wenn eigentlich alles gut aussieht.

Wir werden in diesem Review mit dem Produkt "Spülmittel Kitchen - Allergenvernichter Für Küche Und Co." arbeiten.

Produktseite - Quelle: Green-pig.de

Produktname

Der Name eines Produktes sollte so kurz und prägnant, wie möglich sein. Bei einigen Produkt gelingt dies gut, in diesem Beispiel ist jedoch eine empfohlene Länge bis 30 Zeichen übertroffen.

Produkttitel sollten kurz sein, damit sie auch auf dem Handy gut lesbar sind.

Produktbeschreibung

Hier gibt es ein paar wichtige Punkte, die berücksichtigt werden sollten:

• Relevante Fakten zur Leistung
• Nutzerfragen vorwegnehmen (ggf. via FAQ-Sektion)
• USPs (Unique Selling Points) des Produkts vorstellen
• SEO-technisch angepasst
• Einklappbare (Accordion) Informationen, für eine übersichtliche Produktseite auf Mobilgeräten
• Besondere Features durch Pattern-Interrupts hervorheben (bspw. bold oder kursiv)
• Farblich stimmige .SVGs, .JPEGs und .GIFs verwenden, um das Produkt zu erklären

Da jede Produktbeschreibung anders ist, empfehlen wir green-pig.de die jeweilige Produktbeschreibung mit einer solchen Checkliste im Hinterkopf zu erstellen.

Dies ist in einigen Punkten, wie bspw. dem visuellen Hervorheben gut gelungen, .GIF-Dateien lassen sich jedoch nicht vorfinden.

Produktvarianten

Bei dem gewählten Produkt steht die Variante "Wähle eine Option" zur Auswahl, solche Flüchtigkeitsfehler sollten natürlich vor dem Launch behoben werden.

Anordnung der Buttons

Leider sind bei diesem Produkt die Auswahlfelder, sowie der CTA-Button etwas verschoben. 

Produktseite - Quelle: Green-pig.de

Info-Tabs

Es wird gut mit den Tabs für zusätzliche Informationen und weitere Themen umgegangen. Lediglich der schwarze Balken wird bei der Auswahl teils von den anderen Tabs verdeckt. Dies ließe sich durch eine transparente Farbgebung lösen.

Produktbilder

Ein 360°-Produktbild, sowie Anwendungsbilder würden die Bildauswahl aufwerten. Auch ist die Belichtung + der Bildausschnitt teils verbesserungswürdig. Das erste Bild hingegen wirkt hochwertig und stellt das Produkt gut dar.

Produktempfehlungen

Die weiteren Produkte des Stores werden thematisch passend und gut eingebunden. Eventuelle Bundels werden jedoch nicht angeboten.

Gekennzeichnetes Angebot

Bei einigen Produkten wird das Label "Angebot!" doppelt angezeigt.

Produktseite - Quelle: Green-pig.de

Warenkorb(-seite)

Der Warenkorb ist gut erkennbar hervorgehoben und als Einschub eingerichtet. Die angezeigten Daten auf der Warenkorbseite sehen ebenfalls vollständig aus. Jedoch ist das Element, welches weiter zum Check-out leitet auf der Seite leicht verrückt und zu tief angeordnet. Zudem ist es durch den Grauton stark von dem Rest des Warenkorbs abgetrennt.

Warenkorbseite - Quelle: Green-pig.de

Dynamic-Check-out-Button

Erfahrungsgemäß kann ein dynamischer Check-out-Button zu rechtlichen Unklarheiten führen, wenn keine Rechtstexte akzeptiert werden müssen, um fortzufahren. *

* Keine Rechtsberatung.

Auch kann dieser die Conversion-Rate negativ beeinflussen, sollte die Seite durch die iFrame-Einbettung länger laden oder bei dem jeweiligen Anbieter ein Verbindungsfehler auftreten.

Warenkorb-Pop-up

Der Hinweis, wenn etwas in den Warenkorb hinzugefügt wurde, ist noch nicht vollständig farblich angepasst.

---

---

Warenkorbseite - Quelle: Green-pig.de

Check-out-Seite

Der Kauf sollte mit so wenig Aufwand für den Nutzer, wie möglich abgeschlossen werden können. Dazu zählen die Anzahl an benötigten Klicks, die Scroll-Tiefe, sowie unterbewusst auch die UI-Gestaltung. An diesen Stellen besteht noch Verbesserungsbedarf.

Scrolltiefe

Die Eingabemaske für die Rechnungsanschrift ist untereinander aufgelistet. Durch diese Gestaltungsweise entsteht ein ungewollt langes Formular. Eine Multi-Step-Order-Box könnte hier Abhilfe verschaffen.

Check-out-Seite - Quelle: Green-pig.de

Klickanzahl

Durch die Formularart muss der Kunde mehr Klicks, als eigentlich notwendig durchführen. Optional könnte auch eine Autovervollständigung der Adresse den Bestellprozess erleichtern.

UI-Gestaltung & Zahlungsmethoden

Eine andere Art von Bestellformularen haben wir bereits im Abschnitt zur Scrolltiefe vorgestellt, die sogenannten Multi-Step-Order-Box Formulare.
Dieser Typ ist beispielsweise der Shopify-Standard.
In WooCommerce muss dies also "manuell" umgesetzt werden. 

Neben der Formularart wollen wir aber auch auf die allgemeine Gestaltung eingehen. So sind im Bereich der Zahlungsmethoden verschiedene Border-Radien vorhanden. Auch das Padding und die Margin einiger Bereiche ist verhältnismäßig knapp bemessen. Der Datenschutzhinweis ist ebenfalls farblich ungünstig gestaltet. 

Hinzu kommt ein Logikfehler bei der Auswahl zwischen "Direkter Banküberweisung" und "PayPal", so werden unter PayPal auch SEPA-Lastschrift, Klarna und giropay angeboten.

Check-out-Seite - Quelle: Green-pig.de

Zwischenfazit: 6 / 10 Punkte

Es gibt noch einiges an Verbesserungspotenzial, vor allem bzgl. der UI-Gestaltung, jedoch werden wichtige Grundlagen solide und überzeugend umgesetzt. Auch weitere verkaufspsychologisch relevante Elemente sind vorhanden - so bspw. Social Trust.

Bei der Optimierung hilft die Web-Agentur Webchaniker (Kontakt anfragen).

Content

Ein Onlineshop benötigt natürlich auch Unterseiten, welche informationsbasierte Suchintentionen verfolgen. Zudem können Seiten, welche das Team zeigen wahre Wunder bewirken.

Green-pig erfüllt das Ziel, eine persönliche Geschichte und Überzeugung mit dem Shop zu vermitteln. Dennoch gibt es ein paar Punkte, in denen wir noch Wachstumspotenzial sehen.

Blog

Es befinden sich zu wenig Inhalte im Blog. Hier empfiehlt es sich bei kürzeren Beiträgen wöchentlich neuen Content zu veröffentlichen.

Alternativ lässt sich auch auf längere (dafür weniger) Artikel setzen, welche Evergreen-Themen behandeln und regelmäßig aktualisiert werden.

Zudem sollte der Content in verschiedenen Formaten recycelt werden. Für die Planung von Content empfehlen wir die Software MindMeister & MeisterTask.

Mehr zum Thema Content-Planung, -Erstellung und -Marketing lässt sich ebenfalls aus unserem Marketing-Kurs entnehmen. 

Social Media

Die erstellten Beiträge lassen sich einfach in andere Content-Pieces einteilen und via Social Media veröffentlichen. So können Grafiken auf Pinterest, Facebook und Instagram geteilt werden.

Die Beiträge selbst lassen sich wiederum in Videos für YouTube oder Instagram Reels umwandeln und aufnehmen.

Mögliche Themen könnten im Bereich "nachhaltiger Lifestyle" stattfinden.

Über uns

Kunden möchten wissen, bei wem sie kaufen - daher ist eine "Über uns"-Seite stets ratsam. Green-pig.de liefert genau das, ein Gefühl von Persönlichkeit. In diesem Feld überzeugt der Shop mit einer sympathischen About-Seite von der Gründerin - Alexandra.

Zwischenfazit: 5 / 10 Punkte

Der Shop vermittelt mit dem gegebenen Content eine starke, persönliche Note und differenziert sich von anderen Onlineshops aus der Nische.

Allerdings besteht noch Aufholbedarf im Blog und auf Social Media - das Keyword hierfür ist Content-Recycling.

Fazit: 21 / 40 Punkte

Der Shop steht auf einer grundsoliden Basis. Der Bereich SEO ist gleichwohl stark ausbaufähig - vor allem, wenn der Shop auch im Long-term bestehen soll. Im Aufbau konnte der Shop ebenfalls überzeugen, doch benötigt noch ein paar Anpassungen beim UI-Design. Als letztes haben wir den existieren Content geprüft und leider relativ wenig gefunden. Dennoch, die erzählte Geschichte konnte uns überzeugen.

Wir wünschen weiterhin viel Erfolg! ✌

Der Shop wurde analysiert von: Ole N. Mai & Bastian Winkelsen