UI/UX-FALLSTUDIE – REVAMP MRT-J

Dec 01 2022
Einführung Dieses Projekt wurde für eine Herausforderung im UI/UX Design Bootcamp durchgeführt, die von der Binar Academy veranstaltet wurde. Hier ist eine Fallstudie, die nicht mit MRT Jakarta verbunden ist.
Cover Challenge Revamp MRT-J

Einführung

Dieses Projekt wurde für eine Herausforderung im UI/UX Design Bootcamp durchgeführt, die von der Binar Academy veranstaltet wurde. Hier ist eine Fallstudie, die nicht mit MRT Jakarta verbunden ist. Dieses Projekt war für Final Project.

Überblick

MRT ist heutzutage ein beliebtes öffentliches Verkehrsmittel in Jakarta. Die Menschen nutzen MRT täglich, und daher ist es bequemer, wenn es eine App gibt, die für ihre Passagiere entwickelt wurde. MRT-J oder wie wir es MRT Jakarta nannten, ist eine App, die für MRT-Passagiere entwickelt wurde und es ihnen leicht macht, sicher und einfach direkt per Smartphone Transaktionen durchzuführen. Es gibt jedoch einige Probleme, mit denen MRT-J-Benutzer konfrontiert sind, wie z. B. die Notwendigkeit eines benutzerfreundlicheren UI-Designs, einer QR-Scan-Funktion für eine schnellere Zahlungsmethode, einer Push-Benachrichtigung für die Live-Verfolgung der Karte und einer In-App-Brieftasche, um den Benutzern zu helfen, ihren Transport zu budgetieren Geld. Daher besteht unser Teamziel darin, das UI-Design zu verbessern, Funktionen zu aktualisieren und dieser App neue Funktionen hinzuzufügen. Diese Forschung ist eine Zusammenarbeit zwischen dem UI/UX-Team und dem Produktmanager-Team.

Hintergrund

Wir möchten MRT-J zu einer benutzerfreundlicheren App für MRT-Passagiere ausbauen. Laut einer Umfrage des PM-Teams beträgt die Kundenzufriedenheit für die MRT-J-App nur 45 %. Wir möchten das UI-Design, den Ablauf und die Funktionen verbessern, um diesen Prozentsatz zu erhöhen.

Rolle:

  • Scrum-Master: Christian Ferianto
  • Produktmanager: Shelly Salfatira, Muhammad Akbar Syahwana
  • UI-Designer: Rizqi Ananda
  • UX-Forscher: Alexander Justine Santiago , Kirana Norma Chandra

Designprozess: Design Thinking

In unserem Designprozess haben wir uns entschieden, Design Thinking als unser wichtigstes Framework zu implementieren. Da Design Thinking menschenzentriert und lösungsorientiert ist, passt es zu den Anforderungen der Herausforderung. Dieses Design-Thinking-Framework besteht aus Empathie, Definieren, Ideenfindung, Prototyp und Testen.

Design-Thinking-Prozess

1️. Empathie

In dieser Phase werden wir drei Hauptaufgaben erledigen: Forschungsziele, Forschungsziele und Forschungsfragen. Dieser anfängliche Prozess ist die Phase, um die Probleme der MRT-J-App zu finden.

Bestehende App

Das bestehende Design von MRT Jakarta (2022)

Forschungsziel:

Verstehen Sie das Benutzerverhalten beim Ticketkauf und die unangenehme Benutzeroberfläche.

Überprüfen Sie MRT-J in den App Stores und im Play Store

Forschungsziele:

Wird den Ablauf des Ticketkaufs neu gestalten und die Benutzeroberfläche überarbeiten.

Forschungsfragen :

Die Umfrage wurde unter MRT-J-Benutzern geteilt. Für diese Umfrage stellen wir ihnen einige Fragen zur Leistung der MRT-J-App und zu ihren Problemen damit. Die Umfrage selbst besteht aus ein paar Fragen, aber wir haben uns entschieden, uns auf die 3 unten aufgeführten Fragen zu konzentrieren, um Probleme zu lösen, die häufig von Benutzern erlebt werden.

Nachdem wir etwas recherchiert haben, bekommen wir, was unsere Benutzer brauchen, und überlassen es uns, eine Annahme zu treffen, um weitere Beobachtungen zu erstellen.

Benutzerpersönlichkeit

Um uns dabei zu helfen, unsere Benutzer besser zu verstehen, wurde eine Benutzerpersönlichkeit erstellt. Eine Benutzerpersönlichkeit ist eine fiktive Figur, die eine Gruppe von Benutzern darstellt, die ein Produkt verwenden. Diese fiktive Figur wird unsere Interpretation von Benutzern humanisieren, da sie mehr als nur kalte Daten als Zahlen oder Umfrageergebnisse darstellt.

Benutzerpersönlichkeit

2. Definieren

Um die häufigsten Probleme von Benutzern gemäß den Antworten der Benutzerumfrage zu finden, haben wir Schmerzpunkte formuliert. Indem wir diese Probleme gruppieren, können wir leicht ihre Ähnlichkeiten, Muster oder Häufigkeit finden. Dies hilft Forschern auch, jeden einzelnen von ihnen zu vergleichen und ein größeres Bild davon zu sehen.

Schmerzstellen

Sobald wir die Schmerzpunkte des Benutzers verstehen, zeigen wir auf, wie wir diese Probleme lösen können. Um unser grundlegendes Ziel festzulegen, verwenden wir How-Might-We.

Wie könnten wir

3. Ideen entwickeln

Nachdem wir die Hauptziele gefunden und verstanden haben, was die Benutzer benötigen könnten, beginnen wir mit der Ideenfindung für die Lösung des gefundenen Problems. Wir haben Lösungen in Form von Funktionen entwickelt, die wir nacheinander finden und schließlich das Endergebnis finden, in welchem ​​Aspekt wir uns für die kommenden Updates verbessern müssen. Wir haben unsere Lösungsidee abgebildet, um ein Bild davon zu geben, welches unsere Priorität jetzt und ist welches zum nächsten Upgrade gehört.

Lösungsidee

4. Prototyping

Für eine bessere Benutzererfahrung haben wir für jede Funktion, die wir implementieren wollten, einen Benutzerablauf erstellt. Unsere Priorität ist es, einen Flow zu schaffen, der sich natürlich anfühlt und einfach zu bedienen ist.

Benutzerfluss

Funktionsflussdiagramm

Drahtmodell

Nachdem wir mit der Arbeit am User Flow fertig waren, haben wir mit Miro sofort am Wireframe gearbeitet.

Wireframe MRT-J

Designsystem

Nachdem wir unser Drahtgittermodell fertiggestellt hatten, erstellten wir das Designsystem, um unseren Prototyp konsistent zu halten. Konsistenz ist auch ein wichtiger Aspekt bei der Erstellung eines benutzerfreundlichen UI-Designs. Dies hilft den Forschern auch während des Designprozesses und der Dokumentation.

Designsystem MRT-J

Nachdem das Designsystem fertiggestellt war, wurde ein Prototyp basierend auf dem Designsystem und dem Drahtmodell erstellt.

High-Fidelity-MRT-J

Prototyp

Liste der Prototyperfahrung:

  • Rufen Sie den Startbildschirm auf
  • Scannen Sie den QR-Code an der MRT-Station & Live Location
  • In-App Wallet aufladen
  • Geschichtliche Aktivitäten

Nach Abschluss des Prototypendesigns führen wir einen Test durch. Wir bitten unsere Freiwilligen, unser Design auszuprobieren und ihre Kommentare abzugeben. Dieser Test ist wichtig, um herauszufinden, ob das von uns erstellte Design einfach genug zu bedienen ist und das Problem des Benutzers erfolgreich löst. Indem wir die Ergebnisse von Usability-Tests beobachten, verstehen wir besser, wie effektiv das Design für Benutzer ist.

Usability-Tests

Zieltests: Reagieren die neuen Funktionen von MRT-J auf die Bedürfnisse der Benutzer?
Schlüsselfrage: Die Rolle von MRT-J für MRT-Benutzer.

UT-Implementierung:

  • Unmoderierte Usability-Tests mit MRT-J-Benutzern.
  • Verwenden von „Maze“ für Szenarien und Feedback-Usability-Tests.
  • Alle Erklärungen zu Einführung, Regeln und Szenario befinden sich im Labyrinth.
  • Rufen Sie den Startbildschirm auf
  • Scannen Sie den QR-Code an der MRT-Station
  • Live-Standort
  • In-App Wallet aufladen
  • Geschichtliche Aktivitäten
  • Labyrinth-Ergebnis
  • Zugängliches und praktisches Display
  • Erläuterung der Funktion der Bezahlfunktionen.
  • Die Schriftgröße im Menü „Aktivitas“ ist nicht groß genug
  • Standort der MRT-Linie
  • Erstellen Sie eine Tutorial-Seite

Nach der Analyse des Problems, mit dem der Benutzer von MRT-J konfrontiert ist, stellen wir fest, dass die meisten Probleme auf eine schlecht gestaltete Benutzeroberfläche und Funktionen zurückzuführen sind, die behoben werden müssen. Nachdem wir das MRT-J-Design benutzerfreundlicher gestaltet und den Prototyp einschließlich der neuen Funktionen getestet haben, stellen wir fest, dass die von unserem Team neu gestaltete Version von den Benutzern gut genug abgeschnitten hat. Wir haben auch einige großartige Rückmeldungen von unseren Benutzern erhalten, die dem MRT-J-Entwickler helfen könnten, seine App zum Besseren zu überarbeiten.

Vielen Dank fürs Lesen. Wenn Sie Feedback haben, würde ich gerne von Ihnen hören. Sag Hallo unter [email protected] oder verbinde dich auf Behance , Dribbble , Linkedin .