App Redesign in der Praxis: UX/UI-Prozess für eine Endkunden-App
Als App Agentur mit einem starken Fokus auf ganzheitliche digitale Lösungen gehört UX/UI-Design für uns zum Alltag. Neben der technischen Umsetzung bieten wir daher auch eigenständige Designprojekte an – vom ersten Konzept bis zum finalen Design. Ein aktuelles Projekt, bei dem wir das Redesign einer mobilen App realisiert haben, zeigt exemplarisch, wie wir dabei vorgehen und worauf es uns besonders ankommt.
Das Projekt: Ein umfassendes Redesign der mobilen App von Lokbest – einem Anbieter digitaler Shop-Systeme für Selbstbedienungsläden im Lebensmitteleinzelhandel. Die App richtet sich an Endkund:innen und dient als zentrales Interface für das Einkaufserlebnis: Nutzer:innen können damit den Laden betreten, Produkte direkt am Regal scannen, den Einkauf verwalten und schließlich bargeldlos bezahlen. Unsere Aufgabe war es, die bestehende Anwendung funktional und visuell zu überarbeiten – ohne die technische Architektur neu aufzusetzen zu müssen. Ein typisches Beispiel für ein fokussiertes, unabhängiges UX/UI-Projekt.
1. Einstieg: Funktion verstehen – aus Sicht der Nutzer:innen
Am Anfang jedes Designprojekts steht für uns eine grundlegende Frage: Welche Aufgaben wollen Nutzer:innen mit der App erledigen – und in welchem Kontext?
Im Fall von Lokbest begleitet die App den gesamten Einkaufsvorgang in einem Selbstbedienungsladen. Das beginnt beim Zutritt zum Geschäft, geht über das Scannen von Produkten, das Verwalten des digitalen Warenkorbs, einem Pfandsystem bis hin zur Bezahlung über die App.
Dazu kommen Randfunktionen wie das Verwalten von Zahlungsmitteln, der Überblick über vergangene Einkäufe oder Hilfestellungen bei technischen Problemen vor Ort. Besonders wichtig: Viele dieser Interaktionen finden während des Einkaufs statt – Nutzer:innen haben nur eine Hand frei, sind in Bewegung. Das bedeutet: Jede Aktion muss schnell, eindeutig und unterbrechungsfrei funktionieren.
2. UX: Klare Abläufe für ein reibungsloses Einkaufserlebnis
Die größte Herausforderung bei Consumer-Apps wie Lokbest liegt oft nicht in der Funktionsvielfalt, sondern in der Friktion zwischen realer Welt und digitalem Interface. Ein Einkauf soll sich intuitiv anfühlen – nicht wie das Bedienen eines komplexen Tools.
Wir haben die zentralen Nutzungsszenarien identifiziert und entlang der realen Customer Journey neu strukturiert:
- Laden betreten per App (Türöffnung über QR oder NFC)
- Produkte scannen und in den Warenkorb legen
- Übersicht und Kontrolle des Einkaufs in Echtzeit
- Kontaktlose Bezahlung
- Quittung einsehen, Laden verlassen
Dabei haben wir darauf geachtet, dass die Abläufe visuell geführt, reduziert auf das Wesentliche und unkompliziert rückgängig machbar sind. Zum Beispiel: Wenn beim Scannen ein Produkt doppelt erfasst wird, muss das Entfernen genauso einfach sein wie das Hinzufügen.
Unser Designprinzip:
Gute UX sorgt dafür, dass Technologie im Hintergrund bleibt – und der Fokus auf dem Einkaufserlebnis liegt.
3. UI-Design: Orientierung, Vertrauen, Klarheit
Das visuelle Redesign hatte zwei zentrale Ziele: Vertrauen schaffen – besonders beim Bezahlen – und Orientierung bieten, auch wenn Nutzer:innen unter Zeitdruck stehen.
Unsere gestalterischen Leitlinien dabei:
- Kontrastreiche, leicht verständliche Oberflächen, die auch bei direktem Licht oder unter Zeitdruck gut nutzbar sind
- Deutliche Statusanzeigen beim Scannen, beim Warenkorb und beim Bezahlvorgang
- Fehlertoleranz: z. B. klare Rückmeldungen bei Scanfehlern, schwachem WLAN oder unvollständiger Zahlung
- Konsistenz bei Buttons, Icons und Farbcodes – um Wiedererkennbarkeit und Sicherheit zu stärken
- Minimalistisches Design mit Fokus auf Funktion statt Dekoration
Ein zentrales UI-Element ist z. B. die Checkout-Ansicht: Sie muss auf einen Blick zeigen, was im Warenkorb liegt, was bezahlt wird und wie – ohne überflüssige Schritte. Hier ging es nicht um Kreativität, sondern um maximale Klarheit.
4. Design, das sich umsetzen lässt
Da wir selbst auch entwickeln, gestalten wir Interfaces immer mit Blick auf eine saubere und wartbare Umsetzung. Für Lokbest haben wir ein modulares UI-System aufgebaut, das nicht nur konsistent aussieht, sondern sich auch effizient integrieren lässt.
Das beinhaltete:
- Figma-Komponenten mit klarer Struktur, dokumentierten Zuständen und Interaktionen
- Responsives Verhalten für verschiedene Gerätetypen
- Support für Fehler- und Offline-Zustände
- Begleitdokumentation für Entwickler:innen mit klaren Guidelines für Übergaben, Assets und Logik
Unser Anspruch:
Gutes UI ist keine statische Vorlage, sondern ein robustes System – eins, das Erweiterbarkeit, Wartung und Weiterentwicklung unterstützt.
5. Was wir aus dem Projekt gelernt haben
Das Redesign der Lokbest-App war ein Paradebeispiel für ein fokussiertes UX/UI-Projekt, bei dem es nicht darum ging, „mehr“ zu gestalten, sondern besser. Ein bestehendes Produkt wurde durch gezielte Designentscheidungen klarer, intuitiver und nutzerfreundlicher – ohne funktionale Einschränkungen.
Fünf Learnings aus dem Projekt:
- Mobile UX heißt: weniger Schritte, nicht weniger Funktion.
- Die reale Nutzungssituation bestimmt, was gute UX ist.
- Feedback ist zentral – besonders beim Bezahlen.
- Ein Designsystem ist kein Selbstzweck, sondern ein Effizienzwerkzeug.
- Weniger UI kann mehr sein – wenn die Abläufe stimmen.
Wenn ihr selbst an einem Redesign arbeitet – ob für eine Consumer App, ein digitales Tool oder ein neues Produkt – wir helfen gerne, aus komplexen Abläufen ein einfaches und Nutzer:innen zentriertes Erlebnis zu machen.
