Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

K-9 Mail App Redesign

Überarbeitung der K-9 Mail App im Rahmen des Projektwochenkurses „Figma: Eine Einführung“.

Die K-9 Mail App ist ein Open-Source Mail Client für Android.


Themenwahl

Ich habe mich für ein Redesign der K-9 Mail App entschieden, weil ich diese jeden Tag verwende und ich bei ihr noch Verbesserungsbedarf bezüglich UI and UX sehe.


Originale Screens und Beobachtungen

In den Screens unterhalb dieses Textes kann man die aktuelle Listenansicht der App sowie den aktuellen „Verfassen“ Screen für neue Emails sehen.

draft.pngdraft.png
list.pnglist.png

„Verfassen“ Screen

Beim „Verfassen“ Screen habe ich folgende Beobachtungen gemacht:

  • Der „Senden“ Button ist schwer zu erreichen und nicht leicht auffindbar
  • Die “Input” Felder sind nicht als solche auf einen Blick zu erkennen

Listenansicht

Bei der Listenansicht habe ich folgende Beobachtungen gemacht:

  • die Übersicht ist aktuell sehr “condensed” und ist nicht sehr übersichtlich
  • aufgrund dessen kommen Trennlinien zum Einsatz
  • der Hintergrund ist grau und bietet einen geringen Kontrast zur sekundäre Textfarbe
  • der Zeitpunkt der Mail ist aktuell nicht schnell erfassbar (zu klein, grau)
  • der Betreff reicht bis in die nächste Zeile, falls zu lang
  • der „Verfassen“ Button ist nicht leicht auffindbar und nicht leicht zu erreichen


Vorstellung des Prototyps und der Verbesserungen

Im unterhalb dieses Textes verlinkten Video stelle ich den Prototypen vor.

Unterhalb dieses Textes kann man Screenshots der beiden überarbeiteten Screens meines Redesigns sehen.

Verfassen.pngVerfassen.png
Listenansicht.pngListenansicht.png

Listenansicht

Ich habe die Listenansicht verbessert, indem ich:

  • einzelne Elemente auseinandergezogen und mehr “Whitespace” eingefügt habe
  • durch eine Hervorhebung des Textes die Zeitpunkte besser/schneller ablesbar gemacht habe
  • dafür gesorgt habe, dass der Betreff nicht in die nächste Zeile umbricht
  • den “Verfassen„ Button durch eine farbliche Hervorhebung, klare Bezeichnung und Positionierung unten rechts besser auffindbar und erreichbar gemacht habe

“Verfassen„ Screen

Ich habe den “Verfassen„ Screen verbessert, indem ich:

  • die Input Felder durch eine Umrandung klar als solche erkennbar gemacht habe
  • den “Senden“ Button durch eine farbliche Hervorhebung, klare Bezeichnung und Positionierung unten rechts besser auffindbar und erreichbar gemacht habe


Arbeitsweise mit Components & Co.

Components

Ich habe Elemente, die wiederverwendet wurden, als Komponenten angelegt. Dies umfasst Header, Avatar, List, Popup, Button, Tastatur und Input Komponenten. Der Avatar-Background wurde als Variante angelegt um schnell zwischen den vordefinierten Farben wechseln zu können. Die Input-Felder jedoch nicht, weil ein schneller Wechsel zwischen diesen nicht notwendig ist.

Color Styles

An Color Styles habe ich eine primäre Farbe angelegt, sowie jeweils eine primary und secondary Text-, sowie Hintergrundfarbe.

Sortierung

Ich habe versucht mein Layout übersichtlicher zu machen, indem ich zunächst alle Elemente in meinem Projekt in die folgenden drei Bereiche unterteilt habe: 

  • Projektbeschreibung & originale Screens
  • Komponenten & wiederverwendete Elemente
  • Flow 

Diese habe ich jeweils durch ein farbiges Rechteck schnell erkennbar gemacht. Außerdem sind die Komponenten jeweils passend zueinander angeordnet, z.B. Header und Input Felder.

Benennung

Bei der Benennung habe ich darauf geachtet, gleiche Komponenten/Elemente möglichst so zu benennen, dass sie mit dem gleichen Wort anfangen, gefolgt von einem Schrägstrich und dann die Variante/Namen derjenigen, was die Sortierung verbessert und Übersicht der Elemente in Figma deutlich erhöht.

Text Styles

Text wurde von mir ausschließlich unter Verwendung von Text Styles angelegt. Ich habe für dieses spezifische Projekt 3 Text Styles benötigt: 

  • H1 Roboto 36px, 42px
  • H2 Roboto, 30px, 35px
  • P Roboto, 26px, 30px


Figma Prototyp

Im eingebetteten Figma Projekt unterhalb dieses Textes kann man den Protoypen selbst ausprobieren und erfahren.


Persönliche Reflexion


Der Kurs hat mir die Grundlagen von Figma, wie z.B. den Umgang mit Komponenten und Co. sehr gut vermittelt. Dabei wurde besonders Wert auf das saubere Anlegen der Projekte gelegt, was mir bei einer zukünftigen kollaborativen Zusammenarbeit sicher zugute kommen wird.


Zudem wurden viele interessante Tipps zu Interfacedesign-bezogenen Themen gegeben, was mir sehr gefallen hat und während des Studiums bestimmt hilfreich sein wird.


Ein kleiner Negativpunkt waren für mich Aufgaben, die dafür angelegt waren, zu demonstrieren, wie schwer es ist, ohne Nutzung von z.B. Komponenten und Auto-Layout zu arbeiten - nur um in der anschließenden Aufgabe zu merken, wie viel einfacher und schneller das Anlegen unter Nutzung dieser funktioniert. An dieser Stelle hätte vielleicht auch die halbe Tabelle gereicht. 😉


Insgesamt bin ich jedoch sehr zufrieden mit dem Modul.

Ein Projekt von

Fachgruppe

Perspektiven und Social Skills

Art des Projekts

Keine Angabe

Betreuung

foto: Malte Völkner

Zugehöriger Workspace

🖍️ Figma: Eine Einführung

Entstehungszeitraum

Wintersemester 2021 / 2022