UNREQUESTED CONSULTING – DER WEBAUFTRITT DER MORGA AG IM EXPERT REVIEW
Mit Hilfe von Expert Reviews biete ich E-Commerce- und Omnichannelhändlern die Möglichkeit, ihre Onlinepräsenz auf Herz und Nieren zu prüfen und Stolpersteine und Optimierungspotentiale zu identifizieren. Und das als der Sicht Ihrer Kunden. Unabhängig und mit langjähriger Expertise. Um die Funktionsweise und Inhalte eines Expert Review greifbarer zu machen, wird in Form eines «Unrequested Consultings» – also einer Analyse ohne direkten Auftrag des Shopbetreibers – im Folgenden die Onlinepräsenz der Schweizer Morga AG untersucht. Analyse und Empfehlungen werden dabei jedoch stark vereinfacht und in komprimierter, narrativer Form dargestellt, um die dahinterliegende Systematik zu veranschaulichen.
MORGA – LEBENSMITTELEXPERTISE SEIT 1930
Die Wurzeln der heutigen, in dritter Generation geführten Morga AG gehen bereits auf das Jahr 1930 zurück. Damals entschloss sich Ernst Liebherr, der Grossvater des heutigen Geschäftsführers, nach einem 20-jährigen Aufenthalt in Indien, die dortigen Ernährungsgewohnheiten und bis dato in der Schweiz unbekannten Produkte auch den heimischen Konsumenten zugänglich zu machen. Über mehrere Dekaden hat sich Morga so zum Produzenten und Händler von vegetarischen und Bio-Lebensmitteln aller Art etabliert und sich im Markt erfolgreich behauptet. Zudem ist Morga ebenfalls als Lohnfertigungsunternehmen für Dritte aktiv. Heute umfasst das Sortiment über 1’500 Artikel , die hauptsächlich in Bio-Qualität hergestellt werden.
Der Vertrieb der Produkte erfolgt über die klassischen Wege des Detailhandels / LEH, sowie über einen B2B- und einen B2C-Shop, mit dem Endkunden direkt aus derzeit rund 1’000 Artikeln (Stand der Analyse: November 2021) wählen und sich diese nach Hause liefern lassen können. Des Weiteren besteht die Möglichkeit, diese auch persönlich im Morga Fabrikladen einzukaufen.
DIE STARTSEITE – EINFALLSTOR INS DIGITALE MORGA-UNIVERSUM
Über https://www.morga.ch/ betritt der Kunde die Pforte ins digitale Morga-Universum. Bild-Sujets und Farbwahl (in den CI-Farben grün und rot des Logos) sollen implizit auf die Stärken von Morga – Bio und qualitativ hochwertige Zutaten hinweisen. Weitere Farben, insbesondere für Schriften und Hintergründe, sind in verschiedenen Anthrazit- und Sand-Tönen gehalten. Gerade in Kombination mit kleineren und schmäleren Schrift-Typen wirken dadurch die Schriften je nach Hintergrund schnell unleserlich.
Der Web-Auftritt verwendet einen so genannten «Boxed-Style» mit vorgegebenen Containern, in denen verschiedene Inhalte auf der Startseite ausgespielt werden, vom Produksortiment, der Firmengeschichte bis hin zu Rezepten und aktuellen Produkten.
Verwendete CTAs (Call-to-Action-Buttons) sind für den Kunden anschaulich und nachvollziehbar beschrieben (z.B. mit «Entdecken Sie unsere Produkte»). Beim Darüber-«Hoovern» wechseln diese die Farbe, je nach verwendeter Grundfarbe zu grün nach rot oder umgekehrt. Die Anlehnung an die Unternehmens-CI-Farben ist zwar sinnvoll, wirkt aber im Wechsel von grün zu rot äusserst aggressiv. Insbesondere, da Kunden oftmals mit Rot «Gefahr» oder «Stop» verbinden, was allenfalls vom Klicken auf den Button oder den Inhalt eines Containers abhalten kann. Und damit allenfalls unnötig die Conversion hemmt.
Ebenfalls aus Nutzersicht ungewohnt ist das sowohl auf dem Desktop als auch auf der mobilen Ansicht vorfindbare Dreieck mit einem Plus in der rechten Ecke des Viewports im Headerbereich. Nach Klicken auf den ebenfalls farblich wechselnden CTA öffnet sich ein statisches Overlay, das noch einmal zusammenfassend Infos zum Unternehmen, dem Shop-Login sowie den Kontaktdaten gibt. Aus Nutzersicht ist dies jedoch ein eher ungewohnter Ort für solche Informationen und muss eher in der Funktionsweise erlernt werden. Hier wäre es einmal spannend, mit so genannten einfach zu installierenden Heatmapping-Tools von Hotjar oder Contentsquare einmal zu analysieren, wie oft dieser Button wirklich geklickt wird. Oder ob es nicht allenfalls Sinn macht, diesen zu eliminieren. Ebenfalls speziell ist, dass der Nutzer diesen auch manuell wieder einklappen muss, um auf die volle Grösse des Viewports zurückzugelangen.
Die Startseite von Morga auf den Viewports Desktop und Mobile (Quelle: https://www.morga.ch)
Der Header-Bereich ist bei Morga fix auf der Seite verankert (sog. «fixed Header»), das Logo befindet sich entsprechend aktuellen UX Empfehlungen auf der linken Seite. Ein Klick aufs Logo führt zurück zur Startseite. Zudem wird diese Funktion durch den Menüpunkt «Willkommen» im Header gespiegelt. Auch hier stellt ich die Frage, ob dieser zusätzliche Backlink benötigt wird, oder allenfalls nur auf der Mobile-Version Sinn macht.
Positiv zu erwähnen ist die im Header verbaute Sprachwahl – Nutzer können den Onlineauftritt von Morga in Deutsch, Französisch sowie Englisch besuchen. Italienisch als dritte Landessprache der Schweiz ist nicht präsent. Dies kann jedoch je nach Marktbearbeitung und einer allenfalls zu kleinen Zielgruppe durchaus bewusst und sinnvoll sein.
Die ebenfalls im Header verbaute Suchfunktion mit Hilfe eines Lupen-Icons geht im Gesamtkontext etwas unter. Hier wäre eine lang gezogenes Eingabefeld, wie man es von bspw. Amazon kennt, wünschenswert. Klickt man auf dieses Such-Icon, öffnet sich ein überdimensionales halbtransparentes Overlay, in dem der Nutzer seinen Suchbegriff eingeben kann. Funktional ist dieses recht einfach gehalten und verwirrenderweise die Anweisung, was der Nutzer tun soll, auf Englisch. Allenfalls kann dies dem wohl in die Jahre gekommenen Shopsystem geschuldet sein, bei dem sich keine – oder nur mit grosser Mühe – Anpassungen am Standard vornehmen lassen.
Die Suchergebnisseite macht aus UX-Sicht bedauerlicherweise einen eher unaufgeräumten Eindruck. Auch durch den Boxed-Style kommt die Seite gefühlt asymmetrisch daher.
Sucheingabe und Suchergebnisseite bei Morga (Quelle: https://www.morga.ch)
Ebenfalls aus heutiger Sicht wirkt die im Header angewendete Menüstruktur eher organisch über die Zeit gewachsen und nicht vollständig konsistent. Beim Verweis auf die beiden Online-Shops (B2B und für den Endkunden) wird zusätzlich mit einem Icon als Anker gearbeitet, bei den anderen Menüpunkten (teils mit Untermenüs) jedoch nicht.
Das auf mobilen Webseiten so beliebte Burger Menü, das auch Morga einsetzt, ist ebenfalls nicht zu empfehlen, da es zu einer wesentlich schlechteren Conversion der dahinter liegenden Inhalte führt, wenn diese nicht durch weitere, sichtbare In-Page-Links zusätzlich abrufbar sind.
Aus heutiger Sicht ebenfalls gewöhnungsbedürftig ist die aus Kundensicht strikte Trennung zwischen dem Use Case «Informieren» (auf https://www.morga.ch) und dem Use Case «Einkaufen» (auf https://www.morgashop.ch). An diversen Stellen wird auf den Onlineshop hingewiesen, jedoch eine direkte Möglichkeit des nahtlosen Wechsels besteht nicht. Entscheidet sich der Kunde zum Einkaufen, gelangt er auch auf eine andere Domain mit anderem dahinterliegendem System und anderer Seitenaufmachung sowohl bei Header (Suche besser eingebunden, Warenkorb-Button vorhanden) als auch im Footer, die nicht vollständig deckungsgleich sind.
Jagt man die URLs einmal durch entsprechende Analysetools wie bspw. Buildwith, lässt sich feststellen, dass Morga.ch auf WordPress basiert, Morgashop (B2B und B2C) jedoch mit Hilfe von PrestaShop realisiert wurde. Dies ist wohl ebenfalls dem organischen Wachstum des Unternehmens im Zeitablauf geschuldet, erhöht jedoch massiv die Komplexität und führt zu erheblichem Mehraufwand bei Wartung und Pflege. Im Zuge eines Shop Relaunchs empfiehlt es sich, die URLs auf einem einheitlichen System zusammenzuführen und nur noch eine Oberfläche mit konsistenter UX anzubieten.
Aus Kundensicht verwirrend wirkt ebenfalls, dass sich der Footer zwischen den Use Cases «Informieren» und «Einkaufen» ebenfalls inhaltlich unterscheidet und nicht konsistent ist (z.B. hinsichtlich Social Media-Verlinkungen: Im Shop fehlt die Verlinkung auf Instagram). Zudem wirkt der Footer auf Morga.ch recht vollgestopft und könnte eine stärkere Untergliederung erfahren. Dies vor allem, da bereits ein so genannter Sub-Footer vorhanden ist, in dem man neben dem Sprachwähler ebenfalls auch Punkte wie Impressum oder Datenschutzerklärung ergänzen könnte.
Unterschiedliche Footer bei Morga (Quelle: https://www.morga.ch / https://www.morgashop.ch)
Ebenfalls nicht vorhanden: Der heutige standardmässig eingesetzte «Social Proof», bspw. mit Hilfe von Gütesiegeln, oder aber auch Rezensionen von Trusted Shops, Trustpilot oder mit Hilfe von Verweisen auf Artikel in diversen Medien / Tageszeitungen.
Auch der heute standardmässige Verweis auf mögliche Zahlungsarten im Footer fehlt und muss sich aus Kundensicht eher mühevoll über die Sitemap und den dortigen Punkt «Secure Payment» zusammengesucht werden.
FOKUS AUF DEN «EINKAUFEN»-CASE
Bei Fokussierung auf den Use Case «Einkaufen» fällt aus Verbrauchersicht primär eines auf: Header, Footer und auch die Menüstruktur haben sich auf dieser neuen Landing Page verändert und sind wie bereits beschrieben nicht konsistent zum Use Case «Informieren». Menüs werden nun teilweise mit Hilfe einer so genannten Meganav (Mega Navigation) abgebildet. Also mit einem grossen ausklappbaren Overlay. Auf der Mobilansicht wirken diese durch die Farbwahl rot / schwarz zudem recht aggressiv. Schön wäre es, wenn man sowohl die Menüpunkte als auch die verschiedenen Kategorien mit visuellen Ankern noch etwas ansprechender in der Wahrnehmung gestalten würde. Zudem wirkt die Ansicht der verschiedenen Punkte und Verweise im Header mit «Mein Konto», «Morga.ch», «B2B» recht willkürlich zusammengestückelt und nicht konsistent durchdacht aus einer Nutzersicht.
Einstieg in den Use Case «Einkaufen» (Quelle: https://www.morgashop.ch)
Die Darstellungen der Produkte auf der Landing Page wirken durch den gewählten Hintergrund eher lieblos. Die Verknüpfung von Content und Commerce ist im Morgashop kaum vorhanden. Dort wo sie vorfindbar ist, wird der Kunde mittels einem neu geöffneten Tab auf Morga.ch in den Case «Informieren» geführt. Und so vom potentiellen Kauf weggelotst.
DIE KATEGORIESEITEN – SOLIDE ABER AUSBAUFÄHIG
Die Kategorieseiten bei Morga führen das vorab geschilderte Designschema fort. Positiv hervorzuheben ist der vorhandene Breadcrumb, der dem Nutzer Orientierung gibt. Und sich auf allen Shopseiten finden lässt. Auch die vorhandenen Filterfunktionen ermöglichen dem Nutzer, das vorhandene Sortiment aus Nutzersicht auf interessierende Produkte einzuschränken, z.B. «glutenfrei» oder «Demeter».
Kategorieseitenansicht bei Morga (Quelle: https://www.morgashop.ch)
Die Darstellung der Produktkacheln hat jedoch noch Optimierungspotential. Abgeschnittene Produktkurztexte und unschöne Umbrüche tragen zu einer visuellen Verschlechterung bei; die Kacheln wirken unaufgeräumt und weniger werthaltig. Auch der gesetzlich vorgeschriebene Grundpreis (bspw. Preis pro 100g) fehlt. Zudem stellt sich die Frage, ob die gewählte Zusammenstellung in einer Kategorie «Dessert – Gebäck» aus Kundensicht Sinn macht. Knäckebrot und Dinkelzwieback scheinen hier doch etwas aus der Rolle zu fallen.
DIE PRODUKTDETAILSEITE – ALLES RELEVANTE, ABER SCHLICHT
Die Produktdetailseiten im Morgashop zeichnen sich durch Schlichtheit aus. Relevante Infos wie Produktbeschreibung, Nährwerte, Allergene und allenfalls auch Zubereitungshinweise sind vorhanden. Die Grundpreisangabe fehlt jedoch auch hier.
Für das Produkt gibt es nur ein Produktbild in geringer Auflösung mit sehr viel Weissraum im dafür vorgesehenen Raster. Beim Klicken auf den entsprechenden CTA (Call-to-Action) Button zum Vergrössern öffnet sich ein nicht weiter zoombares Overlay des Produktbilds – ebenfalls mit einigem Weissraum.
Produktdetailseite bei Morga (Quelle: https://www.morgashop.ch)
In meinem verwendeten Desktop-Browser (Apple Safari) besteht zudem ein Bug beim Mengenregler über dem Warenkorb-Button. Dort werden Plus- und Minuszeichen nur als graue Kästchen angezeigt. Im Firefox Browser sowie auf Mobile besteht dieser Bug jedoch nicht.
Eine Verknüpfung von Content und Commerce, bspw. in Form von Rezepten (wo passend), findet hier ebenfalls nicht statt.
WARENKORB UND CHECKOUT
Warenkorb und Checkout finden im Morgashop in einer kombinierten Ansicht statt, was heute eher unüblich geworden ist. Hier wirk das Design – wohl bedingt durch eine ältere Version des Shopsystems – recht in die Jahre gekommen und im Container-Style nicht mehr zeitgemäss.
Durch die direkte Kombination von Warenkorb und Checkout wird es dem Kunden zudem recht leicht gemacht, lediglich als Gast zu bestellen, ohne sich zu registrieren. Auch eine Anmeldung zu einem Newsletter ist nicht vorhanden. So wird die Möglichkeit verschenkt, Kunden mit einem Newsletter über z.B. neue Produkte zu informieren und Folgekäufe zu generieren.
Als Versandart wird lediglich eine Lieferung per Post angeboten – mit einem Aufpreis von CHF 9.90. Dieser entfällt bei Bestellungen über CHF 150. Der Mindestbestellwert beträgt dabei CHF 20.
Warenkorb und Checkout bei Morga (Quelle: https://www.morgashop.ch)
FAZIT
Gerade der hohe Anteil an Bio-Zutaten und die Qualität der Produkte – von der sich der Autor ebenfalls bereits selbst überzeugen konnte – sorgt für ein gutes Standing der Marke Morga. Von dieser Strahlkraft profitiert sicherlich auch der Onlineshop. Und dies führt mutmasslich dazu, dass sich Fans der Marke Morga nicht vom Shop-Design abschrecken lassen. Zusammenfassend lässt aber sich festhalten: Von der Anmutung wirkt der Auftritt auf der Startseite und den Folgeseiten durch Farbwahl und kantigen Container-Style etwas in die Jahre gekommen und nicht mehr ganz zeitgemäss. Ein Redesign des gesamten Webauftritts nach aktuellen UX Gesichtspunkten wäre zu empfehlen. So könnten weitere Kunden angesprochen und zu Käufern konvertiert werden.
ÜBER DEN AUTOR
Prof. Dr. Matthias Schu ist der führende E-Food-Experte im DACH-Raum und Autor von «Das E-Food Buch». Nach über einem Jahrzehnt in leitenden Positionen in Beratung, Business Development und Projektmanagement im In- und Ausland, lehrt er seit September 2020 als Dozent für E-Commerce und Handel an der Hochschule Luzern. Zudem berät und unterstützt er mit seiner Boutiqueberatung «Dr. Matthias Schu | retail I ecommerce | internationalization strategy», Händler und Industrie bei Projekten, Prozessen und Strategie.