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

System:Relevanz | Redesign Deutsche Post

System:Relevanz | Redesign Deutsche Post

Im Kurs von Sebastian Kaim ging es darum, systemrelevante digitale Angebote auf Schwächen im User Interface zu analysieren und anschließend ein Redesign mit Figma anzufertigen. Mithilfe von Vorträgen und verschiedenen Übungen lernten wir, was Qualität im Interfacedesign ausmacht und welche Kriterien ein funktionierendes Designsystem erfüllen muss.

Einleitung

Systemrelevante Dienstleistungen beschränken sich häufig auf nur einen einzigen Anbieter, daher ist es besonders wichtig, dass die digitalen Angebote dieser Dienstleiter von einer möglichst großen Nutzergruppe problemlos in Anspruch genommen werden können. Als systemrelevanten Anbieter wählte ich für meine Case-Study den Online-Briefmarken-Service der Deutschen Post, da es meines Wissens nach nicht wirklich ernstzunehmende Alternativanbieter im Briefversand gibt. Der Service soll es Kunden ermöglichen, einfach und unkompliziert das richtige Porto für verschiedene Versandarten zu ermitteln und anschließend die Marke zu kaufen und auszudrucken.

Status Quo

Derzeit besteht die Seite der Deutschen Post aus zwei Hauptseiten, der Landingpage und dem Shop. Je nachdem, wie die NutzerInnen das Angebot aufrufen, kommen sie auf eine dieser Seiten. Sucht man beispielsweise bei Google nach dem Begriff „Post“, wird man auf die Landingpage verwiesen, bei dem Begriff „Briefmarke“ wird der Shop aufgerufen. Die beiden Seiten ähneln sich im Aufbau, unterscheiden sich jedoch im Design:

2.png2.png
3.png3.png

Bei der Analyse verschiedener User Flows stellte ich fest, dass man als Kunde häufig einige Anläufe braucht, um das gewünschte Produkt zu finden. Der Checkout-Prozess lief meisten problemlos ab, bot aber aufgrund veralteter Patterns auch einiges an Verbesserungspotenzial.

UserFlow_PortoBerechnung.pngUserFlow_PortoBerechnung.png
UserFlow_Briefmarke.pngUserFlow_Briefmarke.png

Opportunity Areas

11.png11.png
12.png12.png
14.png14.png
13.png13.png
15.png15.png

Umsetzung

Mein Hauptziel war es, die Landingpage und den Shop zusammenzuführen, da abgesehen vom Design, die beiden Seiten nahezu identische Inhalte beinhalteten. Dazu teilte ich die Seite in zwei Abschnitte ein: Der obere Teil, der sich an Gelegenheitskunden richtet, beherbergt einen Portorechner, der Schritt für Schritt zur nötigen Versandmarke führt. Im unteren Teil befindet sich eine Schnellauswahl, die sich an erfahrene NutzerInnen richtet, die bereits wissen, welches Porto sie benötigen. Durch die Überarbeitung und Modernisierung einzelner Interface-Elemente wollte ich außerdem für eine verbesserte Click-Through Rate und Task Success Rate sorgen.

Figma Prototyp

Design System

Im Zuge der Case Study sollte ein Design System angelegt werden, welches mithilfe von Komponenten theoretisch von anderen DesignerInnen und EntwicklerInnen problemlos genutzt werden kann. Mein Design System ist, mit ein paar Ausnahmen, stark an der Coporate Identity der Deutschen Post ausgerichtet, Icons wurden aus Copyright-Gründen beispielsweise ausgetauscht.

DesignSystem1.pngDesignSystem1.png
DesignSystem2.pngDesignSystem2.png
DesignSystem3.pngDesignSystem3.png

Fazit

Durch die vielen eingeladenen Gäste aus verschiedenen größeren Unternehmen konnte ich einen guten Einblick in den realen Arbeitsalltag von UI-DesignerInnen bekommen. Leider war das in meinem bisherigen Studienverlauf noch nicht der Fall. Durch die geschilderten Erfahrungen habe ich relativ schnell gemerkt, dass ich später nicht im 2D-UI-Design arbeiten möchte, sondern mich mehr auf 3D-Interaction-Design spezialisieren möchte. Trotzdem hat mir der Kurs viele neue Kenntnisse vermittelt und mein Verständnis für das Arbeiten mit Komponenten gestärkt. Besonders gut hat mir Sebastians klare Kursstrukturierung gefallen und das umfangreiche Feedback.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Sebastian Kaim

Zugehöriger Workspace

System:Relevanz — Mit besseren Interfaces mehr erreichen

Entstehungszeitraum

Wintersemester 2021 / 2022

Keywords