WeNeed Erklären und überzeugen mit Scrollytelling

Mit dem Relaunch von weneed.ch wird die App für gemeinsame Einkaufslisten spielerisch erklärt. Die Vorteile der App werden mit Scrollytelling auf intuitive Art und Weise vermittelt und User zum Ausprobieren ermutigt.

  • weblösungen

Die Ausgangslage

Nicht zu viel, nicht zu wenig – so soll der Einkauf sein. Das gilt für den Warenkorb, aber auch die gesamte Planung. Der «Fresszettel» tut es ab zwei Personen meist nicht mehr – aber komplizierter soll es nicht werden. Genau darum gibt es WeNeed: die digitale Einkaufsliste zum Teilen, die genauso einfach funktioniert wie ein Zettel und dazu praktische Extrafunktionen bietet.

Unser Auftrag war es, Funktionen auf der WeNeed Website in einem Look & Feel zu präsentieren. Intuitiv, einfach und trotzdem spielerisch – getreu dem App-Charakter. Dazu war es wichtig, dass die Redakteur:innen das zukünftige CMS einfach und intuitiv bedienen können.

Ein Smartphone liegt auf einem Betonboden im Licht- und Schattenspiel und zeigt die „we need“ App mit dem Slogan „Clever planen, gemeinsam einkaufen“. Die App-Bildschirmanzeige hebt Funktionen wie geteilte Einkaufslisten und Verfügbarkeit im App Store sowie Google Play hervor.

Step by Step zur Lösung

Grundlage für unsere Arbeiten war ein UX-Workshop, in dem wir die Ausgangslage und Ziele der Website gemeinsam mit dem Kunden definiert haben. Danach ermittelten wir die Bedürfnisse und Anforderungen an die Website aus Sicht der User, um sicherzustellen, dass wir eine zielführende Website umsetzen. Dieser Workshop basierte auf einer umfassenden UX- und Contentanalyse des aktuellen Auftritts. Die bewerteten Hauptkriterien: Interaktivität, Benutzererlebnis, Design und Inhalt.

Anschliessend erarbeiteten wir in einem strukturierten Designprozess einen interaktiven Prototyp. Dieser lieferte uns Erkenntnisse darüber, ob unser Konzept in der Praxis funktioniert. Basierend auf diesen Erkenntnissen und einem Storyboard für Animationen konnten wir dann das Design mit HiFi Wireframes erarbeiten.

Motion Design, UX und Frontend vereinen sich hier zu einem eindrucksvollen Scrollytelling-Erlebnis, das Produkt und Interaktion nahtlos verbindet.
Ein Mitarbeiter der Valencia sitzt entspannt auf einer hellen Steinmauer, umgeben von einer Treppe mit blauem Geländer. Er trägt ein helles T-Shirt, hochgekrempelte Jeans und schwarze Vans-Sneaker. Im Hintergrund ist ein modernes Gebäude mit der Aufschrift "Foyer" bei klarem Sonnenschein zu erkennen.

Niklas Dunke

Digital Consultant & UX Designer

Aufmerksamkeit durch Scrollytelling

Die Seite punktet mit einfachen, aber überzeugenden Animationen, die das Produkt beschreiben. Anstelle langer Texte, Bilder oder Videos wird die Geschichte – in unserem Fall die Funktionen der App – während des Scrollens erzählt. So erfahren User die Vorteile der App ohne zahlreiche Klicks. Die Seite bleibt dabei dynamisch und hält die Aufmerksamkeit konstant hoch.

Einkaufsinspiration nach Jahreszeiten

Unser Kaufverhalten ist beeinflusst durch Saisonalität. Im Winter sind Raclette & Co. gefragt, im Sommer Salate und Grilladen. Diese Saisonalität spiegelt sich auf der Seite wider. Mit einfachen Elementen im Storyblok CMS können Redakteur:innen mit ein paar Klicks Bilder und Texte austauschen und so gezielt auf bestimmte Ereignisse wie die Grillsaison, die Weihnachtszeit oder den Frühling eingehen. Der Aufbau der Seite bleibt dabei gleich und beständig.