Das dritte Projekt des Ironhack UX/UI Design Bootcamps

Das Team

Und dieses Mal das Team, nun ja, es gibt kein Team!
Es ist ein Soloprojekt.

Über das Projekt

Verbessern Sie unsere UI-Fähigkeiten. Dafür mussten wir eine relativ bekannte mobile Anwendung auswählen. Dann um zu sehen, was wir verbessern könnten.

Also entschied ich mich, an der mobilen Version der Discord-Anwendung zu arbeiten.

Ich habe diese Wahl getroffen, weil ich, wie viele meiner Ironhacker-Kollegen, ein Benutzer dieser App bin und es muss gesagt werden, dass die mobile Version nicht wirklich benutzerfreundlich ist.

Wir mussten zwischen 3 und 7 Seiten wählen, an denen wir arbeiten wollten. Also ging ich die App durch und traf meine Wahl basierend auf meinen eigenen Frustrationen, aber auch basierend auf den Elementen auf diesen Seiten, um verschiedene Aspekte der Benutzeroberfläche zu bearbeiten (Menü, Profil, Karten …).

Und vor allem diese sehr sehr sehr lange Speisekarte…

Visuelle Wettbewerbsanalyse

Da Discord im Grunde eine App für Gamer ist, habe ich mir angesehen, was die Mitbewerber ähnlich und/oder anders anbieten.

Die Farbpaletten

Hier sind die Farbpaletten, die von diesen drei Konkurrenten verwendet werden

Und hier ist die aus der mobilen Discord-App

Heuristische Analyse

Nach diesen kleinen Recherchen kehrt der sehr wilde Name der heuristischen Analyse zurück.

Ich folge erneut den zehn beliebtesten Usability-Heuristiken für das Design von Benutzeroberflächen und habe die heuristischen Fehler, die ich gefunden habe, identifiziert und in einer Tabelle notiert.

Sekundärforschung

Ich wollte auch mehr über die Marke erfahren, also habe ich meinem besten Freund Dr. Google ein paar Fragen gestellt.

Und ich konnte sehen, dass Discord ein Designsystem entwickelt hatte, das ich unbedingt studieren wollte.

Sie finden es hier unten auf der Seite.

Das erste, was mir aufgefallen ist, ist, dass die Farbpalette des Design Systems völlig anders ist als die, die in ihrer mobilen App verwendet wird …

Was ich machen will; was ich vorhabe zu tun

Verbinden Sie die Anwendung erneut mit dem Designsystem.
Korrigieren Sie alle Zugänglichkeitsfehler.
Vereinfachen und reorganisieren Sie dieses sehr, sehr, sehr lange Menü …
Fügen Sie Inklusivität hinzu

Verbinden Sie sich wieder mit dem Design System

Dafür habe ich einfach die im Dokument vorhandene Farbpalette und Schriftart genommen.

Ginto Nord für die Marke
Whitney für den Text

Das Nitro-Abonnement scheint im Mittelpunkt des Marketings von Discord zu stehen, aber es gibt keine Spur davon im Designsystem, also habe ich mich entschieden, Ginto Nord zu verwenden, um Nitro zu identifizieren, aber es in Kursivschrift anzuwenden, um den Effekt von Bewegung und Geschwindigkeit zu vermitteln, dass dies der Fall ist Name suggeriert.

Korrigieren Sie alle Zugänglichkeitsfehler

Hier habe ich hauptsächlich an den Kontrastfehlern gearbeitet, indem ich den Empfehlungen des Designsystems gefolgt bin und regelmäßig den Kontrast, die Größe der verwendeten Symbole und Texte überprüft habe.

Vereinfachen und reorganisieren Sie dieses sehr, sehr lange Menü …

Für diesen Punkt habe ich diese lange Liste einfach in ein Akkordeon-Menü umgewandelt. Ich habe auch die Option zum Abmelden zurückgesetzt, die sich ganz am Ende im 1. Tab des neuen Menüs befand.

Ich habe mich auch entschieden, einen Teil der Profilseite mit diesem Layout für den Spitznamen zu überarbeiten, der mit meinem mentalen Modell darauf klicken wollte, um ihn zu ändern (was offensichtlich nicht der Fall war…)

Fügen Sie Inklusion hinzu

Für dieses Ziel muss ich zugeben, dass ich nicht wusste, wie oder was ich tun sollte, so groß ist dieses Thema.

Also hatte ich die Idee, ein anderes Farbthema mit dem offiziellen „Blurple“ von Discord als Standardthema hinzuzufügen, dann ein rosa Thema und zwei Themen mit neutraleren Farben.

Und ich habe auch ein Raketensymbol (sehr männlich) für ein neutraleres Symbol modifiziert und seinem Zweck besser angepasst.

Überlagerung von Aktivitäten

Ich habe auch den Spieleabschnitt überarbeitet, um ihn lesbarer und luftiger zu machen, indem ich das Layout der Karten geändert habe.

Überblick über das Vorher & Nachher

Hier sind die Links zu den beiden Prototyp-Flows, wenn Sie das Akkordeon-Menü und das Gamepad-Symbol mit seinem Overlay testen möchten.

Erster Link

Zweiter Link

Was habe ich aus diesem Projekt gelernt?

Ich hatte eine tolle Zeit bei dem Projekt, ich habe es wirklich genossen, in die Benutzeroberfläche einzutauchen und mehr über Figma zu lernen.

Mir ist auch aufgefallen, dass, obwohl wir uns bei diesem Projekt wirklich auf UI konzentriert haben, die Fähigkeiten, die ich in UX bei den beiden vorherigen Projekten gelernt habe, auch nützlich waren: Visuelle Konkurrenzanalyse und Sekundärforschung, die mich zum Design System geführt haben.

Fühlen Sie sich frei, einen Kommentar zu hinterlassen, wenn Sie Vorschläge haben, was ich hätte besser machen können, oder auf Fehler hinweisen, die ich möglicherweise gemacht habe.
Danke fürs Lesen.