Kontext

Eigene Portfolio-Website für den Bewerbungsprozess – fokussiert auf UX- und Produktrollen.

Herausforderung

Wie überzeuge ich potenzielle Arbeitgeber in kürzester Zeit – und zeige gleichzeitig umfassende UX-Kompetenz?

User-Ziel

  • ein passendes Teammitglied zu finden

  • Arbeitsweise, Fähigkeiten & Kenntnisse schnell erfassen

Business-Ziel

  • Höhere Response-Rate bei Bewerbungen

  • Wahrnehmung der Full-Stack UX-Kompetenz

  • Einladung zum Job-Interview

Leistungen

Fokusgruppe Persona Card Sorting Informationsarchitektur Navigationskonzept Userflow Scribble Wireframe Mockup Designsystem Mid-Fi-Prototyping Usability Test Navigationskonzept Design Dokumentation Frontend-Umsetzung Barrierefreiheit nach WCAG 2.1

Ergebnis

Reduktion als Strategie

Weniger zeigen, um mehr zu überzeugen. Die finale Portfolio-Struktur löst den Widerspruch zwischen schneller Orientierung und Expertise-Nachweis.

Tablet zeigt Startscreen der Portfolio-Website
3D-Avatar macht Startseite einprägsam
  • 1

    Onepager: reduziert Klickwege

  • 2

    Direkter Kontakt: über offene Mailadresse

  • 3

    Kerninfos im Headerbereich: für schnelle Einordnung

  • 4

    Sekundärnavigation: für gezieltes Eintauchen in Prozesse

  • 5

    WCAG 2.1-konform umgesetzt

Research

30 Sekunden pro Portfolio

So wenig Zeit haben Recruiter laut meinem Research. Häufiges Feedback auf UX-Portfolios: „Zu viel, zu unklar, zu wenig echt."

Auf dem hinteren Blatt sieht man das Card Sorting, Vorne die User Persona.
User Persona: wenig Zeit, hoher Druck

ZENTRALER DESIGNKONFLIKT:

Zeitmangel vs. tiefgründige Projekte

STRUKTURIERUNG

Von Freelancer-Bandbreite zu Recruiter-Tempo

Die ursprüngliche Informationsarchitektur war auf Freelance-Akquise ausgelegt: umfassende Darstellung, detaillierte Kategorien.

Das funktioniert, wenn Zeit für Exploration vorhanden ist. Im Bewerbungsprozess entscheiden Recruiter in Sekunden – hier zählt schneller Überblick statt Vollständigkeit.

Sitemap zeigt die ursprüngliche hierarchische Navigationsstrukur
Informationsarchitektur: Hierarchische Navigation für komplexe Inhalte
der hintere Useflow zeigt den Weg mit der hierarchischen Navigation, vorne sieht man die überarbeitete Onepager-Struktur
Userflow-Optimierung: Von 4-Klick-Hierarchie zu 1-Klick-Usecase-Zugang

Ergänzung des Navigationskonzeptes:

Second Navigation als Scanning-Hilfe

Key-Insight

Mobile Navigation verlangt Umdenken

In Usertests zeigte sich: Mobile Navigation folgt eigenen Regeln. Wechselnde Positionen, ein- und ausblendende Elemente und zu viele gleichzeitige Microinteractions störten die Orientierung.

2 Screens im Vorher/Nachher-Vergleich
Optimierte Navigation: Mehr Platz für Inhalte
  • 1

    Navigation blendete beim Scrollen rein/raus
    → Jetzt konsistent sichtbar

  • 2

    Schließen-Button war verdeckt
    → Jetzt verlässlich da

  • 3

    Sehr kleiner Contentbereich
    → Jetzt mehr Platz für Inhalte

  • 4

    CTA-Button blendeten beim Scrollen ein
    → Jetzt fokussiert ohne CTAs

Prozess

Token, Code und Barrierefreiheit – drei Perspektiven, ein System

Designsysteme brauchen Iteration zwischen Design und Code. Das wurde mir beim Entwickeln klar: Token-Lücken zeigten sich erst in der Umsetzung, Barrierefreiheit ging weit über Farben und Schriftgrößen hinaus.

Designsystem mit Token für Schriften, Farben, Abstände und Radien
Designsystem mit Token-Hierarchie: Primitive → Contextual → Component für Dark/Light Mode
screenreader-kompatible Toggle, Wechsel zwischen Dark/Light Modus width=
Barrierefreier Toggle mit klarer Zustandsbeschreibung

Impact & Next Steps

End-to-End UX-Prozess zahlt sich aus

6 Monate Solo-Projekt: Von der Informationsarchitektur über das Designsystem bis zur Programmierung verantwortete ich den kompletten Prozess. Mehrere Redesign-Zyklen auf Basis von User-Feedback führten zu einer Research-optimierten Navigation, die auch auf Mobile schnelle Orientierung bietet.

KPI-Messung läuft:

  • Response-Rate Tracking über 6 Monate

  • Interview-Feedback systematisch dokumentieren

  • Verweildauer auf Projektseiten messen

Meine Learnings

  • Barrierefreiheit bei jedem Schritt mitdenken
  • KI als Sparringpartner für Code-Review und Ideation nutzen, aber fachlich validieren
  • Mobile folgt eigenen Usability-Regeln
Tablet zeigt Dark Mode der Portfolio-Website
Optimiert für 30-Sekunden-Entscheidungen – jetzt kommt der Praxistest
Portrait 3D Diana Grafl

Bereit für klare Lösungen?

Sie suchen eine UX-orientierte Designerin mit Blick für Nutzer und Details? Ich freue mich auf den Austausch.

LinkedIn-Profil