01 Typo in Bewegung

Aufgabenstellung

In der ersten Übung sollten wir ein Interface gestalten, bei dem Typografie im Vordergrund steht. Dafür mussten wir eine Desktop und eine Mobile Version erstellen und zeigen, wie man Texte sinnvoll aufbaut und ordnet z. B. Überschriften, Fließtext, kurze Infobausteine, Bildunterschrift, damit die Inhalte schnell verständlich sind. Als Grundlage gab es drei Textoptionen emotional, sachlich, technisch. Ich habe den sachlichen Text zum Thema Organspende gewählt und ein passendes Bild integriert. Optional konnte man zusätzlich eine zweite, freiere Variante umsetzen, um typografisch stärker zu experimentieren.

Wichtig war dabei auch der Prozess. Wir sollten mehrere Varianten mitbringen, Feedback einarbeiten und den Entwurf weiterentwickeln weil der erste Stand selten schon der beste ist. Dabei durften wir mit Anordnung, Weißraum, Größenkontrasten und Flächen spielen, solange Lesbarkeit und Funktion erhalten bleiben. Als Orientierung diente eine Typo-Checkliste die hilft, bewusste Entscheidungen zu treffen von Schriftwahl und Kontrast bis hin zu Details wie Abständen, Zeilenhöhe und sauberen typografischen Zeichen.

Designentscheidung

Für das Thema Organspende wollte ich eine Gestaltung, die einerseits klar und gut lesbar ist für die wichtigen Infos, aber gleichzeitig bei Headlines stärker auffällt. Deshalb habe ich Darker Grotesque für die gut lesbaren Informationstexte genutzt und Barrio Sta7c für Elemente, die wie Zeitungs/Collage Headline wirken und mehr Aufmerksamkeit für das wichtige Thema zu erzeugen.

Problemstellung/Herausforderung

Die größte Herausforderung war, dass wir am Anfang nur den reinen Text als Datei hatten. Erstmal musste ich die Inhalte sortieren. Was ist wirklich wichtig, was ist Zusatzinfo, und wo gehört das im Interface hin? Danach ging es darum, den Text so zu setzen, dass er gut lesbar und seriös bleibt, aber trotzdem nicht langweilig wirkt und Raum für Experimente lässt. Dazu kamen einige konkrete Design Fragen wie eine Schriftkombination zu finden, die einerseits klar und gut lesbar ist, aber auch Highlights setzen kann außerdem eine gute Harmonie zwischen Überschriften, Absätzen, Bild und Infoteilen z. B. Quellen, Tabellen, kurze Fakten, kleine Hinweise. Auch typografische Details wie Zeilenabstände, Größen, Gewichtungen und Abstände mussten stimmen, damit die Hierarchie funktioniert. Und weil das Layout sowohl für Desktop als auch Mobile gedacht war, musste die Gestaltung so aufgebaut sein, dass sie sich auf unterschiedlichen Bildschirmgrößen gut anpasst und überall verständlich bleibt.

Vorskizzen 01

In den ersten Entwürfen habe ich zunächst nur an der Desktop Version gearbeitet und dabei stärker experimentiert. Vor allem typografisch habe ich viel ausprobiert unter anderem mit zeitungsartigen Layouts und Schlagzeilen Optik, um Aufmerksamkeit zu erzeugen und eine klare Wirkung zu testen. Später habe ich diese eher expressive Richtung etwas reduziert, damit das Design ruhiger, konsistenter und insgesamt besser lesbar wird auch mit Blick auf die Mobile Version.

Vorskizzen 02

In den nächsten Entwürfen habe ich sowohl dunkle als auch helle Varianten gestaltet um Kontraste, Wirkung und Lesbarkeit besser vergleichen zu können. Dabei ging es weniger um einen finalen Dark Mode, sondern vor allem um Schwarz Weiß Layouts, mit denen ich verschiedene typografische Ansätze und Bild Text Verhältnisse getestet habe.

Außerdem kamen hier dann auch die ersten Mobile Versionen dazu, um zu schauen, wie der Zeitungs Schlagzeilen-Stil und die Struktur auf kleineren Screens funktioniert. Parallel habe ich zusätzlich lesbarere Varianten entwickelt, um ruhigere Alternativen zu den expressiveren Entwürfen gegenüberzustellen.

Vorskizzen 03

Nach dem Feedback von Kommilitonen und Edmundo, habe ich nochmal neue Ansätze für meine Entwürfe probiert, ich habe diesmal auch farbige Varianten getestet und die Absatzstruktur weiter verändert, um die Lesbarkeit zu verbessern. Ich habe nach dem Feedback mehr mit Links, Rechtsanordnung von Text gespielt, Transparenz mit eingebaut und generell Typosetzung und Größe nochmal komplett überdacht.  Ziel war es, ruhigere Layouts mit den experimentelleren Ansätzen zu verbinden und herauszufinden, wie sich beide Ebenen kombinieren lassen. Dabei habe ich versucht, wichtige Informationen stärker hervorzuheben, ohne dass das Gesamtbild unruhig wird, und gleichzeitig typografische Experimente weiter auszubauen.

Endergebniss

Experimentelle & Leserliche Variante für Desktop & I Pad

Für das Endergebnis habe ich Lesbarkeit mit experimenteller Gestaltung verbunden. Gestalterische Regeln habe ich bewusst eingesetzt und an einigen Stellen gezielt gebrochen, um ein spannendes, aber trotzdem funktionales Layout zu entwickeln. Nach dem letzten Feedback bin ich dabei noch mutiger geworden und habe auf ein modernes, ruhiges UI gesetzt, das trotzdem nicht langweilig wirkt.

Die Absätze sind teils links und teils rechtsbündig gesetzt, dazu kommt deutlich mehr Weißraum, damit genug Luft bleibt und die Screens nicht überladen wirken. Gleichzeitig habe ich Typografie und Bildflächen bewusst überlagert, mit Transparenz, Einrückungen und Layering gearbeitet, um mehr Dynamik und Tiefe zu erzeugen. So bleibt das Design interessant, aber klar strukturiert und gut lesbar.

Desktop Version 

I Pad Version

Fazit & Reflexion

Rückblickend hat mir die Aufgabe vor allem gezeigt, wie stark Typografie den Charakter und die Verständlichkeit eines Interfaces bestimmt. Durch das Arbeiten mit zwei sehr unterschiedlichen Schriften konnte ich gezielt Spannung zwischen Information und Aufmerksamkeit erzeugen und gleichzeitig habe ich gelernt wo die Grenze liegt, damit ein Layout nicht zu unruhig und voll wird besonders im Hinblick auf die Mobile Version.

Der Prozess war super wichtig, um mich auszuprobieren und auch mutiger und freier zu gestalten.

Außerdem habe ich gemerkt, wie entscheidend Details wie Zeilenabstände, Weißraum und Größenkontraste für die Lesbarkeit sind. Oft machen kleine Anpassungen hier einen großen Unterschied. Für zukünftige Projekte würde ich noch früher parallel in Desktop und Mobile denken, um starke typografische Ideen direkt auf beide Formate anzuwenden.

Insgesamt hat mir die Übung geholfen, bewusster mit Schrift als Gestaltungsmittel umzugehen und das nicht nur dekorativ, sondern als zentrales Werkzeug für Orientierung, Stimmung und Informationsvermittlung.

02 Formular Gestaltung

Aufgabenstellung

In der zweiten Aufgabe sollten wir ein unübersichtliches Formular neu gestalten und daraus eine modernere, nutzerfreundlichere digitale Version machen jeweils als Desktop und Mobile Version. Dabei sollten wir vorallem auf eine bessere Gliederung, passende Typografie, klare Kontraste, vereinfachte Sprache und eine logische Nutzerführung achten. Das Ziel war ein Formular, das leicht verständlich und möglichst barrierearm ist.

Problemstellung & Designentscheidung

Ich habe mich für das Formular Antrag auf Kindergeld der Bundesagentur für Arbeit entschieden weil es im Original sehr unübersichtlich wirkt. Es hat wenig Weißraum, keine klare Hierarchie oder Gliederung, teils komplizierte Sprache, uneinheitliche Tabellen/Kästchen und insgesamt eher harte bzw. unangenehme Kontraste. Dadurch fühlt sich das Ausfüllen schnell anstrengend und fehleranfällig an.

Im Redesign habe ich deshalb bewusst mehr Luft in das Layout gebracht und die Inhalte klarer sortiert. Die Eingabefelder sind als ruhige, einheitliche Kästchen gestaltet, mit genug Abstand und Platz zum Tippen. Außerdem habe ich die Texte vereinfacht und gekürzt, ohne wichtige Infos zu verlieren. Für eine bessere Orientierung habe ich eine deutlichere Hierarchie aufgebaut über Überschriften, Abstände, Linienführung und eine klare Anordnung der Felder. Zusätzliche Informationen und Hinweise sind ausklappbar ein/ausblendbar, damit der Screen nicht überladen wirkt.

Typografisch habe ich Inter genutzt, weil die Schrift sehr gut lesbar ist. Ich habe hauptsächlich mit Größe und Fettung gearbeitet, um Unterschiede sichtbar zu machen, ohne zu viele Schriften zu mischen. Bei der Gestaltung helfen außerdem klare Kontraste wie Linien und Felder bleiben eher ruhig, während wichtige Hinweise gezielt durch Rot hervorgehoben werden.

Gerade weil Kindergeld ein wichtiges Thema ist und viele Antragstellende z. B. werdende Eltern oder Eltern im Alltagstrubel das Formular schnell und ohne Stress erledigen möchten, war mein Ziel, dass alle relevanten Informationen sofort auffindbar machen und das Ausfüllen so einfach und verständlich wie möglich gestaltet wird.

Herausforderung

Die größte Herausforderung war, die vielen Informationen aus dem Original sinnvoll zu reduzieren und neu zu ordnen, ohne dass etwas Wichtiges verloren geht. Es war gar nicht so einfach, Inhalte zu komprimieren, gleichzeitig aber mehr Weißraum zu schaffen, damit das Formular nicht überladen wirkt. Ich musste die Angaben in logische Abschnitte aufteilen und dabei entscheiden, welche Infos sofort sichtbar sein müssen und welche eher im Hintergrund bleiben können.

Außerdem sollten die Eingabefelder/Kästchen groß genug sein und genügend Abstand haben sowohl zum Lesen als auch zum Tippen. Ich habe anfangs erst eine Version in einer ausfüllbaren PDF gestaltet also ein PDF mit anklickbaren Feldern, und das später in eine Web Interface Version übertragen. Dabei musste ich die Struktur nochmal anpassen, weil sich ein Formular digital anders anfühlt als im PDF.

Ein weiterer Punkt war der Wechsel zwischen Desktop und Mobile. Auf dem Handy ist weniger Platz, trotzdem muss alles verständlich bleiben und die Reihenfolge weiter funktionieren. Dazu kam die Frage, wie man Hinweise und Zusatzinfos möglichst minimal hält z. B. ausklappbar/ausblendbar, wo man sie platziert und wie man Kontraste so einsetzt, dass Hinweise auffallen, das Gesamtbild aber ruhig bleibt und nicht stresst. Parallel habe ich auch an der Vereinfachung der Sprache gearbeitet, damit das Formular schneller verstanden und leichter ausgefüllt werden kann.

Original

Entwurf 01

Im ersten Entwurf habe ich das Formular eher wie ein interaktives PDF fürs Ausdrucken gestaltet und nicht konsequent als Webformular für Desktop und Mobile, das war ein Missverständnis und hat sich im Feedback gezeigt. Hauptkritikpunkte waren zu kleine Felder, zu wenig Weißraum, zu dicke Linien und insgesamt zu wenig Platz zum Ausfüllen. Außerdem fehlten ein klares Raster/Grid, bessere Abstände Text teils zu nah am Rand und eine digitale Struktur. Statt DIN-A4 sollte es eher als Website in Abschnitten/mehreren Screens gedacht werden Formularblöcke statt Tabellen, klare Hierarchien, wichtige Infos sichtbarer. Dieses Feedback habe ich im nächsten Entwurf gezielt umgesetzt.

Entwurf 02

Danach habe ich ein interaktives PDF im Stil einer Website gestaltet zumScrollen und direktes Eintippen. Beim Testen wurde aber deutlich, dass die Eingabefelder zu schmal waren, es zu wenig Weißraum gab und insgesamt zu wenig Platz für Schrift. Auch die Farbkontraste waren nicht optimal. Deshalb habe ich das Konzept noch einmal überarbeitet.

Entwurf 03

Dann habe ich stattdessen eine Website gestaltet für Desktop und Mobil und das gesamte Feedback gebündelt umgesetzt. Jetzt  deutlich mehr Weißraum, größere Eingabefelder und mehr Platz zum Eintippen, eine vereinfachte Sprache, Inhalte auf mehrere Seiten verteilt sowie klickbare Hinweise/Infoboxen. Als Rückmeldung kam dann nur noch kleine Änderungen, wie das Anpassen der Überschriften etwas näher an den Text setzen und das Logo bzw. Kindergeld nochmal größer zu setzen und ein paar Änderungen in der Typo Größe.

Endergebnis

Im finalen Ergebnis ist die Oberfläche aufgeräumter und verständlicher, weil Inhalte klar strukturiert sind und Zusatzinformationen flexibel ein und ausgeblendet werden können. Mehr Weißraum, größere Abstände und eine ruhigere Typografie sorgen für bessere Lesbarkeit und weniger Stress beim Ausfüllen. Die Sprache ist vereinfacht, Kontraste wurden optimiert und die visuelle Hierarchie macht den Ablauf nachvollziehbar. Logo und Schrittanzeige unterstützen zusätzlich Orientierung und Vertrauen, sodass das Formular insgesamt schneller und sicherer ausfüllbar ist. Das neue Formular schafft somit für mehr Orientierung und macht den Fortschritt im Formular transparenter.

Desktop Version

Mobil Version

Fazit & Reflexion

Durch das Redesign habe ich gemerkt, wie stark Gestaltung über Frust oder Erleichterung entscheiden kann. Ein Formular ist nicht nur eine Ansammlung von Feldern, sondern eine geführte Erfahrung. Wenn Struktur, Sprache und Hierarchie nicht klar sind, entsteht schnell Unsicherheit oder Überforderung.

Ich habe gelernt, wie viel Linienführung, Raster, Kästchen und Abstände tatsächlich ausmachen. Ein sauberes Grid, gleichmäßige Felder und klare Abschnitte geben visuelle Stabilität und schaffen Vertrauen. Mehr Weißraum bedeutet hier nicht nur Ästhetik, sondern mentale Entlastung. Der Blick kann ruhiger über die Seite wandern, Inhalte lassen sich schneller erfassen und Fehler werden reduziert.

Besonders wichtig war die Sprache. Vereinfachte, verständliche Formulierungen holen alle Nutzer:innen ab unabhängig von Vorwissen oder Stresslevel. Gerade werdende Eltern oder Familien im Alltagstrubel brauchen Klarheit statt Behördensprache. Hier habe ich gemerkt, dass UX Writing genauso entscheidend ist wie Layout.

Auch die Schrittanzeige hat eine große Wirkung. Ein sichtbarer Fortschritt nimmt Druck raus, weil Nutzer:innen wissen, wo sie stehen und wie viel noch kommt. Das gibt Kontrolle zurück und reduziert das Gefühl, in einem endlosen Formular festzustecken.

Insgesamt habe ich verstanden, dass gute Formulargestaltung nicht nur funktional, sondern empathisch sein muss. Sie strukturiert, führt, beruhigt und entlastet – besonders bei sensiblen Themen.

03 Layout Raster neu Denken

Aufgabenstellung

Ziel dieser Gruppenarbeit war es, ein bestehendes Interface zu analysieren und durch kurze Recherche herauszufinden, wo die größten Probleme für Nutzer:innen in der Nutzung liegen. Die Aufgabe war nicht, das Design nur zu optimieren, sondern das Interface radikal neu zu denken und eine komplett neue Lösung zu entwickeln. Durch das Ausprobieren verschiedener Layouts, das Arbeiten mit Raster, Navigation und einer neuen Struktur sowie durch Verbesserungen bei Lesbarkeit, Sprache, Kontrasten und Zugänglichkeit entstand ein neues interaktives Interface.

Ich habe das Projekt zusammen mit Moana umgesetzt. Wir haben uns für die Cookie Einstellungen der Berliner Volksbank entschieden und diesen Cookie Banner genauer untersucht. Unser Fokus lag darauf, den Aufbau und die Informationsstruktur zu analysieren und daraus ein neues Konzept zu entwickeln, das verständlicher, ruhiger und nutzerfreundlicher funktioniert.

Herausforderung/Problemstellung

Die Herausforderung lag darin, ein eigentlich seriöses und wichtiges Thema so zu gestalten, dass es klar kurz und interessant ist, ohne uns seriös zu wirken. Das Ausgangsinterface der Datenschutz Cookies der Berliner Volksbank wirken auf den ersten Blick sehr voll durch lange Texte, unklare Wortwahl und Wiederholungen und die Ästhetik des Designs. Dadurch dadurch fehlt die Orientierung, wodurch ein Gefühl der Überforderung entsteht. Den Nutzern fehlt es so an Motivation, sich die doch wichtigen Informationen durchzulesen.

Idee/Konzept

Das Konzept der Verbesserung der Cookie-Einstellungen lag nicht darin, lange Texte ästhetisch anzuordnen, sondern dem/der Nutzer:innen eine verspielte Möglichkeit zur Akzeptierung der Cookies zu geben. Stadt für Kategorien, haben wir uns auf die “Kekse” und ihre Zutaten fokussiert. So wollten wir es den Nutzern möglich machen, per anklicken der Zutaten den Bestandteil der Cookies zu akzeptieren (nicht zu akzeptieren). Die verschiedenen Bestandteile der Cookies sind zum Beispiel Marketing-Cookies oder Datenschutz Cookies. Die diversen Cookie Bestandteile wurden einer Zutat für einen echten Keks gleichgestellt. Durch das auswählen der verschiedenen Cookies/Keks Zutaten kann der User genau sehen, wann er welche Cookies akzeptiert. Die akzeptierten Cookies werden dann spielerisch in einer Schüssel vermischt, wodurch der Nutzer am Ende seine Cookie Einstellungen bestimmt hat. Der User hat anfangs die Möglichkeit, sich auszusuchen, wie viele Informationen er zu den verschiedenen Cookies erhalten möchte, wodurch eine weitere Personalisierung möglich ist. So bleibt alles leicht. Verständlich, wirkt freundlich, und schlussendlich trifft der User dennoch eine klare Entscheidung.

Designentscheidung

Wir haben uns dazu entschieden, die Konzept der Cookie Akzeptierung als “Bake Your Own Cookies” zu erzählen. Dadurch entsteht eine spielerische Metapher, bei der Users ihre Einstellungen wie Zutaten, beziehungsweise Cookie Einstellungen, auswählen. So wird aus einem trockenen Fließ-artigem Text ein klarer Ablauf in kleinen Schritten.

Wichtige Entscheidungen dabei:

• Kombination - Seriös & Verspielt: Charakter der Berliner Volksbank nicht verlieren, dennoch mehr Leichtigkeit reinbringen, ohne das Thema zu verharmlosen.

• Typo System: auffällige und einladende Headline Schrift; eine gut lesbare Schrift für längere Inhalte (Paytone One + Instrument Sans).

• Farben: klare Kontraste und ein ruhiges Grund Layout, ergänzt durch Akzent Farben für Fokus und Orientierung (Farben sind inspiriert von der Berliner Volksbank)

• Inhalte: User Flow als Schritt für Schritt Prozess; Inhalte sind klar aufgeteilt, damit User nicht alles auf einmal lesen.

• Gamification/ Visuals: eigene Illustrationen (schüssel, Rührgerät, Zutaten, Keks, etc.) um Inhalte verständlicher und einprägsamer zu machen.

Ausgangssituaiton

Einige Probleme aus der Ausgangssituationw waren zum Beispiel, dass die die Cookies Informationen aus langen und kompliziert geschriebenen Textblöcken bestanden mit vielen Schachtelsätzen und teils auch Doppellungen, so dass man sich mühevoll durch eine Textwand kämpfen musste. Eine visuelle Strukturierung gab es zudem kaum, da es wenig Ordnung, Weißraum und Raster gab. das führte schnell zur Überforderung und gleichzeitigen Langeweile des Lesenden. Die Wortwahl erschwert den Lesefluss und suggeriert keine nutzerfreundliche Formulierung. Darüber hinaus war eine echte, individuelle Auswahl umständlich und ein klares ablehnen verschiedener Cookie-Optionen war nicht direkte sichtbar beziehungsweise nicht leicht auffindbar. Dadurch wird der User nicht durch einen klaren und fairen Entscheidungsprozess geführt. Dies für dazu, dass sich User erschlagen fühlen und, anstatt sich die Cookies bewusst durchzulesen, lieber irgend etwas oder gar nichts auswählen.

Moodboard

Beim gestalten des Moodboards und während der ersten Skizzen, hatten wir die idee, die Cookies wie ein Kartensystem aufzubauen, inspiriert vom Design des Apple Wallets. Die verschiedenen zu akzeptierenden Cookies sollten ursprünglich als einzelne Karten funktionieren, die man in einem Ordner sammeln, öffnen und verwalten kann. Zudem haben wir uns auch erst Gedanken dazu gemacht, wie das Layout funktionieren könnte — also, wie man die Inhalte in kleinere, klar differenzierte Bereiche aufteilen könnte, um das Problem der “Textwand” zu umgehen. Die Karten sollten dabei helfen, die verschiedenen Cookies visuell zu sortieren und Schritt für Schritt zugänglich zu machen. Beim Weiterentwickeln und Testen haben wir jedoch gemerkt, dass das Konzept der Idee des Apple Wallets für den Flow zu umständlich wird und User nicht besser aufklärt — diese können so nicht gut, informativ und schnell ans Ziel geführt werden. Aus diesem Grund haben wir die Apple Wallet Inspiration später teilweise und zum Schluss hin ganz verworfen und stattdessen den, wie im Prototyp sichtbar, Schritt-für-Schritt-Prozess als klare Lösung fortgeführt.

Vorskizzen

Farben & Typografie

Für die Typo haben wir zwei Schriften kombiniert. Einmal haben wir uns für die Paytone One entschieden, da diese prägnant und auffällig ist und so gut als Überschrift verwendet werden kann. Für die Fließtexte und Kontraste haben wir uns für Instrument Sons entschieden, da diese gut lesbar ist. Da unser Konzept im Laufe des Prozesses stärker in Richtung Gamification, ging, haben wir uns bewusst für eine verspielte Überschriftern-Typografie entschieden, um dem Interface mehr Charakter zu geben, ohne ohne an Verständlichkeit zu verlieren oder zu unseriös zu wirken. Beim Farbschema wollten wir grundsätzlich nah an der Corporate Identity der Berliner Volksbank bleiben. So entschieden wir uns für ein Blau und orange, jedoch haben wir die Farben etwas abgeschwächt, um sie visuell aufeinander abzuspielen. So wirkt das Interface weiterhin seriös, kann mit der Berliner Volksbank assoziiert werden, ist aber weniger formell und wirkt insgesamt freundlicher und moderner.

Icons/Illustrationen

Nachdem wir uns mit dem Kartensystem auseinandergesetzt haben, welches wir später verworfen haben, haben wir den Fokus wieder stärker auf die Gamification gelegt. Hierfür haben wir selber ein Set an Illustrationen und Icons designt. Da unsere jetzige Idee auf einem Keks backen beruht, brauchen wir viele passende Illustrationen, die den Prozess des Kekse backen visualisieren. Demnach haben wir uns für Elemente, wie zum Beispiel, eine Schüssel, einen Mixer und andere Keks-Zutaten, entschieden. Die Zutaten stehen im Interface für die verschiedenen Cookie Kategorien und können später je nach Auswahl, hinzugefügt oder weggelassen werden — je nachdem, welche Cookies der User erlauben möchte.

Zwischenstand 01

Zunächst haben wir unsere ersten konkreten Ideen auf Screens entwickelt. Hierbei tauchte zwei zentrale Aspekte auf; zum einen die Gamification, welche aus dem Back Prozess und den Zutaten besteht. Außerdem ist auch die Personalisierung durch den User und die Auswahl des Lesetypen wichtig — also die Frage, ob der User lieber eine kurze Zusammenfassung oder eine ausführliche Erklärung der Cookies lesen möchte. So wollten wir dieInformationsmenge der Cookie Einstellungen besser bündeln und dem User die Option geben, die Textmenge individuell anzupassen. Es war wichtig, nicht alle Informationen gleichzeitig zu zeigen. Zusätzlich haben wir an dieser Stelle verschiedene Opening-Screen, entscheidung, Optionen und erste Abläufe getestet, um herauszufinden, wie sich User durch das System bewegen könnten. Besonders die Abfrage des Lese Typen hat sich später als wichtig herausgestellt und das Endprodukt stark beeinflusst. Die Gamifications-Elemente wurden beibehalten und später weiter ausgearbeitet

Zwischenstand 02

Nach weiteren Feedbackrunden, haben wir die Gamification noch deutlicher ausgebaut und den gesamten User-Flow flüssiger zusammengestellt. Zudem haben wir auf Basis von Feedback die Illustrationen verfeinert, das Layout konsistenter aufgebaut und die Texte sprachlich überarbeitet. Die Texte haben wir in der Wortwahl angepasst, gekürzt und logischer positioniert, um das Gefühl der Textwand und der einhergehenden Konfrontation zu mildern. Zudem haben wir die ursprüngliche Lese-Typ-Idee weiterentwickelt und als Einstieg folgende Frage formuliert: “Wie backst du am liebsten?” mit den Antwortmöglichkeiten “Schnell und Einfach.”und “Ich lese gerne alles.”. Dies ermöglicht Usern die Informationen je nach Bedarf kompakt oder ausführlich zu erhalten, ohne dass man dabei sofort mit Details überhäuft wird. Nach der Auswahl des Lese Typen folgt eine klare Entscheidungebene, in der der User die Cookie Kategorien als Zutaten in einem Schritt für Schritt Prozess durchgeht. Der User wird hier bei jedem Schritt geleitet. Visuell wird der Prozess durch kleine Animationen, wie zum Beispiel, wenn die Zutaten in die Schüssel fallen, begleitet.

Prototyp

Durch das Neudenken der Cookie Einstellungen war es uns möglich, einen neuen, klaren und geführten Ablauf zu entwickeln. Nun wird der User nicht mit zu vielen Informationen überrannt, sondern in überschaubaren Schritten durch die Cookie Einstellungen in einer Back Metapher geleitet. Dadurch, dass die ausgewählten Zutaten nach und nach in die Schüssel fallen, wird sichtbar, welche Cookies man akzeptiert. Der User kann hier indirekt spielerisch mit der Bank kommunizieren. Durch die Gamification wirkt das Thema weniger abschreckend, bleibt aber trotzdem nachvollziehbar und seriös.

Im finalen Prototypen haben wir uns dazu entschieden, dem User nur zwei Optionen zu seinem Lesetyp zu geben. Beim Layout haben wir mit einem wiederkehrenden, ruhigen Raster gearbeitet, das mit einem Prozessbalken startet und danach eine Headline zeigt. In der Mitte des Screens kann der User die nötigen Informationen lesen, die durch die Zutaten visuell unterstützt werden. Darunter folgt die Auswahl zum Akzeptieren der Cookies und das Weiterklicken.

Wir haben bewusst viel Weißraum gelassen, damit der Screen nicht zu voll wirkt und alles schnell erkannt und gelesen werden kann. Die Texte wurden gekürzt und vereinfacht, Elemente und Kartengrößen angepasst und die Illustrationen überarbeitet. Der Prozessbalken zeigt dem User, in welchem Schritt er sich gerade befindet. Nachdem der User sich entschieden hat, rundet am Ende ein Belohnungsprinzip das Konzept ab und erhöht die Motivation, sich die Informationen wirklich durchzulesen.

Trotz Gamification bleibt das Design durch Inspiration an der Corporate Identity der Berliner Volksbank seriös. Die aufeinander abgestimmten Farben unterstützen die visuelle Ästhetik und kleine Animationen begleiten den User bei der Cookie Auswahl. So entsteht ein verspielter, aber klarer Ablauf, der die Kund:innen der Berliner Volksbank überschaubar durch die Cookie Entscheidung begleitet und Spaß macht.

Abschlusspräsentation

Final

Nach der Abschlusspräsentation und dem Feedback haben wir den Prototypen nochmal überarbeitet: Wir haben das Karten- und Farbsystem angepasst, um das Flimmern zu reduzieren und das Interface insgesamt ruhiger wirken zu lassen. Außerdem haben wir die Schrittführung optimiert beim Loadingbalken gibt es jetzt nur noch 0/5 anstatt vorher 0/10 Fortschrittsbalken oben und die Animationen insgesamt flüssiger gemacht in den Transitions

Fazit & Reflexion

Während der Bearbeitung des Projekts haben wir gemerkt, dass es bei der Thematik der Cookies und des Datenschutzes weniger darauf ankommt, was inhaltlich an Informationen zur Verfügung gestellt wird, sondern dass es mehr darauf ankommt, wie diese Informationen visuell angeordnet sind. Wir haben gemerkt, dass volle Screens mit viel Text meistens weggeklickt werden, weshalb unser Learning folgendes ist: Inhalte kürzen, sortieren und logisch aufteilen, so dass man Schritt für Schritt Informationen dem User näherbringen kann. Es hat uns geholfen, dass wir anfangs verschiedene Ideen, wie zum Beispiel das Apple Wallet, getestet haben. Wir haben hier schnell merken können, was sich cool anhört versus was in der Praxis tatsächlich umsetzbar ist. Durch diesen Test konnten wir uns auch schlussendlich für den Schritt für Schritt Prozess entscheiden. Die Kombination aus spielerischer Idee und der Möglichkeit einer persönlichen Auswahl hat überraschend gut funktioniert. Durch die Back Metapher wirkt die Cookie Auswahl weniger trocken und man kann besser verstehen, welche Cookies man gerade auswählt. Da es trotzdem durch zum Beispiel Farbe, Aufbau und Logo nah genug an der Corporate Identity der Volksbank bleibt und somit optisch der Bank entspricht, wirkt es weiterhin seriös. Die Einstiegsfrage nach dem Lese Typ nimmt dem User den Druck, alle Informationen zu lesen, und sorgt so dafür, dass sich der User bereits in der Anfangsfrage persönlich für etwas entscheiden kann. Wenn wir dieses Projekt noch einmal machen würden, würden wir uns früher mit kleinen Animationen und Übergängen beschäftigen. Dies hat uns leider zum Schluss etwas mehr Zeit gekostet als ursprünglich gedacht, weswegen sich manche Übergänge noch nicht so flüssig anfühlen. Außerdem würden wir mehr mit den Texten herumspielen, sie noch häufiger kurz testen und schauen, ob es noch eine bessere Wortwahl für die Vermischung aus Gamification und Seriosität gibt. Schlussendlich nehmen wir von diesem Projekt mit, dass ein nerviges Thema wie Cookies besser und ansprechender gestaltet werden kann, indem der User logisch durch die verschiedenen Cookie Einstellungen geführt wird und nicht mit vielen Informationen überhäuft wird. Dadurch hat der User direkt eine positive Assoziation zu dem Unternehmen, welches die Cookies Einstellungen zur Verfügung stellt.

04 Redesign DB

Aufgabenstellung

Für die letzte Aufgabe, unser individuelles Semesterprojekt, sollten wir uns eine bestehende digitale Anwendung aussuchen und sie gezielt umgestalten und weiterdenken. Die Auswahl konnte sehr unterschiedlich sein z. B. ein Bankautomat, eine BVG oder DB App, eine Verwaltungsleistung, ein medizinisches Interface, ein Webshop oder eine Infoseite mit schlechter Nutzerführung. Wichtig dabei war nur, dass es real, konkret und aus dem Alltag ist.

Dabei sollten wir nicht das komplette Produkt redesignen, sondern uns bewusst auf ein Feature bzw. eine klar definierte Funktion konzentrieren. Im Fokus stand also ein zusammenhängender Ablauf von Anfang bis Ende inklusive Prozesse und Nutzerführung, aber auch Gestaltungsthemen wie Typografie, Raster, Farbgebung, Design System, UX Writing und Barrierefreiheit.

Als Grundlage sollten wir außerdem am Anfang im Kopf halten:Warum habe ich diese Anwendung gewählt? Was läuft daran nicht gut (Usability, Nutzerführung, Design, technische Barrieren …)? Was möchte ich konkret verbessern?

Ich habe mich für die DB App entschieden und dort konkret die Sitzplatzreservierung als Feature ausgewählt, weil dieser Prozess im Original schnell unübersichtlich und stressig wird: Nutzer:innen müssen sich durch einen komplexen Sitzplan kämpfen, viele Symbole sind nicht selbsterklärend, und persönliche Bedürfnisse z. B. Nähe zur Tür, Fensterplatz, Ruhe, Sicherheit werden kaum sinnvoll abgefragt oder unterstützt. Mein Ziel war deshalb, die Reservierung als klaren, geführten Flow neu zu gestalten, der schneller Orientierung gibt, Unsicherheit reduziert und die Entscheidung spürbar einfacher macht.

Problemstellung/Herausforderung

Die Analyse des Ist-Zustands zeigte mehrere Schwächen: fehlende Orientierung, technisch wirkende Darstellung, unklare Sitzlage und kaum Möglichkeiten, persönliche Bedürfnisse auszuwählen

Icons wie Fenster, Tür oder WC waren nicht erklärt, Filter fehlten und die Navigation war verschachtelt, was schnell zu Überforderung führte – besonders für unsichere oder erstmalige Reisende

Zusätzlich beantwortete die aktuelle Lösung kaum die zentrale Frage:

Fühle ich mich auf diesem Platz sicher und wohl? – individuelle Bedürfnisse wurden nicht ausreichend berücksichtigt

Die Herausforderung war also, den Prozess so umzubauen, dass er:

• verständlicher wird

• Sicherheit vermittelt

• persönliche Vorlieben berücksichtigt

• und Stress aus der Entscheidung nimmt.

Idee/Konzept

Die Kernidee war, die Nutzer:innen nicht selbst lange suchen zu lassen, sondern sie Schritt für Schritt zu begleiten.

Statt nur einen Sitzplan zu zeigen, fragt das neue Konzept zuerst nach persönlichen Präferenzen durch eine Filterfunktion ab z. B. Fensterplatz, Nähe zur Tür, Bistrobereich, Tiere, WC, Nähe zum Schaffner usw. Auf Basis dieser Angaben werden passende Wagen und Sitze direkt markiert und vorgeschlagen

Designentscheidung

Gestalterisch habe ich auf eine ruhige, übersichtliche Oberfläche gesetzt, die Vertrauen vermittelt und nicht technisch oder überladen wirkt.

Wichtige Entscheidungen wurden visuell hervorgehoben, während komplexe Informationen reduziert und auf mehrere Schritte verteilt wurden.

Statt eines überfüllten Sitzplans rücken persönliche Wünsche und Empfehlungen in den Vordergrund.

Die Tonalität bleibt sachlich und seriös, wirkt aber deutlich menschlicher, emotionaler und unterstützender als im Original.

Ideevorstellung / Präsentation

Ausgangssituation

In der Ausgangssituation ist die Sitzplatzreservierung teilweise sehr versteckt und nicht sofort auffindbar. Der Einstieg ist unklar und die Startoption für die Sitzplatzwahl ist nicht eindeutig sichtbar.

Der Wagenplan ist klein, gedrängt und schwer lesbar. Es gibt wenig Weißraum, zu viele Infos auf engem Raum und man weiß oft nicht was der nächste Schritt ist. Icons sind kaum erkennbar und nicht wirklich selbsterklärend. Außerdem kann man kaum individuelle Wünsche festlegen. Es gibt keine richtige Abfrage von Bedürfnissen wie Ruhebereich, Nähe zum WC oder Reisen mit Tier was später mein Filtersystem übernimmt.

Und die Sprache wirkt oft sehr technisch statt beruhigend und verständlich. Insgesamt fehlt Orientierung und visuelle Führung. Genau da setzt mein Konzept an mit klareren Schritten, mehr Struktur, besserer Lesbarkeit und einer ruhigeren Gestaltung.

Nutzer:innen-Perspektive / Research

Bevor ich den User Flow ausgearbeitet habe, habe ich mir die bestehende DB-App genau angeschaut und analysiert, wie die Navigation aktuell funktioniert: Wo startet man? Wie kommt man zur Sitzplatzreservierung? An welchen Stellen entstehen Unsicherheiten oder unnötige Umwege? Auf dieser Basis habe ich überlegt, wie der Ablauf aussehen muss, damit meine Idee – eine bedürfnisorientierte Sitzplatzwahl überhaupt sinnvoll integrierbar ist.

Zusätzlich habe ich früh Interviews geführt, unter anderem mit meiner Mutter, die genau zur Zielgruppe gehört: Sie fährt nicht gern, und noch nie einen Langstrecken Zug, fühlt sich bei technischen Abläufen schnell überfordert und hat Angst, etwas falsch zu machen. Ich habe ihr die App im Ist-Zustand gezeigt und gefragt, ob sie sich zurechtfindet, sie sich durch navigieren lassen gefragt, was ihr fehlt, welche Begriffe unklar sind und was eine Sitzplatzreservierung für sie einfacher machen würde. Diese Gespräche haben stark beeinflusst, welche Informationen ich im Flow priorisieren und wo ich zusätzliche Erklärungen einbauen muss.

Der neue Ablauf wurde daraufhin klar strukturiert:

Statt direkt mit komplexen Wagenplänen zu konfrontieren, werden Nutzer:innen zuerst abgeholt und Schritt für Schritt geführt. Entscheidungsstellen etwa die Wahl eines Wagens oder Sitzes sind bewusst klar formuliert und bieten Rücksprünge, falls man sich umentscheiden möchte.

UX Writing & Feinschliff

Im weiteren Verlauf habe ich noch mehr Feedback eingeholt und den Flow später weiter angepasst. Besonders wichtig war dabei das UX Writing: Menschen, die unsicher oder gestresst reisen, brauchen eine ruhige, freundliche Sprache, die erklärt statt verunsichert. Im UX-Writing-Workshop konnte ich diesen Ansatz später auch noch  weiter vertiefen und gezielt an Formulierungen arbeiten, die Orientierung geben, beruhigen und konkrete Vorteile benennen zum Beispiel Hinweise zum Gang, Nähe zur Tür, Tiere oder zum Personal.

Insgesamt zeigt der Prozess, wie wichtig es ist, nicht nur aus Designer:innen Sicht zu denken, sondern reale Nutzungssituationen und Ängste ernst zu nehmen. Der Flow ist dadurch nicht nur logisch aufgebaut, sondern fühlt sich unterstützend an und macht die Sitzplatzreservierung nachvollziehbar und weniger stressig.

User Flow

Für den User Flow, den wir erstellen sollten, habe ich mir zuerst die bestehende Navigation der DB-App genau angeschaut: Wo startet man aktuell, über welche Menüpunkte kommt man zur Sitzplatzreservierung und an welchen Stellen wird es unübersichtlich oder umständlich. Darauf aufbauend habe ich den Flow so umgebaut, dass er logisch bleibt, aber stärker von den Bedürfnissen der Nutzer:innen ausgeht.

Der Prozess startet weiterhin realistisch im bestehenden Kontext der App damit sich der neue Ablauf nahtlos in das aktuelle System einfügt. Danach wird nicht sofort eine komplizierte Wagenansicht gezeigt, sondern zunächst eine Abfrage eingeführt: Was ist dir wichtig? – zum Beispiel Ruhe, Nähe zur Tür, Nähe zum Personal etc.

Auf Basis dieser Auswahl schlägt das System passende Wagenabschnitte vor. Erst danach gelangt man in die detaillierte Sitzplatzkarte, wo gezielt gefilterte Optionen sichtbar sind. So müssen Nutzer:innen nicht mehr den kompletten Zug selbst durchsuchen, sondern werden Schritt für Schritt zur passenden Wahl geführt.

Wichtig war mir auch, Schleifen einzubauen: Wenn noch kein Wagen gewählt wurde, geht es zurück zur Übersicht  ohne den Prozess komplett neu zu starten. Erst wenn ein Sitz ausgewählt ist, folgen zusätzliche Infos und Sicherheitshinweise, bevor die Reservierung bestätigt wird und das Ticket aktualisiert wird.

Insgesamt verschiebt der neue Flow den Fokus von erst alles zeigen hin zu geführt entscheiden → eingrenzen → auswählen. Dadurch wird der Ablauf ruhiger, verständlicher und stärker auf reale Nutzungssituationen abgestimmt, statt Nutzer:innen mit zu vielen Optionen auf einmal zu überfordern.

Der erste User Flow berücksichtigte aber noch nicht jeden Schritt und später im Verlauf des Projektes habe ich ihn immer weiter angepasst und optimiert.

Vorskizzen / Wireframes

Am Anfang habe ich Wireframes auf Basis meines User Flows erstellt um erst mal die Struktur der App festzulegen. Mir ging es darum dass der User sich schnell orientiert und der Buchungsprozess logisch Schritt für Schritt abläuft von Reise auswählen über Verbindung bis zur Sitzplatzwahl. Ich habe mich dabei auf Hierarchie und klare Navigation konzentriert also was ist die wichtigste Info pro Screen und wo liegt die Hauptaktion. Neu dazu kam die Funktion Wünsche festlegen als Filter damit man vor der Sitzplatzansicht schon auswählen kann was wichtig ist und dadurch schneller passende Plätze findet.

Beim Sitzplatz Screen habe ich ein klares Raster genutzt damit freie Plätze sofort erkennbar sind und am Ende mit Bestätigungs Screens gearbeitet damit der User Sicherheit hat dass alles gespeichert und reserviert ist

Erster Entwurf in Farbe

Im ersten Entwurf in Farbe habe ich mich zunächst noch stark an der DB Farbwelt orientiert und das Rot etwas abgeschwächt in Richtung Rosa Pink. Nach dem ersten Feedback habe ich diese Farbwahl aber komplett verworfen, weil sie nicht überzeugend war und ich gemerkt habe dass ich mich gestalterisch stärker lösen kann. Das hat mir deutlich mehr Freiheit gegeben.

Ich habe außerdem erste Icons eingebaut um Funktionen schneller verständlich zu machen und die visuelle Hierarchie klarer zu gestalten. Der gesamte Flow wurde nochmal überarbeitet damit die Schritte noch logischer ineinandergreifen und der Sitzplatzprozess klarer geführt wird.

Man sieht hier schon dass aus den reinen Wireframes ein konkreteres Interface wird mit klareren Call to Actions mehr Struktur und einem stärkeren Fokus auf Orientierung und Nutzerführung.

Moodboard

Nach dem Feedback zur roten Farbwelt habe ich ein neues Moodboard erstellt. Ich habe gezielt nach ruhigeren, weicheren Farben und klaren, aufgeräumten Interfaces gesucht.

Mein Ziel war es eine Atmosphäre zu schaffen die ängstliche oder unsichere Fahrgäste ruhig durch den Prozess begleitet. Die Designs im Moodboard arbeiten viel mit sanften Farbverläufen, klarer Typografie und wenig visueller Überforderung.

Es ging mir darum mehr Sicherheit, Orientierung und Entspannung zu vermitteln statt Druck oder Stress zu erzeugen.

Farben & Typografie

Nach dem neuen Moodboard habe ich mich für eine reduzierte Farbpalette aus Blau Grau Grün und Gelb entschieden. Blau und Grau sorgen für Ruhe und Sicherheit, Grün wirkt positiv und unterstützend und setze ich gezielt als Signalfarbe für wichtige Infos wie Zug, Gleis oder Hinweise ein.

Bei der Typografie habe ich mich bewusst nur für eine Schrift entschieden nämlich Inter. Sie ist sehr gut lesbar, modern und klar und unterstützt das ruhige und strukturierte Gesamtbild.

Insgesamt geht es bei Farben und Typo darum Klarheit Orientierung und ein Gefühl von Sicherheit zu vermitteln.

Illustrationen & Icons

Zwischenstand

Danach habe ich die Icons weiter ausgebaut und eine erste klare Icon Struktur angelegt. Es gibt eigene Icons für Züge, Wagen, Sitzplätze, Toggles, Tickets und auch für die Filter zur Wunschsetzung.

Alle Icons habe ich in meiner neuen Farbpalette gestaltet damit alles visuell zusammenpasst. Mir war wichtig dass sie einfach, klar und gut erkennbar sind.

Nach dem Feedback habe ich die Icons später nochmal überarbeitet vor allem in Größe, Proportion und Detailgrad damit sie konsistenter und ruhiger wirken.

Zwischenstand 01

Im Zwischenstand 01 habe ich mit der neuen Farbpalette und den Icons die Screens weiter ausgearbeitet. Zu dem Zeitpunkt habe ich noch sehr viel Gelb genutzt das habe ich später nochmal reduziert und anders verteilt.

Inhaltlich habe ich den Fokus stärker auf die Reihenfolge Wagen und Sitzplatz gelegt und den Flow klarer gemacht. Dazu kamen erste Textbausteine fürs Wording und die Filterfunktion habe ich konkreter gedacht also wie sie den User gezielter zu passenden Plätzen führt.

Außerdem habe ich erste Ideen eingebaut wie Empfehlungen angezeigt werden können und wie Ticketansicht sowie Fahrt und Verbindungen übersichtlich dargestellt werden.

Nach diesem Zwischenstand kam dann direkt Feedback. Ich sollte nochmal an den Icons arbeiten und die Größen der Abbildungen besser abstimmen. Auch der Gelbton war zu dominant und sollte ruhiger eingesetzt werden.

Zusätzlich gab es Hinweise zur Filterfunktion insgesamt also klarer machen wie sie funktioniert und wie sie dem User wirklich hilft. Die Buttons sollten anders dargestellt werden und der Flow sollte weiter ausgebaut werden mit fehlenden Screens damit der Ablauf komplett und durchgehend verständlich ist.

Zwischenstand 02

Hier habe ich nochmal stark an der Filterfunktion Wünsche festlegen gearbeitet. Die Elemente waren vorher zu eng gesetzt, zu klein und hatten zu wenig Weißraum. Ich habe ihnen mehr Luft gegeben und viele Filter neu gestaltet damit sie einheitlicher und klarer wirken.

Zusätzlich habe ich ein paar Leute befragt welche Filter ihnen wirklich wichtig sind und daraufhin Anpassungen gemacht zum Beispiel Themen wie Tiere oder Nähe zum WC. Ich habe auch überlegt wie man die Wünsche sinnvoll auswählt und speichert und wie man sie später wieder ändern kann damit der User flexibel bleibt.

Auch die Farbpalette habe ich nochmal angepasst. Zu diesem Zeitpunkt war immer noch relativ viel Gelb im Einsatz und weniger Grün was sich später nochmal geändert hat.

Illustrationen & Icons

final

Danach sind die finalen Icons entstanden. Durch die weiter ausgearbeitete Filterfunktion und zusätzliche Screens habe ich deutlich mehr Icons gebraucht.

Dazu kamen unter anderem Kalender, Zeiteinstellungen, Toggles, Checkboxen, Tickets, Wagen, Sitzplätze, Gleisanzeige, komplette Menüleiste, Navbar, Uhrzeit, Speichern, QR Code und weitere UI Elemente.

Ich habe alles stärker im Grünton gehalten damit es ruhiger wirkt und konsistent zur überarbeiteten Farbpalette passt. So ist ein geschlossenes und einheitliches Icon System entstanden.

Zwischenstand 03

In der weiteren Ausarbeitung kurz vor dem UX Kurs und der Präsentation habe ich mich nach dem Feedback klar auf Grün als Signalfarbe festgelegt und bin damit auch echt happy. Dadurch wirkt das Interface ruhiger und trotzdem bleiben wichtige Infos sofort sichtbar.

Ich habe die Filterfunktion nochmal luftiger gemacht mit mehr Weißraum und größeren Boxen. Außerdem habe ich bei den Icons eine klare Kennzeichnung ergänzt zum Beispiel durch Durchstreichen wenn etwas nicht gewünscht ist.

Den Wir empfehlen dir Screen habe ich nochmal umgestaltet und stärker kontrastiert damit man die Empfehlung schneller versteht. Unten habe ich komplett neue Buttons eingeführt für eine klarere Navigation und das Ticket habe ich weiter ausgearbeitet inklusive mehr Infos und QR Code Darstellung.

Überarbeiteter User Flow

Nach dem ersten User Flow und mehreren Feedbackrunden habe ich den Flow vor dem finalen Stand nochmal komplett neu aufgebaut und präziser angepasst. Durch die vielen Screen Ausarbeitungen wurde klar, dass der Ablauf an einigen Stellen noch klarere Übergänge, mehr Orientierung und zusätzliche Optionen braucht, damit die App am Ende wirklich rund wird.

Für den Feinschliff und die Finalisierung habe ich deshalb kontinuierlich am User Flow weitergearbeitet und ihn Schritt für Schritt verbessert. In der neuen Version sind deutlich mehr Verzweigungen enthalten, also Ja Nein Entscheidungen, alternative Call to Actions, Buttons sowie konkrete Nutzeraktionen wie Tippen, Auswählen oder Zurückgehen. Das Ziel war, den Prozess so zu gestalten, dass Nutzerinnen sicher und ohne Verwirrung durch die App geführt werden, aber trotzdem jederzeit die Freiheit haben abzubrechen oder über Zurück wieder an einen vorherigen Punkt zu gelangen.

Durch die klarere Struktur, die schrittweise Führung und die zusätzliche Orientierung über die Navbar ist der Flow jetzt flüssiger, offener und stärker auf eine einfache, verständliche Nutzerführung ausgelegt.

UX Writing

Im Laufe des Projekts haben wir zusätzlich einen kleinen UX-Writing-Workshop gemacht, der mir nochmal deutlich gezeigt hat, wie stark Sprache die Wahrnehmung eines Interfaces beeinflusst. Wir haben Input zu guten UX-Texten bekommen und mehrere kleine Fingerübungen gemacht – zum Beispiel bestehende Sätze umzuformulieren, damit sie verständlicher, freundlicher und stärker auf die Nutzer:innen eingehen oder besser zur Brand passen.

Eine Aufgabe war z. B. ein klassischer „Kein Eintrag vorhanden“-Moment: Wie kommuniziert ein Lieferdienst, wenn eine Pizza (z. B. Pizza Hawaii) gerade nicht verfügbar ist? Lisa und ich haben dafür mehrere Varianten geschrieben (von neutral bis witzig) und gemerkt, wie krass Ton & Wortwahl die Stimmung ändern: Ob es sich wie eine dumme Fehlermeldung anfühlt – oder wie eine hilfreiche Nachricht mit einem klaren nächsten Schritt. Das hat echt Spaß gemacht und mir ein viel besseres Gefühl dafür gegeben, wie man kurze Texte schreibt, die klar sind, nicht genervt klingen und trotzdem zur Marke passen.

Dazu haben wir kurze Leitfäden bekommen (z. B. aktiv schreiben, positiv formulieren, jargonfrei bleiben) und unsere Ergebnisse immer in Mini-Präsentationen vorgestellt. Das war super hilfreich, weil man gesehen hat, wie unterschiedlich man ein und denselben Inhalt formulieren kann – und welche Varianten sich am klarsten oder beruhigendsten anfühlen.

Diese Erkenntnisse habe ich direkt in mein Projekt übertragen, vor allem mit Blick auf ängstliche oder unsichere Reisende: Texte sollten nicht belehren oder technisch klingen, sondern Orientierung geben, Sicherheit vermitteln und den nächsten Schritt klar machen. Gerade bei der Sitzplatzreservierung habe ich deshalb bewusst ruhige, erklärende Formulierungen eingesetzt, die Nutzer:innen abholen und das Gefühl geben, die Situation im Griff zu haben.

Endergebnis

Im finalen Stand konnte ich durch den UX Writing Kurs das Wording nochmal komplett schärfen. Die Sprache ist jetzt klarer, ruhiger und weniger technisch. Die Sitzplatzreservierung soll sich menschlich und sicher anfühlen und nicht kompliziert oder überfordernd.

Die Filterfunktion habe ich weiter ausgebaut und strukturierter gestaltet. Mehr Weißraum, Zweizeiligkeit und klarere Gruppen verbessern die Lesbarkeit. Innerhalb einer Kategorie können jetzt einzelne Optionen ausgewählt werden, aber auch ganze Gruppen. Wünsche lassen sich speichern, später anpassen und flexibel ändern. Zusätzlich ist es möglich einzelne Elemente oder Inhalte gezielt auszuwählen und herunterzuladen.

Ich habe außerdem weitere Screens ergänzt, zum Beispiel Kalenderfunktion, Uhrzeitauswahl und Fahrgastauswahl inklusive Tiere. Dazu kommen Statusanzeigen in der Navigation wenn ein Ticket gespeichert wurde, sowie eigene Screens für gespeicherte und gebuchte Tickets inklusive QR Code.

Das finale Design verfolgt klar das Ziel Unsicherheit und Stress zu reduzieren. Durch Filter und Bedürfnisse, die Fahrgäste schon vor der Reservierung und der Fahrt festlegen können, Empfehlungen die zu ihnen passen, eine klare emotionale Sprache, Schritt für Schritt Abläufe und visuelle Vereinfachung. Mit ruhiger Farbwelt, klarer Navigation und verständlichen Hinweisen wird die Sitzplatzreservierung besonders für unerfahrene oder ängstliche Reisende einfacher und sicherer. Insgesamt liegt der Fokus auf Vertrauen, Ruhe, Orientierung und Kontrolle.

Figma Link: https://www.figma.com/design/Sd3wMSy0epeJ4Et6hRvmaw/DB-Sitzplatzreservierung?node-id=101-178&t=F6vhlxaUHZu2a91E-1

Abschlusspräsentation

Fazit & Reflexion

Was gut funktioniert hat war der klare Fokus auf eine konkrete Zielgruppe. Dadurch konnte ich Entscheidungen bei Flow, Tonalität, Farben und Aufbau immer daran ausrichten, wie sich unerfahrene oder ängstliche Reisende sicherer fühlen. Auch die Reduktion von Komplexität hat gut geklappt, weil der Prozess Schritt für Schritt geführt wird und Inhalte visuell vereinfacht wurden.

Herausfordernd war vor allem komplexe Infos einfach zu erklären und Sicherheit nicht nur technisch, sondern emotional zu kommunizieren. Außerdem war es tricky viele Optionen anzubieten ohne zu überfordern, und die Balance zwischen Empfehlung und eigener Kontrolle gut hinzubekommen.

Für die Zukunft könnte man das Projekt noch weiter ausbauen. Zum Beispiel die Filterfunktion erweitern mit mehr Kategorien, mehr Optionen und noch klareren Icons. Auch Personalisierung könnte langfristig stärker werden, etwa Profile für unterschiedliche Reisetypen oder gespeicherte Präferenzen je nach Strecke. Zusätzlich würde ich Barrierefreiheit weiter ausarbeiten und die Typografie noch feiner abstimmen damit alles noch ruhiger und zugänglicher wirkt.

Außerdem wäre ein nächster Schritt echte Tests mit Nutzerinnen und Nutzern, um zu prüfen ob Empfehlungen, Filterlogik und Wording wirklich so verstanden werden wie gedacht und wo man noch vereinfachen kann.

Reflexion des Entwicklungsprozesses im Semester

Der Kurs hat mir generell richtig viel Spaß gemacht und ich habe extrem viel gelernt und mitgenommen. Gerade auch wieder Basics. Obwohl ich schon relativ weit im Studium bin, haben mir genau diese Grundlagen an einigen Stellen noch gefehlt. Deshalb habe ich den Kurs auch gewählt und wurde überhaupt nicht enttäuscht. Durch die vielen kleinen Übungen und den konstanten Input zu Layout, Raster, Typografie, Hierarchie und Aufbau konnte ich gefühlt nochmal bei null starten und darauf sauber weiter aufbauen. Das hat mein Verständnis von UI total geschärft.

Ich habe auch gemerkt wie sehr man davon profitiert Dinge wirklich praktisch umzusetzen. Figma wurde sicherer, ich habe gelernt schneller zu iterieren und Varianten zu bauen. Außerdem habe ich Illustrationen, Icons und Farben mehr als System verstanden und nicht nur als Deko. Regeln bewusst einsetzen, aber auch bewusst brechen, hat mir nochmal gezeigt wie stark Gestaltung wirken kann wenn man es gezielt macht.

Und ich habe richtig viel zum Prototyping gelernt. Also nicht nur Screens bauen, sondern Abläufe wirklich klickbar machen, Übergänge zu planen und auch erste Animationen einzusetzen, damit sich ein Flow echter anfühlt und man besser testen kann ob alles verständlich ist.

Der UX Writing Teil war für mich ein richtiges Aha Erlebnis. Ich habe gemerkt wie sehr Sprache die Wirkung eines Interfaces verändert. Ein Screen kann optisch perfekt sein und trotzdem unsicher wirken wenn das Wording nicht passt. Das nehme ich auf jeden Fall auch für andere Kurse und Projekte mit.

Was ich auch sehr stark gelernt habe ist wie wichtig Feedback ist. Nicht nur von Dozierenden, sondern auch von Kommilitoninnen und Kommilitonen und vor allem von echten Leuten außerhalb. Kurze Interviews und ehrliche Reaktionen zeigen sofort wo etwas unklar ist. Das kann eine App extrem verbessern, weil man nicht mehr nur aus der eigenen Perspektive denkt.

Außerdem habe ich viel mehr Gefühl für Weißraum bekommen. Mehr Luft bedeutet nicht leer, sondern klarer, ruhiger und hochwertiger. Dazu kommt, dass ich super viel über Flow und logische Nutzerführung gelernt habe. Also wie man Menschen Schritt für Schritt durch Entscheidungen führt, ohne Stress aufzubauen, und wie man komplexe Prozesse so vereinfacht dass sie sich leicht anfühlen.

Insgesamt war der Kurs für mich eine richtig gute Basis um alle wichtigen Bausteine zusammenzubringen und darauf aufzubauen. Nicht nur schön gestalten, sondern sinnvoll. Mit Struktur, Klarheit und trotzdem Kreativität. Das Umfeld war auch total inspirierend, weil man viele unterschiedliche Ideen gesehen hat und gemerkt hat wie wichtig Austausch und Kommunikation im Designprozess sind.

Für die Zukunft will ich noch mehr gestalten und weiter experimentieren. Regeln bewusst einhalten, aber auch mutiger brechen und da eine gute Balance finden. Ich will mich noch stärker von neuen Ideen inspirieren lassen, gleichzeitig mein Basiswissen gezielt einsetzen und UX und UI noch enger verbinden. Und vor allem will ich mehr echte User Tests machen, weil das am Ende den größten Unterschied macht.