UI für eine Chat-Anwendung

Designprozess

Da der Kunde kein MVP benötigt, konzentriert sich unser Team auf das Design. In enger Zusammenarbeit mit dem Kunden folgen wir den Prinzipien von Design Thinking und Double Diamond, um mit Invision einen interaktiven Prototyp zu erstellen. Wir testen das UI-Design mit echten Usern. Dadurch können unsere Designer Änderungen schnell vornehmen und Kosten reduzieren, die bei Change Requests normalerweise entstehen.

Marktforschung

Um ein intuitives User-Interface zu erstellen, lässt sich das Team von den populären, auf dem Markt erhältlichen Messaging-Anwendungen inspirieren. Unsere Designer analysieren Facebook Messenger, WhatsApp und WeChat und identifizieren Ähnlichkeiten in der Positionierung der UI-Elemente und den Farbschemata, um sie für unser Interface zu übernehmen.

Use Cases

Als nächstes werden Use Cases der App identifiziert. Dafür entwickelt das Team fiktive Charaktere potentieller User und modelliert mögliche Anwendungsszenarien: 

1. Ein User hat sein Budget überschritten und braucht Hilfe von Freunden oder Familie

2. Ein User befindet sich in einer unvorhergesehenen Situation, wo er dringend Geld benötigt.

3. Ein User bezahlt regelmäßig Rechnungen über das Handy, weil es schneller und bequemer ist.

4. Ein User schickt häufig Geld an seine Verwandten.

UI-Skizzierung

Als nächstes wird der Geldtransfer durchgedacht und skizziert. Um Geld von einem anderen User zu erhalten, muss man: 

1. sich anmelden
2. zum Feed gehen
3. auf "Suche" tippen
4. zur Kontaktliste gehen
5. den gewünschten Kontakt wählen und auf den Avatar/Namen tippen
6. nach Geld über eine Textnachricht fragen

Die Person klickt auf den Button in der rechten oberen Ecke, um den Transaktionsbildschirm zu öffnen. Nach der Zahlung geht er/sie zurück zum Chat und erhält eine Zahlungsbestätigung.

Prototypisieren und Testen

Die Designer von Softeq stellen sicher, dass reale User einfach durch das App-Interface navigieren und die gewünschte Aktion schnell ausführen können. Basierend auf den Testnutzer-Feedback wird das Design korrigiert und ein Flussdiagramm erstellt - eine grafische Darstellung der Schritte, die für einen Zahlungsvorgang erforderlich sind. Das Flussdiagramm hilft den Entwicklern, besser zu verstehen, wie Bildschirme und grafische Elemente miteinander verbunden sind und auf welchen Button der User tippen muss, um zu einem anderen Bildschirm zu gelangen.

UI Design: Auswahl der Farbpaletten

Bei der Auswahl des Farbschemas für das App-UI folgen unsere Designer dem Unternehmensstil des Kunden.

Sie designen mehrere Screens und schicken sie dem Kunden zur Genehmigung.

Das Ziel ist es, die maximale Anzahl von Objekten zu zeigen - Videos,Sprachnachricht, Überweisungsbestätigung, um die UI-Features mit dem Kunden frühzeitig abzustimmen.

Entsprechend dem Kundenfeedback werden Korrekturen vorgenommen. Nun sind die Screens zur Programmierung bereit.