Digitale Rezept-Erlebnisse neu denken.

Mit der neu gestalteten Betty Bossi-App ist es jetzt ganz einfach, das richtige Rezept für jede Gelegenheit zu finden. Lass dich heute noch inspirieren.

Die Herausforderung

Go-Live Timing
Abonnent:innen des Betty Bossi-Magazins sollten durch einen QR-Code zu den Rezepten in der App gelangen. Da das Datum für diese neue Printausgabe feststand, war es entscheidend, die App zügig zu finalisieren, um sie rechtzeitig launchen zu können.
Vermittlung von Premium-Inhalten
Eine von Betty Bossis Einnahmequellen ist das Premium-Abonnement für die App, das den Nutzern Zugang zu speziellen Rezepten gibt. Die Vermittlung der Vorteile und die Möglichkeit, die App auszuprobieren, helfen, Frustration auf Seiten der Nutzer zu vermeiden.
Technische Hindernisse
Betty Bossis umfangreiche Rezeptsammlung aus dem Jahr 1998 wurde für die Webtechnologie aufbereitet und angepasst. Dabei war eine enge Zusammenarbeit mit dem Backend-Team von Betty Bossis notwendig, um das beste Nutzererlebnis auf iOS und Android zu gewährleisten.

Hier sind die Ergebnisse!

Angewandte Services

Produktstrategie

Unser Rezept für markengetriebenes Design.

UXi Paket

Basierend auf Betty Bossis Markenwerten, haben wir die User-Experience-Identity (UXi) erarbeitet und stellten so sicher, dass die Markenidentität und Vision von Betty Bossi in jedem Detail der digitalen Produkte spürbar sind. Die Herausforderung hierbei war, dass die Marke sehr divers aufgebaut ist - ursprünglich gestartet als analoges Magazin, gibt es tausende von Rezepten, sowie Produkte und Geräte für die Küche selbst. Neben den Kernwerten modern, einfach, ideenreich, sympathisch und aktuell, visualisiert unsere semantische Karte auch die Sekundärwerte, die das Betty Bossi-Universum weiter beschreiben. Insgesamt stellt die UXi daher die essentielle Grundlage für das Redesign der digitalen Produktlandschaft Betty Bossis dar.

Eine semantische Karte der Werte der Marke Betty Bossi

Design

Geschmackvoll in jeder Hinsicht: Unser markenorientiertes UX Design.

UX Design

Unsere Aufgabe bestand darin, ein Redesign für die Betty Bossi-App zu entwickeln und damit die User Experience auf das nächste Level zu bringen. Daher haben wir die bestehende App zunächst analysiert, um so herauszufinden, in welchen Bereichen wir Verbesserungspotential sehen können. Unser primäres Ziel war es, den Nutzer:innen sowohl einen einfachen Zugang zu den Rezepten zu verschaffen, als auch einen Koch-Modus mit einer Schritt-für-Schritt Anleitung zu integrieren. Zusätzlich haben wir ein Feature entwickelt, welches sich viele Nutzer:innen gewünscht haben: eine Sammlung, in der favorisierte Rezepte gespeichert und verwaltet werden können.

UI Design

Durch den hellen Hintergrund, kombiniert mit kontrastreichen Icons und einer neuen Highlight-Farbe, haben wir einen freundlichen und modernen Look kreiert, der Betty Bossis Markenwerte perfekt widerspiegelt. Bildern sollen die Nutzer:innen inspirieren und zum Nachmachen anregen. Man kann sich dabei direkt überlegen, ob man das Rezept kochen, näher anschauen oder speichern möchte. Wir haben verschiedene Highlight-Module mit einem sehr großen Aufmacher-Bild und zusätzlich große und kleine Swimlanes benutzt, was inspirierend, dynamisch und dennoch zeitgemäß wirkt. Um der App einen möglichst nahbaren Charakter zu verleihen, war es uns wichtig, dass die visuellen Elemente nicht zu steril wirken. Formen im Hintergrund, welche auch kein erkennbares Muster aufweisen, sondern sich harmonisch hinter die einzelnen Komponenten legen, sind nur ein Beispiel für die perfekt unperfekte Gestaltung.

Motion Design

Auch in unseren Animationen innerhalb der App sollen der persönliche Touch und die kleinen Details spürbar sein, z.B. beim favorisieren eines Rezepts, wo in den Icons einen kleinen Farbklecks erscheint. Diese Interaktionen verkörpern den nicht allzu perfektionistischen Charakter der App und soll daran erinnern, dass auch beim Kochen mal eine Kleinigkeit daneben geht. Mit Micro-Animationen wie in der Tabbar soll die App außerdem ein nahbares und menschliches Gefühl vermitteln. Unsere Empty- und Loading States wirken freundlich und feminin und sollen so ein kleines Lächeln in das Gesicht der User zaubern anstatt sie zu frustrieren.

Produkt Ownership

Betty Bossi ist der langjährigste bekannte Name der Schweizer Küche – dessen waren wir uns durchaus bewusst. Die App hat bereits 100.000 monatlich aktive Nutzer:innen. Gerade deshalb war die tägliche Kommunikation mit dem Projektteam unglaublich wichtig bei der Entwicklung. Unsere Kommunikation umfasste verschiedene Synchronisationen während der Woche, um wichtige Fragen direkt zu klären und jedes Problem zu lösen, das sich uns stellte. Wir haben alle Herausforderungen mit dem Ziel vor Augen gemeistert und am Ende eine wunderschöne App entwickelt, die sich der Markenidentität von Betty Bossi auf moderne Weise annimmt.

Entwicklung

Ein großartiger Code ist die wichtigste Zutat für ein nahtloses Erlebnis.

App Entwicklung

Die App bietet den Nutzer:innen ein modernes UX/UI Erlebnis durch viele neue Funktionen, wie Push-Benachrichtigungen, Hero-Animationen und QR-Codes. Die Implementierung dieser Funktionen war kein Kinderspiel – wir mussten einige Herausforderungen meistern, um sicherzustellen, dass alles auf älteren und auch auf neueren Geräten reibungslos funktioniert. Für die Implementierung von Push-Benachrichtigungen haben wir das Emarsys SDK verwendet, mit dem die Nutzer:innen alle Rezeptdetails innerhalb der App über universelle Links öffnen können, die in den Push-Nachrichten versteckt sind. Darüber hinaus können die Nutzer:innen jetzt alle neuen und alten Rezepte in der gesamten App durchsuchen, Favoriten markieren, neue und archivierte Magazine abrufen und sich über neue Rezepte oder Betty Bossi-Kochbücher benachrichtigen lassen.

Mehrere Seiten der Betty Bossi App überlagert

Qualitätssicherung

Um Fehler in der Produktion zu vermeiden, haben wir sowohl manuelle als auch automatisierte Tests durchgeführt. Dabei lag der Schwerpunkt auf manuellen Tests, weil die App viele benutzerdefinierte UI-Komponenten, Animationen und Übergänge enthielt. Die Verwendung von Zephyr half uns beim Schreiben und Ausführen von Testfällen, und das Finden von Fehlern und Lösungen war dank täglicher Synchronisationen, Retros und Planungen mit dem Team und dem Kunden einfacher.