nomitri/nomitri-hero.webp

Self-Checkout in Deutschland etablieren

Diese Fallstudie beschreibt die Evaluation und Optimierung der Retail Self-Checkout App von Nomitri. Die Analyse erfolgte basierend auf einer umfassenden Leistungsprüfung von über 250 Items. Die UX-Leistung der App ist insgesamt schlecht. Ihre UX wird vor allem durch Usability-Probleme im Zusammenhang mit visuell fehlender Hierarchie, intransparenter Kommunikation und nicht vorhandener Design-System-Methodik konterkariert. Im Anschluss an die Analyse wurde daher ein skalierbares Design System erschaffen und auf Basis dessen der aktuelle MVP des Produktes neu designt.

Der Innovator Nomitri entwickelt anspruchsvolle KI-Lösungen, die intelligent komprimiert auf jedem Smartphone laufen. Den Fokus für das erste Produkt setzt das 2019 gegründete Start-up auf Lösungen für den Einzelhandel. Besucher nutzen ihr Handy, um bequem und einfach Produkte ihrem Einkauf hinzuzufügen und anschließend die Zahlung per App freizugeben – autonom und kontaktlos. Der Vorteil gegenüber Amazon Go & Co? Es sind keine Kameras oder große Server-Strukturen notwendig und die Video-Daten bleiben auf dem Smartphone des Nutzers. So haben Einzelhändler einen klaren Kostenvorteil und Nutzer profitieren von hohem Datenschutz.

Ergebnisse

Metro

als Partner

Edeka

als Partner

2.5m

Funding

Metadaten

Industry
AI
Size
10-20 Mitarbeiter
Value
10.000€
Tasks
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
    Framer
Date
2021 - 2022
Website Link
  1. 1
    Das Ziel
  2. 2
    Analyse
  3. 3
    Design System: Kommunikation
  4. 4
    Scan Animation
  5. 5
    Scan Dots
  6. 6
    Scan Blur
  7. 7
    Bild Feedback
  8. 8
    Design System: Komponenten
  9. 9
    Ergebnisse und Ausblick

Das Ziel

Nomitri steht vor der Herausforderung, die App als Lösung in einer anstehenden Präsentation vor Einzelhändlern zu verkaufen. Zu diesem Zeitpunkt besitzt das Team keinen Designer. Die Oberfläche der App wurde von den Entwicklern mitgestaltet. Die Gründer erkannten, dass die App visuell ansprechender und transparenter gestaltet werden muss. Nomitri benötigt ein zielgruppengerechtes und ansprechendes Design für die Endnutzer.

nomitri nomitri alt camera
nomitri nomitri alt camera
nomitri nomitri alt cart
nomitri nomitri alt cart
nomitri nomitri alt cart empty
nomitri nomitri alt cart empty
nomitri nomitri alt edeka
nomitri nomitri alt edeka
nomitri nomitri alt intro
nomitri nomitri alt intro
nomitri nomitri alt qr
nomitri nomitri alt qr
nomitri nomitri alt registration
nomitri nomitri alt registration
nomitri nomitri alt success
nomitri nomitri alt success

Analyse

Vorgehensweise

Bei einem eintägigen Workshop in Berlin mit den Gründern und Entwicklern tauchten wir tief in die Vision von Nomitri ein. Wie soll Nomitri auf dem Markt wahrgenommen werden? Wer ist unsere Zielgruppe und welche Erwartungen hat sie an die App? Welche Daten zum Nutzerverhalten existieren, die sich für das Design verwenden lassen? Hier ins Detail zu gehen ist besonders spannend, da der Workshop die Basis für den späteren Erfolg des Designs bietet.

Exkurs: Dev & UX

Die Ziele der Gründer waren klar: Sie benötigen eine schnell adaptierbare Lösung, mit einem Fokus auf Ästhetik und ein Design, das die wertvollsten KPI erhöht. Für mich war es jedoch ebenso wichtig zu erfahren, wie wir dieses Design an das Entwicklungsteam geben. Denn das schönste und durchdachteste Design ist wertlos, wenn es die Entwicklung unverhältnismäßig lang beeinträchtigt. Aufgrund meiner Vorerfahrungen im Software Development konnten wir schnell Aspekte sammeln, die für die Entwicklung zu berücksichtigen sind.

Die aktuelle Lösung

Im Anschluss an die Positionierung arbeiteten wir uns gemeinsam durch die aktuelle Lösung der App, um alle jetzigen und auch zukünftigen Anwendungsbereiche zu verstehen und auf deren Funktionalität zu prüfen. Wir schlossen den Workshop mit einer Definition und Sammlung von User Stories ab, die den Umfang des Projektes festlegen sollten:

  • Design Guidelines
  • Komponentenbibliothek
  • Content Guidelines
  • Journey & Wireframes
  • User Interface & Präsentation

Design System: Kommunikation

Grundlagen

Im ersten Schritt erstellte ich ein Design System, dass mit spielerischen und farbenfrohen Elementen kommuniziert. Simple Formen bei den Komponenten sorgen für hohes intuitives Verständnis beim Endnutzer. Das Design System soll helfen, die App skalierfähig und konsistent zu gestalten. Dafür sorgt eine Farbpalette, eine Beschreibung der Typografie und Abstandsregeln.

Farben
Farben
Typografie
Typografie
Grid & Spacing
Grid & Spacing
Werte
Werte
Grid & Spacing #2
Grid & Spacing #2
Accessibility
Accessibility

Communication Guidelines

Einen hohen Stellenwert für die App hat das Thema Kommunikation. Da der Nutzer beim Scannen von Lebensmitteln nicht immer auf das Smartphone blickt und die KI an wenigen Beispielen noch fehlerhaft scannt, sind verschiedene Arten von Feedback notwendig.


Die Übermittlung von Feedback ist einer der wichtigsten Schritte, um sicherzustellen, dass eine künstliche Intelligenz ihren Nutzern ihren Zustand und ihre Absicht effektiv mitteilen kann. Integrität und Offenheit in der Kommunikation erhöhen nicht nur das gefühlte Maß an Sicherheit und Konformität für Nutzer, die Informationen weitergeben, sondern sind auch notwendig, um Daten Leben einzuhauchen und komplexen Berechnungen und Formeln ein Gefühl von Empathie zu verleihen.

Animationen

Bei Nomitri verkörpern Animationen den Stil des Start-ups, betonen die Verbindung zwischen Elementen, weisen auf Zustände und Aktionen hin und geben Feedback. Weiterhin nutzen wir Animationen, um Emotionen zu vermitteln und der künstlichen Intelligenz die Möglichkeit zu geben, auf unbeschwerte Weise zu kommunizieren und so Vertrauen, Sicherheit und Konformität zu erhöhen.

Scan Animation

QR Code Scan

QR Code Scan

QR Code Scan

Durch das Einbinden einer subtilen Animation wird eine Scanfunktion als aktiver wahrgenommen. Nomitri verwendet die typische Animation, die mit dem Scanvorgang verbunden ist. Ein dünner Balken, der sich von einer Seite zur anderen bewegt und ein transparentes Rechteck hinterlässt.

Scan Dots

nomitri nomitri dots
nomitri nomitri dots

In der Animation sind Kreise eines der vorteilhaftesten Elemente, da ihre einfache geometrische Form ein leichtes Verständnis ermöglicht und eine Vielzahl von Formen und Bewegungen erlaubt. Bei /nomitri/nomitri-Lösungen werden Status und Fortschritt durch Töne und Punkte kommuniziert, die von verschiedenen Bewegungspfaden begleitet werden.

Scan Blur

nomitri nomitri scanblur
nomitri nomitri scanblur

Der Scanning Blur besteht aus zwei um 45° gedrehten, stark verschwommenen, kegelförmigen Radialverläufen mit 30 % Deckkraft, die zu 75 % außerhalb des oberen oder unteren Bildschirms platziert sind. Sie verändern und betonen den aktuellen Zustand.

Bild Feedback

nomitri nomitri bildfeedback
nomitri nomitri bildfeedback

Feedback Clouds bieten eine visuelle Darstellung potenziell verbesserungswürdiger Scans. Der Benutzer kann diese sehen, wenn er ein unbekanntes Ereignis klären oder korrigieren muss. Dadurch wird die Lernkurve für die korrekte Verwendung der App erhöht.

Design System: Komponenten

Kontrast als Herausforderung

Während der Auswahl der Farbwerte und der Erstellung der Komponente wurde eine Schwierigkeit ganz besonders hervorgehoben: Die App zeigt größtenteils das Kameradisplay an, das wiederum von oben auf den Einkaufswagen gerichtet ist. Supermärkte haben verschiedene Wagen- und Bodenfarben, von hell bis dunkel. Durch zahlreiche Kontrast-Tests konnte ich das beste Ergebnis finden: Die UI ist standardmäßig in einem Dark Mode, mit einem abdunkelnden Overlay oberhalb der Kamera und starken, farblich von weiß/hellbraun und schwarz erhöhten Kontraste. Wichtige Elemente werden zusätzlich umrahmt.

Einzigartiger Hintergrund

Um ein Gefühl von Bewegung und Lebendigkeit zu vermitteln, werden im Hintergrund verschwommene, sich bewegende Ellipsen verwendet. Ihre Struktur besteht aus mehreren kreisförmigen geometrischen Elementen in den Primärfarben des Design Systems, die zusammen und getrennt voneinander bewegt werden können. Bewegungen sollten jedoch mit großer Sorgfalt verwendet werden, wenn es mit Bewegung eingesetzt wird, um die Aufmerksamkeit des Nutzers zu erhalten.

nomitri nomitri background
nomitri nomitri background

Atomic Design

Für die Entwicklung von Designsystemen bietet das atomare Design eine klare Methodik. Die Fähigkeit, vom Abstrakten zum Konkreten zu gelangen, wird durch das atomare Design ermöglicht. Dadurch sind wir in der Lage, Systeme zu entwerfen, die Konsistenz und Skalierbarkeit fördern und gleichzeitig die Dinge in ihrem Kontext veranschaulichen. Indem wir ein System zusammensetzen, anstatt es zu dekonstruieren, können wir es von Anfang an konstruieren, anstatt uns im Nachhinein Muster herauszupicken.

Select Input
Select Input
Tertiary & Icon Buttons
Tertiary & Icon Buttons
Lists
Lists
Primary & Secondary Buttons
Primary & Secondary Buttons
Text Input
Text Input

Ergebnisse und Ausblick

nomitri nomitri screen cart1
nomitri nomitri screen cart1
nomitri nomitri screen cart2
nomitri nomitri screen cart2
nomitri nomitri screen cart3
nomitri nomitri screen cart3
nomitri nomitri screen scan1
nomitri nomitri screen scan1
nomitri nomitri screen scan2
nomitri nomitri screen scan2
nomitri nomitri screen scan3
nomitri nomitri screen scan3
nomitri nomitri screen scan4
nomitri nomitri screen scan4
nomitri nomitri screen login0
nomitri nomitri screen login0
nomitri nomitri screen login1
nomitri nomitri screen login1
nomitri nomitri screen login2
nomitri nomitri screen login2
nomitri nomitri screen login3
nomitri nomitri screen login3
nomitri nomitri screen login4
nomitri nomitri screen login4
nomitri nomitri screen login5
nomitri nomitri screen login5
nomitri nomitri screen onboarding1
nomitri nomitri screen onboarding1
nomitri nomitri screen onboarding2
nomitri nomitri screen onboarding2

Ausblick

Nach dem Prinzip "The best UI is no UI" kann eine Verbesserung der AI dazu beitragen, Fehlerraten zu verringern und somit den Nutzer zu weniger Interaktionen zu fordern. Zudem können großflächigere Tests der App dazu beitragen, Feedback von Nutzern zu sammeln und diese zur Verbesserung der App zu nutzen.

Justin Schmitz
Wie eine Zeitung, die dir jeden Monat an die Haustür geliefert wird - Erfahre das Neueste über Digital Health User Experience.
Wenn du dich für den Newsletter anmeldest, stimmst du zu, elektronische Nachrichten von mir zu erhalten.