Weingraf App · Digitale Weinverkostung mit Shopify-Integration

Wie wir eine digitale Tasting-Plattform für Weinprofile, Empfehlungen und gemeinsame Verkostungen entwickelt haben

Mehrere Bildschirme der Weingraf-App mit einer klaren, minimalistischen Benutzeroberfläche in den markentypischen Farben und Schriften.

Übersicht - Die Weingraf App

Weingraf will den Einstieg in die Welt des Weins einfacher, persönlicher und digitaler machen. Dafür sollte eine App entstehen, die reale Weinpakete mit einer geführten Verkostung verbindet: Nutzer aktivieren ihr Paket per Code, bewerten Weine Schritt für Schritt und erhalten am Ende ein persönliches Geschmacksprofil mit passenden Empfehlungen.

Especial entwickelte dafür eine mobile-first Tasting-Plattform mit Web-App, iOS-App-Hülle, Echtzeit-Gruppenmodus und tiefer Shopify-Anbindung. Produktdaten, Wein-Metafelder, Kundenprofile, Fortschritte, Ergebnisse und Gruppen-Sessions werden über Shopify APIs verarbeitet, während Socket.IO Live-Erlebnisse für gemeinsame Tastings ermöglicht.

Kunde

Weingraf GmbH / Pieroth Wein GmbH

Services
UX Design
UI Design
App Development
Frontend Development
Backend Development
Shopify Integration
Mobile App Development
Projektdauer

3 Monate

Das Team
1 Project Manager
2 UX/UI Designers
2 Front-end Engineers
2 Back-end Engineers
Onboarding-Bildschirm, auf dem Nutzerinnen und Nutzer zwischen verschiedenen Erlebnissen wählen – von der Einzelverkostung über eine Gruppenverkostung bis hin zu einem Weinquiz.
Smartphone-Mockup der Startseite der Weingraf-App mit dem Fortschritt der Weinverkostung, einer Fortschrittsanzeige und einer gut sichtbaren Handlungsaufforderung.

Herausforderungen und Ziele

Die Weingraf App musste deutlich mehr leisten als eine einfache Produkt- oder Content-App. Sie sollte eine reale Weinverkostung digital begleiten, Weinwissen verständlich machen, sensorische Bewertungen strukturiert erfassen und daraus persönliche Empfehlungen ableiten. Gleichzeitig musste die Experience für Nutzer funktionieren, die wenig Weinvokabular kennen, aber trotzdem herausfinden möchten, welcher Wein wirklich zu ihnen passt.

Technisch kamen mehrere Anforderungen zusammen: Paket-Codes mussten reale Probierpakete mit digitalen Tastings verbinden, Bewertungsdaten mussten langfristig gespeichert werden, Gruppenverkostungen sollten live synchronisiert funktionieren und Shopify sollte als zentrale Commerce- und Datenbasis eingebunden werden. Das Ziel war eine App, die sich für Nutzer leicht und spielerisch anfühlt, obwohl im Hintergrund Produktdaten, Geschmacksprofile, Kundeninformationen, Live-Sessions und native App-Funktionen zusammenspielen.

Unser Ansatz

Wir entwickelten die App als mobile-first Produkt, bei dem die Verkostung im Mittelpunkt steht. Der Einstieg beginnt mit einem Paket-Code, danach führt die App Nutzer durch jeden Wein und jede Bewertungsstufe. Die fachliche Struktur einer Weinprobe bleibt erhalten, wird aber in eine einfache, intuitive Experience übersetzt.

Parallel dazu wurde die technische Architektur so aufgebaut, dass Shopify Produktdaten, Metafelder, Kundenprofile, Tasting-Fortschritte und Ergebnisse bereitstellen kann. Für Gruppenverkostungen ergänzten wir einen Echtzeit-Server mit Socket.IO, der Teilnehmerstatus, Host-Steuerung, Bewertungen und Fortschritt live synchronisiert. Eine Expo-App-Hülle bindet die Web-App in eine native iOS Experience ein und ermöglicht Funktionen wie Push Notifications, Deep Links, Navigation und weitere Gerätefunktionen.

0

1

2

3

4

5

6

7

8

9

0

1

2

Tasting-Modi für
Solo-Verkostung und Gruppenverkostung

1

2

2

3

4

5

6

7

8

9

0

1

2

Plattformen für
iOS-App und Web-App

1

2

2

3

4

5

6

7

8

9

0

1

2

Paket-Code Journey
vom Probierpaket direkt ins digitale Tasting

Live Gruppen-Sessions

Host-Steuerung, Status und
Bewertungen in Echtzeit

Shopify Commerce-Datenbasis

Produkte, Wein-Metafelder, Kundenprofile und Sessions

Konzept & App Experience - Weinverkostung ohne Fachbarriere

In der Konzeptions- und Produktentwicklung stand eine Frage im Mittelpunkt: Wie kann eine professionelle Weinprobe digital so geführt werden, dass sie für Einsteiger einfach bleibt und für interessierte Nutzer trotzdem sinnvoll Tiefe bietet? Die App führt daher nicht nur durch Produkte, sondern durch eine klare Verkostungslogik mit Sehen, Riechen, Schwenken, Probieren und Geniessen.

Bewertungen zu Aromen, Restsüße, Säure, Tanninen, Sterne-Rating und persönliche Notizen werden Schritt für Schritt erfasst. Die App speichert den Fortschritt, sodass Nutzer pausieren und später weiterverkosten können. Dadurch entsteht eine Experience, die Weinwissen, Produktdaten und persönliche Präferenzen verbindet, ohne sich wie ein komplizierter Fragebogen anzufühlen.

Paket-Code als Startpunkt:
physische und digitale Experience verbinden

01

Das Weinpaket wird über einen Paket-Code mit der App verbunden. Dadurch startet die digitale Verkostung direkt mit den passenden Weinen, Produktinformationen, Rebsorten, Herkunftsangaben, Weinarten und Aromaprofilen. Für Nutzer entsteht ein klarer Einstieg, für Weingraf eine saubere Verbindung zwischen Commerce, Paket und App-Erlebnis.

Smartphone-Mockup mit dem Bestätigungsbildschirm, auf dem Nutzerinnen und Nutzer ihren Bundle-Code eingeben.

Sensorische Bewertung Schritt für Schritt:
Weinwissen verständlich machen

02

Die App übersetzt die Logik einer professionellen Weinprobe in einfache Interaktionen. Nutzer bewerten erkannte Aromen, Restsüße, Säure und bei Rotwein auch Tannine. Ergänzend können Sterne vergeben und eigene Notizen gespeichert werden. So entsteht ein strukturiertes Bild des persönlichen Geschmacks.

Smartphone-Bildschirm während der Weinbewertung, auf dem Nutzerinnen und Nutzer den Wein mit Sternen bewerten und optional einen Kommentar hinzufügen können.
Persönliches Geschmacksprofil:
Empfehlungen auf Basis echter Präferenzen

03

Nach Abschluss der Verkostung berechnet die App ein persönliches Geschmacksprofil. Sie zeigt bevorzugte Aromen, weniger passende Geschmacksrichtungen, sensorische Präferenzen und passende Weinprofile. Auf dieser Basis können individuelle Empfehlungen für Weiß-, Rosé- und Rotweine ausgespielt werden.

Smartphone-Bildschirm mit den Ergebnissen einer Einzelverkostung inklusive persönlichem Weinprofil für Rot- und Weißweine.

Gruppenverkostungen in Echtzeit
gemeinsam probieren, live synchronisiert

04

Ein Host kann eine Gruppen-Session erstellen, einen Code teilen und Teilnehmer in Echtzeit einladen. Namen, Avatare, Fortschritt, Bewertungen und Status werden live synchronisiert. Der Host steuert den Ablauf, während die App individuelle und gemeinsame Ergebnisse berechnet.

Wartebildschirm zwischen den Weinen einer Gruppenverkostung mit Übersicht über die bereits verkosteten Weine und die Teilnehmenden, die ihre Bewertungen noch abgeben.

Digitale Weinverkostung - vom Probierpaket zur Empfehlung

Die App begleitet Nutzer durch eine komplette Verkostung, vom Aktivieren des Weinpakets bis zum finalen Profil. Zu jedem Wein werden relevante Informationen angezeigt, etwa Rebsorte, Herkunftsland, Anbauregion, Weinart und passende Aromaprofile. Dadurch wird das Probieren nicht nur dokumentiert, sondern zu einer geführten Lern- und Genuss-Experience.

Das ist besonders wichtig, weil Weingraf nicht nur Wein verkaufen möchte, sondern Kunden dabei hilft, den eigenen Geschmack besser zu verstehen. Die App macht diesen Beratungsansatz skalierbar: Statt Empfehlungen nur aus allgemeinen Produktkategorien abzuleiten, entstehen sie aus den tatsächlichen Bewertungen und Präferenzen des Nutzers.

Gruppenverkostung - ein gemeinsames Erlebnis statt
isolierter Bewertungen

Ein zentrales Feature ist die Gruppenverkostung. Ein Gastgeber erstellt eine Session, teilt einen Gruppencode und führt die Teilnehmer gemeinsam durch die Verkostung. Fortschritte, Bewertungen und Status werden live aktualisiert, sodass die Gruppe trotz unterschiedlicher Geräte in einem gemeinsamen Ablauf bleibt.

Nach der Verkostung berechnet die App nicht nur individuelle Ergebnisse, sondern auch gemeinsame Auswertungen. Dazu gehören beliebte Weine der Gruppe, Einzelprofile der Teilnehmer, Gruppenergebnisse und gemeinsame Empfehlungen. Bei Bedarf können Teilnehmer per Push Notification daran erinnert werden, wenn ein Verkostungsschritt noch offen ist.

Bewertungsbildschirm der Wein-App, auf dem Nutzerinnen und Nutzer angeben, welche Aromen sie im Wein erkannt haben.
Smartphone-Bildschirm mit der Anleitung „So verkosten Sie Wein“.

Shopify-Integration - Produktdaten, Profile und Sessions in einem System

Die Weingraf App ist eng mit Shopify verbunden. Produktdaten, Wein-Metafelder, Kundenprofile, Tasting-Fortschritt und Ergebnisse werden über Shopify APIs verarbeitet. Dadurch bleiben Commerce-Daten und App-Experience nicht getrennt, sondern greifen direkt ineinander.

Für Gruppenverkostungen werden Sessions als Shopify Metaobjects gespeichert. Das macht sie nachvollziehbar und sorgt dafür, dass wichtige Session-Daten auch nach Server-Neustarts wiederhergestellt werden können. Shopify wird dadurch nicht nur als Shop-System genutzt, sondern als robuste Datenbasis für ein digitales Produkt rund um Beratung, Verkostung und Empfehlung.

Visual Design

Das Interface musste Weinwissen einfach machen, ohne den Charakter einer hochwertigen Genussmarke zu verlieren. Deshalb wurde die Experience klar, ruhig und stark geführt aufgebaut. Nutzer sollen jederzeit wissen, welcher Wein gerade verkostet wird, welcher Schritt als Nächstes kommt und wie ihre Bewertung in das persönliche Profil einfliesst.

Besonders wichtig war die Balance zwischen Information und Leichtigkeit. Produktdetails, Aromaprofile, Bewertungsfragen, Notizen und Gruppenstatus mussten auf kleinen Screens funktionieren, ohne überladen zu wirken. Das Ergebnis ist eine mobile App Experience, die Orientierung gibt und gleichzeitig Raum für persönlichen Genuss lässt.

Smartphone-Mockup vor Holzuntergrund mit einem Dialog zum Pausieren der Weinverkostung. Die Benutzeroberfläche weist darauf hin, den Wein während der Pause richtig zu lagern.
Smartphone-Mockup mit den Gruppenergebnissen vor weinrotem Hintergrund. Die Benutzeroberfläche zeigt den beliebtesten Wein der Gruppe sowie ein aufklappbares Element mit den Ergebnissen der weiteren Teilnehmenden.

Frontend-Entwicklung - Mobile-first, responsiv und app-fähig

Die Plattform wurde als Next.js Web-App mit responsiver Mobile-first-Oberfläche entwickelt. Dadurch kann die gleiche Produktlogik sowohl in der Web-App als auch innerhalb der nativen App-Hülle genutzt werden. Für Nutzer bedeutet das eine konsistente Experience, für das Produktteam reduziert es langfristig doppelte Entwicklungs- und Wartungsaufwände.

Die Expo-App-Hülle bettet die Web-App per WebView ein und ergänzt native Funktionen wie Push Notifications, Deep Links, App-Navigation, Clipboard, Kalenderfunktionen und Store Reviews. So verbindet die Lösung die Flexibilität einer Web-App mit den Vorteilen einer installierbaren mobilen App.

Backend-Entwicklung - Echtzeit, Shopify APIs
und persistente Tasting-Daten

Im Backend kommen Shopify Storefront und Admin APIs, Shopify Metafields, Shopify Metaobjects und ein Socket.IO Echtzeit-Server zusammen. Die Architektur verarbeitet Produkt- und Kundendaten, speichert Fortschritte und Ergebnisse und synchronisiert Gruppen-Sessions live zwischen Host und Teilnehmern.

Besonders wichtig war eine stabile Reconnection-Logik für Gruppenverkostungen. Wenn eine Verbindung unterbrochen wird, muss die Session wiederhergestellt werden können, ohne dass Teilnehmer Fortschritte verlieren oder der gemeinsame Ablauf bricht. Dadurch wird die App belastbarer für reale Nutzungssituationen zu Hause, bei Events oder in gemeinsamen Weinproben.

Front-end
Next.js
React
Responsive mobile-first UI
Expo WebView app shell
iOS app
Back-end
Node.js
Socket.IO
Shopify Storefront API
Shopify Admin API
Shopify Metafields
Shopify Metaobjects
Push Notifications
Deep Links
Abschlussbildschirm der Weinverkostungs-App mit Glückwunsch zum abgeschlossenen Tasting und einer Zusammenfassung der persönlichen Ergebnisse.

Ergebnis - Eine digitale Produktplattform für persönlichen Weingenuss

Mit der Weingraf App entstand eine digitale Tasting-Plattform, die Weinpakete, Beratung, Verkostung, Geschmacksprofile und Empfehlungen in einer zusammenhängenden Experience verbindet. Nutzer können Weine alleine oder gemeinsam probieren, ihren Geschmack besser verstehen und auf Basis der eigenen Bewertungen neue Lieblingsweine entdecken.

Für Weingraf schafft die App eine skalierbare Grundlage für digitalen Weinvertrieb, persönliche Empfehlungen und neue Tasting-Formate. Die Verbindung aus Shopify, App Experience, Echtzeit-Sessions und nativer App-Hülle macht aus einem Probierpaket ein digitales Produkt, das Beratung und Commerce enger zusammenbringt.

0

1

2

3

4

5

6

7

8

9

0

1

2

Tasting-Modi für
Solo-Verkostung und Gruppenverkostung

1

2

2

3

4

5

6

7

8

9

0

1

2

Plattformen für
iOS-App und Web-App

1

2

2

3

4

5

6

7

8

9

0

1

2

Paket-Code Journey
vom Probierpaket direkt ins digitale Tasting

Live Gruppen-Sessions

Host-Steuerung, Status und
Bewertungen in Echtzeit

Shopify Commerce-Datenbasis

Produkte, Wein-Metafelder, Kundenprofile und Sessions

Kundenreferenz

"Especial hat uns geholfen, eine digitale Weinprobe zu entwickeln, die sich für Nutzer einfach und geführt anfühlt, obwohl im Hintergrund Produktdaten, Geschmacksprofile, Gruppen-Sessions und Shopify-Logik zusammenspielen. So wird aus einem Probierpaket ein persönliches digitales Erlebnis."

Nicolas Johansson
Digital Manager, Weingraf GmbH / Pieroth Wein GmbH
So helfen wir Unternehmen, bessere Commerce-Plattformen zu bauen

Wir verbinden Shopify Plus Expertise, Produktdenken, Design und individuelle Entwicklung, um Commerce-Projekte umzusetzen, die skalierbar, zuverlässig und einfacher zu betreiben sind.

Nehmen Sie Kontakt auf

Planen Sie eine Shopify Plus Migration oder ein komplexes Commerce-Projekt?

Sprechen Sie mit Malte über Ihr aktuelles Setup, Migrationsrisiken und den schnellsten Weg zu einer skalierbaren Shopify Plus Plattform.

Wenn Sie möchten, können Sie uns auch eine E-Mail senden an hello@especial.digital
Sprechen Sie mit Malte
Mitgründer von Especial.
Termin vereinbaren
Mit dem Absenden dieses Formulars stimmen Sie unserer
Datenschutzerklärung.
Vielen Dank für Ihre Nachricht.
Wir melden uns in Kürze bei Ihnen!
Ups! Beim Absenden Ihres Formulars ist ein Fehler aufgetreten.