Das ist
KIBA ist eine KI-unterstützte Backapp, die Nutzer dazu anregt, sich auf das spannende Erlebnis des Backen zu konzentrieren und dabei Aufmerksamkeit zu bewahren.
KIBA hilft beim Erlernen und Verbessern von Backfähigkeiten und bietet personalisierte Vorschläge. Fortschrittsverfolgung und Gamification erhöhen die Motivation und den Spaß.
KIBA ist eine App für eine in der Zukunft erhältliche AR-Brille. Backschritte werden im Backmodus einzeln angezeigt. Bei Problemen und Fragen steht KIBA jederzeit zur Verfügung und passt Rezepte an, ändert Zutaten und gibt hilfreiche Tipps.
Was ist besonders an KIBA?
Nutzung einer AR-Brille
Die App ist für AR-Brillen konzipiert und verschmilzt Informationen und Layout mit der Umgebung im Sichtfeld des Nutzers. Dadurch interagiert die App direkt mit der Umgebung und bietet jederzeit Unterstützung.
Gefühl für Mengenangaben entwickeln
Anstatt exakte Grammzahlen zu geben, arbeitet die App mit Esslöffel- oder Tassenangaben. Dies soll dazu führen, dass der Nutzer immer unabhängiger von einer Waage wird.
Den Nutzer motivieren rauszugehen
Dank der AR-Brille kann der Nutzer die App auch draußen verwenden. In der Erdbeer-Saison informiert die App über Erdbeerrezepte und schlägt nahegelegene Märkte oder Erdbeerfelder vor.
KI-Assistenz
Während der Nutzung der App kann der Nutzer jederzeit die KI um Unterstützung bitten, sei es für das Rezept oder die Bedienung. Die App bietet Alternativen für Zutaten und Mengen und passt das Rezept automatisch an. Dank der Profilerstellung berücksichtigt die KI Allergien und Ernährungsbedürfnisse bei den Rezeptvorschlägen.
Styleguide
In unserem Styleguide legten wir einige Regeln, Farben, Schriftschnitte, Icons und weitere Gestaltungselemente fest, um unser Produkt einheitlich zu gestalten.
Wir entschieden uns aufgrund der Häufigkeit der Farbe braun im Backen für verschiedene Brauntöne, sowie verschiedene rötlichere Töne zur Hervorhebung wichtiger Elemente. Dabei war uns wichtig, dass die Gestaltung trotz Verwendung der Brauntöne nicht "dreckig" wirkt.
Unsere App teilt sich auf in:
Intro & Profil
Beim ersten Öffnen der App wird der Nutzer von Kiba begrüßt und durch einen vierstufigen Onboardingprozess geführt. Zunächst wählt der Nutzer einen Benutzernamen, der für die Identifikation in den Community-Rankings der Challenges verwendet wird. Im zweiten Schritt gibt der Nutzer seine Backfähigkeiten auf einer Skala von eins bis zehn an, wobei ein Informationsoverlay Unterstützung bei der Auswahl bietet. Anschließend werden Fragen zu Lebensmittelallergien und speziellen Ernährungsweisen gestellt, damit Kiba zukünftig passende Rezeptvorschläge machen kann. Nach Abschluss des Onboardings begrüßt Kiba den Nutzer erneut und leitet ihn zu seinem persönlichen Profil weiter, das jederzeit bearbeitet werden kann. Hier erhält der Nutzer auch eine Übersicht über seine bisherigen Backerfolge.
Level
Um den Nutzern schrittweise das Backen beizubringen, beinhaltet unsere App eine Funktion, bei der der Nutzer sich durch das Backen immer schrittweise schwerer werdende Rezepte Level verdient, mit denen man weitere Rezepte freischaltet.
Rezeptvorschläge
Beim Öffnen der Rezept-Unterseite erklärt KIBA diese zunächst.
Die anschließenden Filteroptionen helfen, die Rezepte genauer anzupassen, ohne den Nutzer zu überfordern. Nach Auswahl eines Filters erscheinen weitere Filteroptionen. Anschließend erhält der Nutzer passende Rezeptvorschläge. Von diesen kann er bis zu drei Rezepte als Favoriten speichern und muss erst ein favorisiertes Rezept nachbacken, um neue Favoriten zu speichern. Dies motiviert zum Backen und reduziert die Zeit für die Rezeptsuche.
Wählt der Nutzer ein Rezept, erscheint eine Vorschau mit Zutaten, Zeit, Schwierigkeitsgrad und Werkzeugen. Die Zutaten passen sich bei Änderung der Portionengröße an, und der Nutzer kann markieren, was er bereits hat. Rezepte können als Favorit gespeichert werden. Am Seitenende kann man in den Backmodus wechseln oder zu den Rezeptvorschlägen zurückkehren.
Backbuch
- Das Backbuch wurde bewusst im Buchformat gewählt, um eine authentische Wirkung zu erzielen, anstatt das quadratische Format der anderen Designs zu verwenden.
- Maßeinheiten helfen dem Nutzer, Mengenangaben wie Gramm in Tassen, Esslöffeln und Teelöffeln besser zu verstehen. Dies erleichtert das Verständnis, besonders für Nutzer, die genaue Angaben bevorzugen.
- Das Backbuch ermöglicht es, Filter individuell anzupassen. Unnötige Filter können entfernt und neue hinzugefügt werden, indem man Kiba darauf hinweist.
- Die Rezeptseiten sind einfach gestaltet, um einen klaren Überblick zu bieten. Der Nutzer kann Zutaten anpassen, Portionsgrößen ändern und Werkzeuge für zukünftige Verwendungen hinzufügen.
- Detaillierte Schritt-für-Schritt-Anleitungen und Tipps zur Vermeidung häufiger Fehler können enthalten sein, um den Backprozess zu erleichtern. Ein interaktiver Bereich ermöglicht es dem Nutzer, eigene Notizen undAnpassungen zu speichern, was das Backbuch zu einem personalisierten und wertvollen Küchenbegleiter macht.
Backmodus
Hat der Nutzer ein Rezept gewählt, kann er den Backmodus starten. Die App erklärt Schritt für Schritt die einzelnen Backschritte und interagiert mit dem Sichtfeld des Nutzers, indem sie die Schritte direkt in der Umgebung anzeigt. Während des Backens kann der Nutzer die KI jederzeit um Hilfe, genauere Erklärungen oder Rezeptänderungen bitten. Die KI erkennt durch eine Kamera in der Brille, wenn ein Schritt abgeschlossen ist und überprüft, ob die richtigen Mengen an Zutaten verwendet wurden, und warnt bei großen Abweichungen.
Pop-Up-Nachrichten
Dank der AR-Brille kann der Nutzer die App auch draußen verwenden. Bei Erdbeer-Saison informiert die App den Nutzer darüber und schlägt Erdbeerrezepte vor. Befindet sich ein Markt oder Erdbeerfeld in der Nähe, empfiehlt die App, dort Erdbeeren zu besorgen. Sie bietet zudem eine Live-Wegbeschreibung und dient als Navigationssystem zum vorgeschlagenen Ort.
Challenges
Mit KIBA kann der Nutzer an Back-Challenges teilnehmen und Erfolge verdienen. Regelmäßig werden neue Challenges erstellt, bei denen Zutaten ohne Waage oder Messbecher abgemessen werden müssen. Im Backmodus überwacht KIBA, ob der Nutzer schummelt, und erklärt die Challenge als ungültig, falls dies passiert. Nach Abschluss der Challenge sieht der Nutzer seine Ergebnisse im Vergleich zu anderen Teilnehmern.
Frühere Challenges und Ergebnisse können in einem scrollbaren Raster angezeigt werden. Die letzten vier Erfolge werden auf der Challenge-Seite gezeigt. Ein Button führt zu einer Seite mit allen Erfolgen, die mit bis zu drei Icons bewertet und nach Datum sortiert sind.
Anwendungsvideo
Prototyp in Figma
Zum PrototypenLandingpage
Die Landingpage ist in fünf Sektionen eingeteilt: Headerbild (Logo), USP, eine freundliche Begrüßung durch Kiba, die Präsentation der fünf Hauptfunktionen der Anwendung und ein Abschnitt, der erneut auf die Semesteraufgabe Bezug nimmt.
Nach dem Design der Landingpage erfolgte die Programmierung der Seite in VSCode. Die Seite wurde mit klarem Code in Header und Body unterteilt, und die jeweiligen Bereiche in Sections gegliedert, um die Struktur im Code einfach und übersichtlich zu halten.
Fazit
Unsere Hauptherausforderung in diesem Semesterprojekt war die Ideenfindung. Auf dem Weg zum finalen Produkt haben wir zahlreiche Ideen generiert, diskutiert und wieder verworfen. Besonders die genaue Definition von "Was ist es? Was ist es nicht?" fiel uns anfangs schwer. Durch zahlreiche Iterationen sind wir diesen Fragen immer mehr auf den Grund gegangen und haben unsere Produktidee stetig präzisiert und klarer definiert.
Bei der Umsetzung selbst hatten wir anfänglich Probleme mit der visuellen Einheitlichkeit der Entwürfe, was wir durch einen Styleguide und Komponenten in Figma einfach lösen konnten.
Abschließend lässt sich sagen, dass die Konzeption einer App für Smart Glasses der Zukunft eine sehr interessante Aufgabe für uns war, durch die wir zeigen konnten, wie innovative Technologien wie Augmented Reality und künstliche Intelligenz die Lernprozesse vereinfachen könnten.
Team
Ayca Günes, Katharina Engelhardt, Sabrina Schindler, Laura Schmidt
Betreuung
Prof. Damian Gerbaulet