01 Typo in Bewegung
Aufgabe war es, die typografische Struktur eines Interfaces für Desktop und Mobile/Tablet zu gestalten. Im Mittelpunkt standen Lesbarkeit, klare Hierarchie und funktionaler Einsatz von Schrift.
Zur Auswahl standen drei Textarten (emotional, sachlich, technisch) und ich habe den emotionalen Text gewählt, um die Textelemente etwas lebendiger zu gestalten.
Wir haben vom Dozenten ein Textdokument mit den UI-Textbausteinen bekommen (z. B. Titel, Untertitel, Fließtext, Bildunterschrift usw) und daraus die typografische Struktur des Interfaces aufgebaut. Zuerst wurde alles in Schwarz-Weiß gestaltet, optional konnte anschließend Farbe ergänzt werden. Das Bildmaterial mussten wir selbst suchen und passend auswählen.
Arbeitsprozess
Ich habe zuerst mit der Mobile-Version gestartet und mehrere Typo-Varianten ausprobiert. Am Ende habe ich mich für eine klare, minimalistische Richtung entschieden und Neue Montreal gewählt, weil die Schrift sehr vielseitig ist und viele Schnitte bietet (4 Roman, 4 Italic). Damit lässt sich die Hierarchie gut aufbauen, ohne dass es unruhig wirkt.
Für das Layout habe ich ein 6-Spalten-Grid mit einem 10-px Raster genutzt. Den Text habe ich in Titel, Subtitel, Body und Labels gegliedert und auf einheitliche Zeilenabstände und Abstände zwischen den Textblöcken geachtet, damit alles konsistent und gut lesbar bleibt.
Später habe ich gemerkt, dass es sinnvoller ist, zuerst die Desktop-Version festzulegen und danach das Design sauber auf Mobile zu übertragen.
Als ich den Titel gelesen habe, war mir sofort klar, welches Bild ich für die Startseite möchte: ein Pflanzelement in Beton, als visuelle Metapher für die Idee des Textes. Dafür habe ich Endless Tools genutzt, eine passende 3D-Modell ausgewählt und das Material angepasst.
Die Suche nach dem passenden Pflanzenmotiv hat etwas gedauert, deshalb habe ich mehrere Varianten ausprobiert und nebeneinander verglichen. Unten sind alle getesteten Optionen als eine Bildreihe zu sehen, bevor ich mich für die finale Auswahl entschieden habe.
Insgesamt war der Arbeitsprozess umfangreich, aber hier sind die wichtigsten strukturellen Änderungen zu sehen, genau die Schritte, die auf diesem Screenshot deutlich erkennbar sind.
Final Desktop
Final Mobile
![Mockup [Export Me]_2 2.gif](https://fhp.incom.org/action/open-image/926711/big/926711.gif)
![Mockup [Export Me]_2 2.gif](https://fhp.incom.org/action/open-image/926711/post-gallery/926711.gif)
02 Formular-Gestaltung
In der zweiten Aufgabe ging es darum, ein bestehendes Formular zu überarbeiten und daraus eine digitale Version zu entwickeln, die nutzerfreundlich, klar strukturiert und möglichst barrierearm ist. Der Fokus lag auf visueller Verständlichkeit, klarer Sprache und einer Gestaltung, die sich an echten Nutzungssituationen orientiert.
Problemstellung
Für die Überarbeitung haben wir (meine Partnerin Sina Lang und ich) das Kindergeld-Formular ausgewählt. Schon beim ersten Durchsehen wurde deutlich, dass das ursprüngliche Dokument schnell überfordert: Viele Informationen und Felder stehen sehr dicht beieinander, die Orientierung ist nicht immer eindeutig und einzelne Bereiche laden zu Fehlangaben ein (z. B. bei Angaben wie der Staatsangehörigkeit). Dazu kommt, dass es keine direkte Rückmeldung gibt, ob etwas fehlt oder falsch eingetragen wurde, und Elemente wie QR-Codes eher ablenken als wirklich zu helfen.
Unser Ansatz war deshalb, die Inhalte klarer zu ordnen und die Nutzerführung spürbar zu verbessern. Das Formular wurde in verständliche Schritte gegliedert, damit es nicht wie eine „Wand aus Formularfeldern“ wirkt. Zusammengehörige Informationen wurden sichtbar gruppiert, wichtige Felder klar hervorgehoben und wiederkehrende Eingaben vereinfacht (z. B. durch Optionen wie „gleiche Adresse wie Antragsteller“). Auch typografisch und in den Abständen sollte alles ruhiger und leichter lesbar werden, damit man schneller versteht, wo man gerade ist und was als Nächstes nötig ist.
Ein wichtiger Teil des Prozesses war die Zusammenarbeit: Den Dokument-Check und die Analyse haben wir gemeinsam gemacht und dabei die Hauptprobleme sowie Ziele festgelegt. Danach haben wir getrennt gestaltet, um unterschiedliche Lösungen auszuprobieren. Zum Schluss haben wir unsere Entwürfe miteinander verglichen, Stärken herausgearbeitet und daraus klare Learnings für eine nutzerfreundliche, strukturierte Lösung abgeleitet. Die Zielgruppe waren dabei vor allem Eltern, oft mit wenig Routine bei Anträgen und teilweise mit internationalem Hintergrund, umso wichtiger waren klare Sprache, gute Orientierung und ein Layout, das Fehler möglichst verhindert.
Erste Entwürfe
Ich habe Feedback bekommen, dass der Zeilenabstand größer sein sollte und die Textspalte insgesamt etwas schmaler sein müsste, damit alles besser lesbar wird. Meine Lösung war, die Margins breiter zu setzen – dadurch wurde die Zeilenlänge kürzer und die typografischen Elemente wirken insgesamt ruhiger und deutlich besser lesbar.
Finale Entwürfe
03 Layout-Raster neu denken
Für diese Übung haben wir eine Sammlung von Screenshots/Fotos verschiedener Website-Interfaces bekommen, aus denen jede Gruppe ein Beispiel auswählen konnte. Wir haben in Zweierteams ein vorgegebenes Interface analysiert und dazu kurze Interviews geführt, um wichtige Insights zu sammeln. Danach sollte das Interface nicht nur verbessert, sondern neu gedacht werden, mit neuen Layout-Ideen, einer anderen Interactions und mit Blick auf Zugänglichkeit.
Aus den verschiedenen Optionen haben meine Partnerin Katharina Michnik und ich die Login-Seite von Tinder ausgewählt. Am Anfang waren wir kurz unsicher, ob wir mit der Desktop- oder der Mobile-Version starten sollen. Dann wurde aber klar, dass Tinder hauptsächlich mobil genutzt wird, deshalb entwickeln wir unser Konzept konsequent für das Smartphone und arbeiten mit der Mobile-Version als Basis.
Am Freitag haben wir dazu erste Handskizzen erstellt, ca. 20 Minuten Feedback im 6-Augen-Prinzip bekommen, uns anschließend in kleinen Gruppen ausgetauscht und die Idee zum Schluss in einer 3-Minuten-Präsentation vorgestellt. Danach konnten wir den Entwurf zwei Wochen weiterentwickeln.
Erste Ideen
Wir hatten in der Konzeptphase mehrere unterschiedliche Ideen und haben sie Schritt für Schritt getestet:
Logo + Streichholz: Beim Start sollte man mit dem Finger ein Streichholz „anzünden“ und damit symbolisch das Tinder-Feuer entfachen.
Passwort als Feuer-Geste: Der Login sollte über eine eigene Fingerbewegung mit „Flammen“ funktionieren. Das Problem dabei: So ein Passwort wäre ungewohnt und könnte schnell vergessen werden.
Login über Präferenzen: Als Einstieg sollten erneut Kriterien ausgewählt werden, was man sucht – das wirkte am Ende aber nicht kreativ genug.
Spiel / Puzzle-Idee: Durch Swipen sollte man wie ein Puzzle einen „idealen Partner“ zusammensetzen und so ins App-Interface kommen.
Finale Idee
Am überzeugendsten war am Ende ein Login über Finger-Scan (Touch ID), der gleichzeitig das Tinder-Feuer „anzündet“. Wenn der Fingerabdruck passt, ist die Person verifiziert und kommt direkt rein.
Wenn nicht, muss die Verifikation erneut durchgeführt werden. So bleibt die Idee spielerisch und passend zur Marke, aber trotzdem schnell und verständlich.
04 Semesterprojekt Redesign
Im letzten Semesterprojekt sollten wir eine bestehende digitale Anwendung auswählen und gezielt verbessern. Statt alles komplett neu zu designen, haben wir uns auf ein konkretes Feature konzentriert und dafür einen kompletten Ablauf gestaltet. Dabei haben wir Typografie, Raster, Farben, Designsystem, Texte/UX-Writing und Barrierefreiheit berücksichtigt.
Projektbeschreibung
Für dieses Projekt habe ich mich bewusst für einen Redesign der Website GoSpring entschieden.
GoSpring ist eine digitale Gesundheitsplattform, die sich auf die ärztlich begleitete Versorgung mit verschreibungspflichtigen Medikamenten spezialisiert. Der Fokus liegt auf sensiblen Themen wie Männergesundheit, bei denen Diskretion, Vertrauen und eine klare Nutzerführung besonders wichtig sind.
Nutzer können auf der Website medizinische Informationen erhalten, ein Rezept anfragen oder, falls bereits vorhanden, Medikamente online bestellen.
Projektidee
Projektidee
Die zentrale Idee des Projekts war es, den bestehenden Webauftritt von GoSpring nutzerfreundlicher und emotionaler zu gestalten.
Ich wollte eine Website entwickeln, die nicht nur funktional ist, sondern durch Storytelling eine klare und nachvollziehbare Nutzererfahrung schafft. Ziel war es, komplexe medizinische Prozesse verständlich zu machen und dem Nutzer das Gefühl zu geben, gut begleitet zu werden.
Projektfokus
Im Rahmen des Redesigns habe ich mich bewusst auf eine zentrale Funktion konzentriert: den kompletten Kaufprozess eines Produkts für Nutzer mit bereits vorhandenem Rezept.
Der Fokus lag darauf, diesen Ablauf vom Einstieg bis zur Bestellbestätigung klar, ruhig und logisch darzustellen.
Zielsetzung
Die Ziele des Projekts waren:
- Verbesserung der Übersichtlichkeit im Kaufprozess
- Reduktion von Unsicherheiten bei sensiblen Gesundheitsthemen
- Aufbau von Vertrauen durch Design, Sprache und Struktur
- Klare Nutzerführung von der Information bis zum Kauf
- Schaffung einer emotionalen, aber seriösen Markenwirkung
Analyse der bestehenden Website
Zu Beginn habe ich die bestehende GoSpring-Website analysiert, insbesondere im Hinblick auf:
- Seitenstruktur
- Navigation
- Inhalte und Tonalität
- Kauf- und Entscheidungsprozesse
Dabei wurde deutlich, dass der Prozess zwar funktional aufgebaut ist, jedoch an einigen Stellen zu komplex und wenig emotional geführt wirkt.
Vor allem auf den Produktseiten zeigten sich mehrere Schwächen:
- Teilweise duplizierte Produkte, die die Orientierung erschweren
- Fehlende oder wenig präsente Produktbilder, wodurch der emotionale Bezug fehlt
- Vorhandene Dosierungsangaben, die jedoch visuell nicht hervorgehoben sind
- Keine kurze, verständliche Beschreibung, die erklärt, um welches Medikament es sich handelt und wofür es eingesetzt wird
Diese Punkte erschweren es Nutzern, Produkte schnell zu verstehen, zu vergleichen und eine sichere Kaufentscheidung zu treffen besonders bei sensiblen medizinischen Themen.
Flowchart: Original Website
Zur besseren Übersicht habe ich einen Flowchart des bestehenden Kaufprozesses erstellt. Dieser zeigte mehrere Verzweigungen und Entscheidungspunkte, die für Nutzer teilweise unübersichtlich sein können.
Wireframes
Im nächsten Schritt habe ich Wireframes erstellt, um die neue Seitenstruktur zu testen, Inhalte sinnvoll zu priorisieren, den Nutzer visuell durch den Prozess zu führen.
Ausgewählte Wireframe-Bereiche in verschiedenen Varianten
Der Prozess der Wireframe-Erstellung war für mich wirklich spannend. Zuerst habe ich das grundlegende Layout entwickelt, dann passende Texte ausgearbeitet, die das Storytelling des Unternehmens unterstützen, und anschließend Schritt für Schritt die Website mit Inhalten gefüllt und durch visuelle Elemente lebendiger gemacht. Die Bilder habe ich von Freepik ausgewählt und anschließend in Photoshop bearbeitet, damit sie besser zum Stil des Projekts passen.
Eine der Herausforderungen dabei war die Festlegung der Farbpalette: Es galt zu entscheiden, welche Farbe dominieren und welche als Hauptfarbe dienen sollte, damit das Design stimmig wirkt und die Markenwahrnehmung unterstützt.
Home Page
Problempositionierung
Lösung durch das Produktangebot
Produktseite
Designkonzept
Das visuelle Konzept ist bewusst minimalistisch und ruhig gehalten.
Wichtige Gestaltungsprinzipien waren:
- klare Typografie
- viel Weißraum
- reduzierte Farbpalette
- emotionale, aber seriöse Bildsprache
Erstellung der 3D-Tabletten in Blender
Für das Redesign sollten wir nur frei verfügbare Bilder nutzen und keine KI verwenden. Deshalb habe ich die Tabletten selbst in Blender modelliert, mit dem ersten Buchstaben des Markennamens Spring.
Ich habe mich dafür entschieden, weil Fotos von Tabletten aus dem Internet oft unterschiedlich aussehen (andere Perspektiven, anderes Licht). Mit eigenen 3D-Modellen konnte ich einen einheitlichen Stil schaffen, damit die Website klar und sauber wirkt.
Finaler Prototyp & Umsetzung
Finale Frames
Der finale Entwurf wurde als klickbarer Prototyp umgesetzt, der den vollständigen Kaufprozess abbildet. So kann die Nutzerführung realistisch nachvollzogen und getestet werden.
Herausforderungen
Die größten Herausforderungen im Projekt waren: die Vereinfachung medizinischer Inhalte, die Balance zwischen Emotion und Seriosität, die bewusste Fokussierung auf eine Kernfunktion.
PDF der Abschlusspräsentation
Fazit
Insgesamt bin ich mit dem Ergebnis zufrieden. Das Redesign bietet eine klarere Struktur, eine stärkere emotionale Ansprache und eine verständliche Nutzerführung. Besonders wichtig war mir, eine konsistente Geschichte zu erzählen, die den Nutzer Schritt für Schritt durch den Prozess begleitet.
Reflexion zum Kurs
Wenn ich auf den gesamten Kurs zurückblicke, sehe ich eine klare Entwicklung in meiner Arbeitsweise und meinem Verständnis von Design.
Die erste Aufgabe bestand darin, einen emotionalen Text in eine Web- und Mobile-Version zu übersetzen. Damals habe ich mich stark auf die visuelle Gestaltung konzentriert. Heute sehe ich selbst einige Schwächen, vor allem in der Struktur, Hierarchie und im Umgang mit Weißraum. Diese Aufgabe war jedoch sehr wichtig für mich, weil ich dadurch verstanden habe, wie entscheidend Klarheit und Informationsaufbau im digitalen Raum sind.
In der zweiten Aufgabe ging es darum, ein Formular zu digitalisieren. Diese Übung hat mir geholfen, strukturierter zu denken. Ich habe gelernt, Informationen logisch zu ordnen, Inhalte zu reduzieren und sie verständlich für unterschiedliche Nutzergruppen aufzubereiten. Mir wurde bewusst, wie wichtig einfache Sprache und klare Schritte sind.
Die dritte Aufgabe war, einen Login-Prozess neu zu denken. Hier musste ich kreativer arbeiten und bestehende Muster hinterfragen. Gleichzeitig habe ich gelernt, dass Innovation nur dann sinnvoll ist, wenn sie für den Nutzer verständlich bleibt. Diese Balance zwischen Kreativität und Usability war eine wichtige Erkenntnis für mich.
Das medizinische Webprojekt am Ende des Kurses war für mich der größte Schritt. Es war das erste Mal, dass ich eine komplette Website selbstständig konzipiert und gestaltet habe. Ich musste Analyse, Struktur, Storytelling und visuelles Design miteinander verbinden. Besonders wertvoll war das konstruktive Feedback des Dozenten, das mir geholfen hat, meine Entscheidungen bewusster zu treffen und meine Arbeit weiterzuentwickeln.
Ich habe in diesem Projekt viele Erkenntnisse aus den vorherigen Aufgaben angewendet. Ich habe stärker auf klare Struktur, saubere Nutzerführung und verständliche Inhalte geachtet. Dadurch konnte ich einen funktionalen Webauftritt entwickeln, der nicht nur gut aussieht, sondern auch logisch aufgebaut ist und Vertrauen vermittelt.
Insgesamt hat mir der Kurs gezeigt, dass gutes Design mehr ist als Ästhetik. Es geht darum, Prozesse verständlich zu machen, Nutzer zu begleiten und klare Entscheidungen zu treffen. Ich fühle mich am Ende des Kurses sicherer im Umgang mit komplexen Aufgaben und sehe deutlich meine persönliche Weiterentwicklung.
