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

DHL - iOS Redesign

„Es gibt Millionen von Apps, aber nur wenige davon sind richtig gut.

Oft sind es die Details, die eine gute User Experience ausmachen: Positive Überraschungen, harmonische Animationen, gewitzte Wortwahl, typografischer Feinschliff. Indie-Apps von kleinen Firmen bleiben durch Liebe zum Detail und durch erkennbare gestalterische Haltung konkurrenzfähig.“

"Verfolgen" / "Pakete"

In meinem Entwurf habe ich die beiden Tabs „Verfolgen“ und „Empfangen“ zusammengefasst. Unter „Pakete“ sind nun einheitlich alle empfangenen und versendeten Pakete zu finden, egal ob diese zu einer Packstation, nach Hause oder an einen Paketshop geliefert werden.

Der Fokus der Neugestaltung dieses Bereichs lag in der besseren Darstellung des aktuellen Staus bzw. der Handlung welche man zu erfüllen hat.

Durch farblich kodierte Icons wird auf den ersten Blick sichtbar, ob das Paket bereits zugestellt wurde, es sich im Versand befindet oder ob man angewiesen ist das Paket beispielsweise in einer Filiale abzuholen oder auch fehlende Daten nachzureichen.

Auf der Paket-Detail-Seite wird nun der Absender klarer dargestellt, die einzelnen Schritte, die das Paket bereits zurückgelegt hat, werden in einer übersichtlichen Zeitachse aufgelistet. Ein Usecase, auf welchen besonders wertgelegt wurde, ist die Weiterleitung des Paketstatus an den Empfänger oder einen Freund – somit wurde die Teilen-Funktion mehr in den Vordergrund gerückt, als dies bei dem Original der Fall war.

Frame 21.pngFrame 21.png

"Versenden"

In der aktuellen Version versucht die DHL alle Funktionen rund um das Versenden eines Pakets in einer Ansicht unterzubringen.

Um für den Nutzer Klarheit zu schaffen, unterteilte ich hier in zwei Aktionstypen: „Paket selber versenden“ oder „Paket abholen lassen“.

Darunter werden letzte Aktionen angezeigt, sodass vergangene Paketversand-Konfigurationen schnell gefunden und ausgewählt werden können.

Über ein Modal öffnet sich nun der Paket-Konfigurationsbereich.

Die Paket-Art, mögliche Versicherungen und Zuatzoptionen sind nun klarer gekennzeichnet sowie größer und übersichtlicher dargestellt.

Sobald alle erforderlichen Felder bearbeitet/ausgewählt wurden färbt sich der „Weiter“-Button rot und zeigt dem Nutzer die aktuell auf ihn zukommenden Kosten an.

In den weiteren Schritten, „Empfänger- und Absenderwahl“ bzw. „Eingabe“ sowie bei der „Überprüfen“-Seite, liegt der Fokus auf den selben Prinzipien: Eingabefelder sind größer und somit besser bedienbar gestaltet und gleichzeitig wird mehr Wert auf Gliederung und somit hierarchische Hervorhebung gelegt, als dies vorher der Fall war.

Frame 23.pngFrame 23.png

Frame 25.pngFrame 25.png

Frame 27.pngFrame 27.png

"Standorte"

Im dritten Tab „Suche“ habe ich der Hauptinteraktion, nämlich der Suche, mehr Gewichtung gegeben. Die ursprüngliche Funktionen „Sucheinstellungen“, welche eigentlich Filter sind, und „Standort aktualisieren“ wurden an das iOS Design angepasst. Hier verzichtete ich bewusst auf eine Beschriftung der Icons, da diese dem Nutzer schon aus anderen iOS Apps (zum Beispiel „Karten“) bekannt sind. Dies war eine gute Möglichkeit, um etwas mehr Ruhe zu schaffen und Übersichtlichkeit zu erreichen.

Frame 24.pngFrame 24.png

CI

DHL hat ein sehr detailiertes CI und gibt auch für Apps teils sehr restriktive Vorgaben. In meinem Redesign habe ich grundsätzlich versucht mich an dieses zu halten. Als Font verwende ich die DHL Hausfont „Delivery“, bei Icons habe ich auf von DHL bestehende zurückgegriffen und diese vereinzelt erweitert durch Icons der SF Pro. Mein visuelles Ziel war es, die Farbkombination gelb-rot des CIs gezielt zu verwenden, um das bekannte DHL-Gefühl mehr in der App widerzuspiegeln. Gelb wird dabei nur als Schmuckfarbe verwendet, wobei rot klickbare oder ausgewählte Elemente kenntlich macht sowie besondere Informationen in den Fokus rückt (wie beispielsweise Preisangaben).

Vorangegangene Arbeiten im Kurs

MoritzGuehring_HA02.pdf PDF MoritzGuehring_HA02.pdf

MoritzGuehring_HA04.pdf PDF MoritzGuehring_HA04.pdf

MoritzGuehring_HA07.pdf PDF MoritzGuehring_HA07.pdf

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Frank Rausch

Entstehungszeitraum

Sommersemester 2020