Planeta Huerto: Von der WebView-App zur nativen Marktplatz-App, alle Kennzahlen verbessert

Jede Kennzahl im App Store geht durch die Decke, verglichen mit den früheren Werten aus der Zeit, als WebViews im Einsatz waren.

Albert MiraCTO, Planeta Huerto

Über Planeta Huerto

Planeta Huerto ist ein spanischer Händler für Gesundheitsprodukte und Bio-Lebensmittel auf Shopify Plus, mit einem der größten und komplexesten Sortimente der Branche. Die Produktseiten werden stark von Daten gesteuert: Angaben zum Anbieter, Staffelpreise, Ernährungsfilter und die Logik der Kollektionen sind in Metafields und Metaobjekten hinterlegt. Außerdem betreibt Planeta Huerto über Mirakl einen Marktplatz. Ein einziger Katalog enthält daher Produkte, die das Unternehmen selbst verkauft und versendet, und Produkte von Drittanbietern, jeweils mit eigenen Regeln für Anbieter, Versand und Lieferung.

Das Problem

Die App von Planeta Huerto sollte sich nativ anfühlen, und das bei einem Marktplatzkatalog, den die meisten App-Baukästen nicht einmal abbilden können.

Die Website von Planeta Huerto ist gut optimiert. Die Schwierigkeiten entstehen erst, wenn eine WebView sie in eine native App-Hülle einbettet. Dann treffen zwei Bedienkonzepte aufeinander. Native Gesten wie Wischen, Scrollen und die Zurück-Geste des Systems geraten mit der Navigation und den Gesten der Website in Konflikt. Dadurch fühlt sich die App für Kunden ungewohnt an, selbst wenn jede Seite korrekt dargestellt wird.

Dahinter stand ein grundsätzlicher Einwand von Händlern mit komplexen Katalogen: Kein App-Baukasten kann nachbauen, was wir in unserem Theme hinterlegt haben, geschweige denn unsere Marktplatzlogik. Die Produktseiten von Planeta Huerto enthalten sechs verschiedene Komponenten, die über Metafields gesteuert werden. Zugleich bildet ein Mirakl-Marktplatz die Grundlage des gesamten Katalogs. Die App brauchte native Komponenten mit vollem Zugriff auf Metafields und Metaobjekte. Sie musste Marktplatz- und Direktprodukte korrekt verarbeiten und sich so bedienen lassen, wie Kunden es von einer App erwarten.

Dazu kam eine zweite Sorge, die Kosten. Planeta Huerto wusste genau, wie viel Arbeit das eigene Team in diese Komponenten auf der Website gesteckt hatte. Das Unternehmen ging davon aus, dass eine Plattform für den Nachbau entweder Preise für individuelle Enterprise-Entwicklung verlangen würde, etwa 2.000 bis 3.000 $ pro Monat, oder alles vereinfachen würde, damit es in eine Vorlage passt. Beides kam nicht infrage. Die Komponenten gab es aus gutem Grund.

Die Lösung

NAPPS baute jede Komponente der Produktseite nativ auf Expresso nach. Planeta Huerto war der erste Kunde auf Expresso und zeigte als Erster, dass die Technologie auch bei einem großen Katalog funktioniert.

Expresso ist die Technologie von NAPPS, die React und TypeScript in nativen Code umsetzt. Daraus entstehen echte Komponenten in SwiftUI und Jetpack Compose, keine eingebetteten Webinhalte. Planeta Huerto war der erste Kunde, dessen App auf Expresso gebaut wurde, und sein Katalog war der erste echte Belastungstest. Ein großer Marktplatzkatalog mit vielen Metafields zeigt die Grenzen einer WebView-App und ist ein anspruchsvoller erster Test für eine vollständig native Plattform. Wenn Expresso hier funktionierte, würde es überall funktionieren.

Zwei Dinge machten den Nachbau möglich:

1. Voller Zugriff auf Metafields und Metaobjekte. Alle Produktdaten, die Planeta Huerto im Theme hinterlegt hatte, standen den nativen Komponenten zur Verfügung. Nichts musste vereinfacht oder weggelassen werden, damit es in die App passt.
2. Native Unterstützung für den Marktplatz. Die App liest Marktplatzdaten aus den Produkt-Metafields und aus der Mirakl-Integration und stellt Marktplatz- und Direktprodukte korrekt dar: mit dem richtigen Anbieter, den richtigen Versandkosten und Lieferzeiten, die sich nach Art des Anbieters und Wochentag richten. Die App musste den Marktplatz nicht mehr in einer Webseite verstecken.

Alle sechs Komponenten waren im Tarif von Planeta Huerto enthalten und wurden nicht als individuelle Enterprise-Entwicklung berechnet. Damit war die Sorge ausgeräumt, dass so viele Anpassungen ein Mehrfaches kosten oder vereinfacht werden müssten. Dafür musste nicht jede Oberfläche neu gestaltet werden. Zwei der drei anspruchsvollsten Komponenten, die Hinweiskarte und die Mengenrabattstufen, erhielten neue native Oberflächen. Das intelligente Karussell nutzte dagegen eine vorhandene NAPPS-Komponente mit der eigenen Logik von Planeta Huerto. NAPPS verwendete bestehende Oberflächen, wo es möglich war, und entwickelte neue nur für Bedienfunktionen, die es noch nicht gab. So blieb die Umsetzung effizient.

Die Umsetzung in der Praxis: Das Projekt dauerte etwa vier Wochen und damit länger als eine typische App-Veröffentlichung mit NAPPS. Der Grund war, dass Expresso noch nicht vollständig entwickelt war. NAPPS baute die Plattform parallel zur App von Planeta Huerto auf. Dazu gehörten die Verbindung zwischen nativem Code und der React- und TypeScript-Ebene sowie Dienste zum Lesen von Shopify-Kollektionen, Produkten und Metaobjekten. Einige benötigte APIs wurden erst während des Projekts erkennbar, etwa die Rich-Text-Darstellung für die Hinweiskarte. Planeta Huerto brachte Geduld mit und vertraute dem Prozess. Die hier entwickelten Funktionen gehören heute zur Plattform und stehen allen NAPPS-Kunden zur Verfügung. Das umfasst die Verbindung zum nativen Code, die Datendienste, Rich Text, dynamische Icons, Event-Callbacks sowie eine sprach- und regionsabhängige Formatierung. Alle Teile wurden für die Wiederverwendung entwickelt.

In unseren Produktseiten steckten Jahre an Geschäftslogik, dazu kam ein Marktplatz. Wir dachten, eine App würde diese Funktionen auf das Nötigste reduzieren. Stattdessen wurde jede Komponente nativ umgesetzt, einschließlich unseres Marktplatzes. Die Zahlen im App Store veränderten sich, sobald wir umgestellt hatten.

Albert MiraCTO, Planeta Huerto

Strategie und Maßnahmen

Bauen Sie alles, was Ihr Theme mit Metafields umsetzt, als native Komponenten nach, einschließlich der Marktplatzlogik.

1. Hinweiskarte zu Anbieter und Versand (neue native Komponente, in 5 Tagen gebaut). Sie zeigt den Namen des Anbieters (anklickbar und mit dessen Kollektion verlinkt), die Versandkosten und eine Lieferzeit, die sich nach dem Kalender richtet: Bei Bestellung von Montag bis Donnerstag wird am nächsten Tag versendet, bei Bestellung am Freitag am Montag und bei Bestellung am Wochenende am Dienstag. Sie erkennt außerdem, ob ein Produkt direkt oder über den Marktplatz verkauft wird, und wendet jeweils die passenden Regeln für Anbieter und Versand an. Die Daten stammen aus Produkt-Metafields, Metaobjekten der Anbieter und der Mirakl-Integration. NAPPS hat die Komponente bewusst flexibel gebaut: beliebig viele Einträge, jedes Icon, Formatierung mit Rich Text. Wenn Sie Mirakl oder einen anderen Marktplatz mit mehreren Anbietern betreiben, stellen Sie Versand und Lieferung pro Anbieter nativ dar, damit Marktplatzprodukte gleichwertig wirken. Bei anderen Marken zeigt dieselbe Komponente heute Zertifizierungen (Bio, Fairtrade), Informationen zur Nachhaltigkeit oder Produktmerkmale.
2. Mengenrabatt-Komponente (neue native Komponente, in 4 Tagen gebaut). Sie zeigt Mengenrabattstufen auf der Produktseite. Beispiele sind 1 Stück zum regulären Preis, 3 Stück mit 10 % Rabatt und 5 Stück mit 20 % Rabatt. Die Zahl der Stufen ist variabel, von 2 bis 10 statt fest 3. Jede Stufe kann eine Kennzeichnung wie "Most Popular" erhalten. Die Komponente erfasst die aktuelle Auswahl. Bei einem Klick übergibt ein Callback das Ereignis an die Preislogik der Marke, die den Rabatt neu berechnet. Verwenden Sie eine einheitliche native Oberfläche und binden Sie die eigene Preislogik der jeweiligen Marke an. So aktualisiert sich der Rabatt sofort, ohne Umweg über das Web.
3. Intelligentes Produktkarussell (bestehende Oberfläche, eigene Logik, in 1 Tag gebaut). NAPPS verwendete ein vorhandenes Karussell. Neu war die Logik, die die angezeigte Kollektion auswählt. Die Kollektionen von Planeta Huerto sind nach ihrem Navigationspfad benannt, etwa Startseite > Lebensmittel > Bio > Gemüse. Ein Produkt kann mehreren Kollektionen angehören. Die Logik ermittelt die Tiefe des Pfads und zeigt die spezifischste Kollektion an. Der Titel der Produktreihe stammt aus einem eigenen Metafield in der Sprache der Kundschaft. Nutzen Sie Ihre Katalogstruktur, um passende Produkte automatisch und ohne manuelle Auswahl zu präsentieren. Dafür können Sie eine vorhandene Oberfläche verwenden, statt sie selbst neu zu gestalten.

Die Ergebnisse

Jede gemessene Kennzahl verbesserte sich nach dem Wechsel von einer WebView-App zu einer wirklich nativen App.

Die Zuwächse kamen nicht von einer neuen Wachstumsstrategie. Sie entstanden, weil dieselben Produktseiten als native Komponenten neu gebaut wurden, einschließlich des Marktplatzes. Jede Geste, jeder Übergang und jede Navigation funktioniert so, wie die Kundschaft es auf dem Smartphone erwartet, statt gegen die App zu arbeiten.

Fazit

Planeta Huerto zeigt, wie sich komplexe Kataloge und Marktplätze in einer nativen App umsetzen lassen. Das ist für Marken relevant, deren Produktseiten auf Metafields, Metaobjekten und Drittanbietern beruhen und die hohe Entwicklungskosten oder große Kompromisse befürchten. Der Katalog war zugleich der erste Nachweis, dass Expresso auch bei großen Sortimenten funktioniert. Eine native App muss nicht an Vorlagen gebunden sein. Funktionierende Website-Logik lässt sich übertragen, wenn die Plattform die nötigen Datendienste, die React- und TypeScript-Ebene und die nativen Komponenten bereitstellt. Für den Einwand "Unser Katalog ist zu individuell für eine App" zeigt Planeta Huerto eine konkrete Lösung.

Die Zusammenarbeit geht weiter. Die hier entwickelten Komponenten stehen inzwischen allen NAPPS-Kunden zur Verfügung. Das Entwicklungsteam von Planeta Huerto nimmt heute am Expresso-Programm mit beschränktem Zugang teil. Es entwickelt neue Komponenten für die App und veröffentlicht sie direkt, ohne auf einen Prüfzyklus im App Store zu warten. Aus der Migration ist eine Plattform geworden, auf der das Team der Marke selbst weiterentwickelt.