Dokumentation

Manuel Lusti

06.06.2025

SFGZ HFIAD22

Projektname: Notifeat

Ausgangslage

Kleinere Restaurationsbetriebe mit einem Selbstbedienungssystem, wie dies häufig bei Freibäder der Fall ist, haben einen Flaschenhals beim Erfassen und dem Abholen von Bestellungen. Digitale Food Order Systeme sind immer konzipiert für Restaurationsbetriebe die einen Tischservice bieten. Einfache, digitale Speisekarten die übers Smartphone gelesen werden können, haben keinen digitalen Bestell- und Zahlungsablauf. So existieren aktuell wenig Bestellsysteme die, öffentlich verfügbar sind und für den Einsatz in kleinen und mittleren Restaurationsbetrieben mit einem Selbstbedienungskonzept und keine, die für diesen Anwendungszweck entwickelt wurden.

Ziel

Eine einfach zu bedienende Software, welche Bestellabläufe digitalisiert und eine direkte Schnittstelle zwischen Kund:in und der Küche des Restaurationsbetriebs bildet, soll geschaffen werden. So sollen Selbstbedienungskassen entlastet, Wartezeiten verkürzt und die Kundenerfahrung verbessert werden.

Abgrenzung

In dieser Arbeit wird ein Konzept zu einer Softwarelösung erarbeitet, das von der Projektierung, über Kundeninterviews bis zu einem visuell schlüssigen und ausgereiften Interface reicht. Die technische Machbarkeit wird zwar abgeklärt, die Umsetzung in Form einer programmierten Applikation ist jedoch nicht Teil der Arbeit.

Research & Konzept

Kundeninterview

Im Kundeninterview wird der aktuelle Stand des Prozesses festgehalten und die genauen Anforderungen von Kundenseite ermittelt. Im direkten Gespräch mit der Kundin wurde so der gewünschte Funktionsumfang und die technischen Gegebenheiten ausfindig gemacht, welche für dieses Projekt und eine mögliche Realisation notwendig sind.

Lastenheft

Das Lastenheft ist ein direktes Resultat aus dem Kundeninterview. Die Ausgangslage wird festgehalten, die Ziele für die Applikation werden gesetzt und der Projektumfang abgesteckt.

Pflichtenheft

Im Pflichtenheft wird der genaue Funktionsumfang der Applikation beschrieben. Jede funktionale Anforderung wird erfasst und die Rahmenbedingungen sowie Abnahmekriterien werden festgehalten. Dieses Dokument bildet, zusammen mit dem Lastenheft, die Grundlage für eine Machbarkeits- und Kostenschätzung.

Kostenschätzung

Dieses Dokument gibt einen Anhaltspunkt für die aufzuwendenden personellen und finanziellen Ressourcen für dieses Projekt. Die Machbarkeit bzw. die Aufwandsschätzung wurde auf Aufwand und technische Machbarkeit hin abgeklärt.

User Journey

Eine genau dokumentierte User Journey des aktuellen Zustands wurde erstellt und gibt Auskunft über die aktuellen Pain Points. So konnten die grossen Probleme frühzeitig erkannt werden und direkt in einer gewünschten User Journey ausgemerzt werden.

Moodboard / Benchmarking

Im ersten Schritt habe ich ein Benchmarking durchgeführt und geschaut, welche Produkte gibt es, die einen ähnlichen Funktionsumfang haben. Da die Funktionen bereits sehr genau definiert waren, habe ich vor allem versucht herauszufinden, wie diese Funktionen bei anderen Anbietern umgesetzt wurden und welche Methodiken, visuell und funktional, ich übernehmen kann. Zusätzlich wurde das Moodboard vervollständigt mit visuell ansprechenden Projekten, die vor allem für das Designkonzept Anhaltspunkte bieten.

Sitemap

Im Sitemap konnten die benötigten Screens und Funktionen bereits dokumentiert werden. Das Sitemap ist ein Resultat aus den Kundeninterviews und dem Pflichtenheft.

Design

Farben

Als Akzentfarbe habe ich mich für ein starkes Baltic Lime mit hohem Gelbanteil entschieden. Diese Farbe harmoniert gut mit der Schwarzabstufung und dem User Interface, das ein sehr helles und minimalistisches Design mit vielen Grautönen aufweist. Dazu kommen Signalfarben für die verschiedenen Stati. Diese Farben wurden als Primitives angelegt und einem semantischen Wert für das Designsystem zugewiesen.

Schrift

Für die “DM Sans” habe ich mich entschieden, weil ich eine Schrift wollte die spezifisch für digitale Oberflächen konzipiert ist und so eine hohe Leserlichkeit garantiert, auch bei kleinen Grössen. Die DM Sans hat geometrische Grundformen mit humanistischen Details, was zu einem eigenen Charakter führt, der zu keiner Sekunde an Leserlichkeit verliert.

Sizings

Text, Radien und Abstände haben ein einheitliches Sizing System erhalten. So stellt 1 bzw. 100 den “Normal”-Wert dar und davon gibt es entsprechend Abweichungen. So kann ein einheitliches Spacing zwischen Elementen und ein harmonisches Bild über Komponenten hinweg sichergestellt werden.

Icons

Auch hier sollen selbsterklärende, schlichte Icons her, die nicht die Aufmerksamkeit ergreifen aber auch alleine stehen können und die Benutzerführung intuitiver machen. So habe ich bei den Icons bewusst auf die bewährten Material Icons zurückgegriffen. Dabei habe ich mich für die gerundete, nicht gefüllte Varianten mit einer Stärke von 300 entschieden.

Logo

Die Software hat den Namen “Notifeat” erhalten, was sich aus “Notify” also Benachrichtigung und “eat” sprich essen zusammensetzt. Visuell habe ich mich für eine Wortmarke entschieden, die diverse Modifikationen innerhalb erhalten hat. So gibt es bspw. kleine Individualisierungen an Buchstaben wie den beiden “t” oder Punze des “o”, welche eine Benachrichtigung darstellt.

Grid

Das Grid ist konzipiert für ein iPad in der vertikalen Ansicht. Die Horizontale Ansicht ist genau so möglich arbeitet mit den selben Verhältnissen. Der ganze Inhalt, exkl. Navigation, wird dabei in ein dreier Grid aufgeteilt.

Frontend/Backend

Die bisher beschriebenen Details sind vor allem relevant für die Software, also das Backend. Das Frontend, sprich der Bestellablauf für Kund:innen, hat andere Anforderungen. Die Schriftfamilie wurde übernommen. Abstände, Textgrössen aber auch die Primärfarben unterscheiden sich hier grundsätzlich. Einige Elemente wie die Primärfarbe kann in der finalen Software über das Backend vom Kunden gesteuert werden.

Screendesign

LoFi / Wireframes

Der LoFi Prototyp visuell sehr primitiv gestaltet und auf die relevantesten Screens gehalten. Inhaltlich werden jedoch bereits alle Informationen angezeigt. Dies hat mir erlaubt, bereits in einer sehr frühen Phase ein User Testing durchzuführen, das Herausforderungen in der Bedienbarkeit aufgezeigt hat. Mit diesem LoFi Prototyp konnte ich mich stark auf ein möglichst einfaches und vor allem intuitives Interface-Konzept konzentrieren.

Learnings

Die Grundstruktur und Navigation zwischen den Screens hat bereits sehr gut funktioniert. Einige kleine Funktionen, z.B. das Versenden einer Rechnung, was aber auch nicht im Pflichtenheft festgehalten wurde, ist zusätzlich aufgenommen worden. Die grösste Änderung: Das gesamte Interface muss für die HiFi Prototypen auf Deutsch umgesetzt werden.

HiFi / Prototyp

Der HiFi Prototyp sind die ausgestalteten Screens, welche alle Learnings, Funktionen und das Design System beinhalten. Der Prototyp ist vollständig klickbar und enthält alle erforderlichen Funktionen, Menüs, Succesmeldungen und Notifications. Der Prototyp hat vier informelle Testings durchlebt und nur geringfügige Anpassungen erhalten.