Figma Einführung: VW We Connect Redesign

Im Rahmen der Projektwochen wurde uns der Figma-Kurs von Master-Student Malte Völkner empfohlen. Ziel des Kurses war es, Figma als Software kennenzulernen und Arbeitsdateien für mögliche Kollaborationen unter Designern oder mögliche Hand-Offs aufzubereiten. Dafür trafen wir uns drei Mal die Woche in Präsenz und erledigten darüber hinaus selbstständig Aufgaben, unter anderem ein Abschlussprojekt in Form eines Redesigns eines Produktes unserer Wahl.

Kennenlernen des Tools Figma

Grundlagen

Zu Beginn beschäftigten wir uns mit der Benutzeroberfläche und den Grundlagen von Figma, um die Software zu verstehen und anwenden zu können. Hier tasteten wir uns langsam voran, indem wir beispielsweise einfache Icons und Komponenten nachbauten. Bereits nach kurzer Zeit wagten wir uns an komplexere Interfaces und bildeten komplette Websites oder Apps ab.

Komponenten, Varianten und Instanzen.

Anschließend lernten wir die Vorteile von Figma kennen, indem wir bereits gestaltete Interfaces mit der Verwendung von Komponenten reproduzierten. So lassen sich einzelne Bereiche im Interface global anpassen. Erweitert wurden diese später durch das Anlegen unterschiedlicher Varianten. Mit dem angeeigneten Wissen näherten wir uns dem Abschlussprojekt des Kurses.

Abschlussprojekt: VW We Connect Redesign

Zum Schluss galt es eine von uns genutzte App zu optimieren und als Prototypen umzusetzen. Hierbei sollten wir auf Auffälligkeiten im Interface sowie in der Nutzerführung eingehen.

Analyse

Zunächst widmete ich mich der Analyse des bestehenden App-Designs. Relativ schnell ergab sich, dass es viele einzelne Punkte gab, die sich optimieren ließen, weswegen ich mich auf die im folgenden Bild deklarierten Punkte konzentrierte.

Design auf Basis von Komponenten

Anschließend begann ich mit der Optimierung der einzelnen Auffälligkeiten. Dafür begann ich zunächst die einzelnen Styles der originalen App zu übernehmen und einzelne Komponenten nachzubauen. Anschließend integrierte ich meine zusätzlichen Anforderungen, dazu gehörten beispielsweise:

Optimierungen im Interface

Hinzufügen einer Beschreibung zu den Icons, sodass eine eindeutige Klassifizierung möglich ist.
Optimierung der Bottom Bar. Der aktive Status wird nun eindeutig deklariert.
Bei Toggle Buttons für Aktionen wird nur noch der aktuelle Zustand angezeigt.
Tabellen zur Auswahl wurden durch Dropdowns oder Toggles ersetzt.

Optimierungen in der Nutzerführung

Einstellungen wurden im Bereich Konto zentralisiert und für ein schnelleres Erfassen um Icons ergänzt.
Der Status des Fahrzeugs wird nun direkt auf der Startseite unter „Fahrzeug“ angezeigt, sodass Nutzer:innen Statusmeldungen direkt bemerken.
Der Kraftstoff- und Ladestand wurde um eine eindeutige prozentuale Anzeige ergänzt.
Schnellaktionen wurden auf der Startseite komprimiert.
Der Ort des geparkten Fahrzeugs wird nun auf der Startseite angezeigt.
Die Daten der letzten Fahrt lassen sich nun auf der Startseite einsehen.

In den folgenden Anhängen sind die ausgestalteten Screens und der Prototyp in Figma zu sehen.

Fazit

Durch den Einführungskurs von Malte lernt man innerhalb von zwei Wochen einen sicheren Umgang mit dem Tool Figma und eine praxisnahe Erläuterung für die Aufbereitung der Dateien für andere Teammitglieder. Zusätzlich werden einem erste Insights in Interface Guidelines, Plug-Ins, nützliche Ressourcen und weitere Tools ans Herz gelegt.

Auch wenn ich bereits erste Erfahrungen in Figma hatte, hat der Kurs sehr viel Spaß gemacht und bewies mit praxisnahen, selbstständigen Übungsaufgaben eine hohe Lernkurve.