BlaBlaCar-Reverse-Engineering

Hallo zusammen, in der zweiten Herausforderung schlägt Ironhack eine „Reverse Engineering“-Aufgabe vor, d. h. wir werden anhand einiger Screenshots einer von uns ausgewählten App ein Wireframe aus einem Benutzerfluss erstellen, um schließlich einen interaktiven Prototypen zu bauen.

Wireframing ist eine Möglichkeit, einen Website-Service auf struktureller Ebene zu gestalten. Ein Wireframe wird üblicherweise verwendet, um Inhalte und Funktionen auf einer Seite zu gestalten, die die Benutzerbedürfnisse und Benutzerreisen berücksichtigt

Meine Wahl.

BlaBlaCar ist im Grunde eine mobile App, die Fahrer und Passagiere verbindet, die bereit sind, gemeinsam zwischen Städten zu reisen und die Fahrtkosten zu teilen. Meine Wahl fiel auf BlaBlaCar, weil es neben der weit verbreiteten Verwendung, mehr als 90 Millionen Benutzern in 22 Ländern, mir eine App mit einer sehr intuitiven, klaren und effizienten Benutzeroberfläche zu sein scheint, zusätzlich zu einem sauberen und ordentlichen Design.

Benutzerfluss.

Mein Hauptziel bei der Auswahl eines Benutzerablaufs war es, eine Abkürzung zu finden, um eine perfekte Reise zu buchen. Und ich habe es gefunden, indem ich den Abschnitt „Letzte Suchen“ verwendet und durch Ändern eines Datums die Interaktionen von 10 auf 8 reduziert habe.

Beschreibung des Benutzerflusses:

Wählen Sie eine Route im Abschnitt „Letzte Suchen“ > Tippen Sie oben auf die Stelle, an der die Suchdetails angezeigt werden > Interagieren Sie mit der Datumsauswahl und öffnen Sie den Kalender > Ändern Sie die Daten > Tippen Sie auf die Suchschaltfläche > Wählen Sie eine Route > Tippen Sie auf „Weiter“ und der Buchungsbildschirm wird bestätigt .

Der Prozess.

Nachdem wir uns für den Benutzerfluss entschieden hatten, bestand der nächste Schritt darin, die Elemente der Benutzeroberfläche (Inhalte, Symbole, Schaltflächen, Texteingaben, Auswahleingaben, Kalender, Bilder usw.) zu identifizieren.

Dann zeichnete ich einen Low-Fidelity-Prototyp, der die Elemente der verschiedenen Bildschirme und ihren Interaktionsfluss zeigt.

Im nächsten Schritt war Figma an der Reihe, zuerst wählte ich den Rastertyp, der am besten zur Anwendung passte (6 Spalten für alle Bildschirme außer dem Kalender, der 7 hätte), dann imitierte ich alle Elemente jedes Bildschirms ohne mit viel Liebe zum Detail, da es sich um einen Prototyp mit mittlerer Wiedergabetreue handelte.

Datei:

https://www.figma.com/file/S9SRXYQOtyfu18jZvGOqwQ/Francisco-Muriel---Challenge-2%3A-Wireframing-(Community)?node-id=0%3A1&t=0sPqqSWOxwpboVgI-1

Und schließlich habe ich den Benutzerfluss erstellt, um den interaktiven Prototyp zu zeigen.

Prototyp:

https://www.figma.com/proto/S9SRXYQOtyfu18jZvGOqwQ/Francisco-Muriel---Challenge-2%3A-Wireframing-(Community)?node-id=12%3A12&scaling=scale-down&page-id=0%3A1&starting-point-node-id=12%3A12

Fazit.

Es stellte sich als sehr interessante Herausforderung heraus, denn die Umkehrung des Verfahrens gibt Ihnen eine analytischere und globalere Sicht auf die Anwendung. Weniger auf Details achten zu müssen, lässt Sie bewusster in Interaktionsdesign, Usability und User Experience eintauchen.

Alles in allem war es eine aufschlussreiche und inspirierende Übung, die ich ohne zu zögern wiederholen werde, um weiter zu lernen.

Fühlen Sie sich frei, Fragen oder Kommentare zu diesem Thema anzugeben