User Experience

Gutes Design beginnt nicht mit einer Skizze, sondern mit einer Frage. Im Bereich UX/UI-Design kombiniere ich kreative Visionen mit fundiertem User Research, um Schnittstellen zu schaffen, die nicht nur intuitiv bedienbar sind, sondern echte Probleme lösen.

← Zurück zur Übersicht

nfografik des UI/UX-Designprozesses in 7 Schritten: 1. Research & Discovery, 2. Informationsarchitektur & Konzeptphase, 3. Wireframes, 4. High Fidelity Mockups, 5. Interaktiver Prototyp, 6. Übergabe an Entwickler, 7. Iteration & Testing.

Handschriftliche To-Do-Liste auf einem Block zum Thema Research und Discovery: Ziel ist das Verständnis für wen und warum das Produkt entsteht. Die Liste umfasst Stakeholder-Interviews, Nutzerforschung, Beobachtungen, Konkurrenzanalyse und Problemdefinition.

Handschriftliche Sitemap in einem Notizblock, die die Struktur einer Anwendung visualisiert: Von einem Startpunkt verzweigen sich die Bereiche Dashboard, Kundenübersicht (mit Unterpunkten wie Firmen, Personen, Verträge und Aufträge) sowie Einstellungen (Organisation, Benutzerdaten und Datenimport).

Digitaler Userflow für eine Kundenübersicht-Ansicht: Ein Prozessdiagramm aus verschiedenen Boxen und Verbindungslinien auf hellem Grund. Es zeigt die logische Abfolge von Nutzeraktionen, Verzweigungen und Systemantworten, die den Weg des Nutzers durch die Kundenverwaltung beschreiben.

Detaillierter Wireframe einer Kundenübersicht mit einer Tabelle (Firmen und Personen), Such- und Filterfunktion sowie einer aktiven Sidebar-Navigation auf dem Punkt Kundenübersicht.

High-Fidelity-Mockup einer Kundenübersicht im finalen UI-Design: Die Benutzeroberfläche zeigt eine strukturierte Tabelle mit echten Datensätzen (Name, Anschrift, Zugehörigkeit), eine funktionale Suche mit Filteroptionen sowie eine Sidebar mit Icons für Dashboard, Kundenübersicht, Berechtigung, Datenimport und Einstellungen.

Digitaler Userflow für ein Firmenprofil: Ein Prozessdiagramm mit verzweigten Boxen und Interaktionspfaden auf hellem Hintergrund. Es visualisiert die Navigationslogik zwischen der Profilübersicht und den detaillierten Unterbereichen wie Arbeitnehmerlisten und Vertragsmanagement sowie die notwendigen Systementscheidungen.

Wireframe einer Firmen-Detailansicht mit einer Tab-Leiste für verschiedene Kategorien wie Firmenprofil, Arbeitnehmer und Verträge, sowie Platzhaltern für Stammdaten und Anschrift.

Finales UI-Design eines Firmenprofils im Default-Modus: Die Seite zeigt detaillierte Informationen zur „Beispiel GmbH“ in strukturierten Karten für allgemeine Informationen und Anschrift. Oben befindet sich eine Tab-Navigation (Firmenprofil, Arbeitnehmer, Verträge etc.) sowie Bearbeiten-Icons (Stift-Symbol) an den einzelnen Datenbereichen.

Finales UI-Design des Firmenprofils im Bearbeitungsmodus: Der Bereich „Allgemeine Informationen“ enthält aktive Eingabefelder für Firmenname und Rechtsform sowie die Schaltflächen „Abbrechen“ und „Speichern“. Die übrigen Datenbereiche wie Anschrift verbleiben in der schreibgeschützten Ansicht mit Bearbeiten-Icon.

Digitaler Userflow für einen Dublettenmanager: Ein komplexes Prozessdiagramm auf hellem Grund mit verschiedenen Knotenpunkten und logischen Abzweigungen. Es visualisiert den Workflow von der ersten Suche über den Datenvergleich bis hin zur finalen Bestätigung der Zusammenführung.

Wireframe eines Vergleichs- oder Auswahlprozesses: Zwei Personenkarten unter „Auswahlmöglichkeiten“ und eine finale Karte unter „Finaler Datensatz“, jeweils mit Platzhaltern für Name, Geburtsdatum und Adresse.

Benutzeroberfläche „Dublette bereinigen“ in der Initialansicht: Ein bereits ausgewählter Datensatz (Atze Badekappe) wird links angezeigt, während rechts ein Platzhalter mit der Aufforderung „Datensatz auswählen“ zur Zusammenführung einlädt.

Wireframe-Ansicht zur Datensatz-Auswahl im Dublettenmanager: Die schematische Darstellung zeigt ein zentrales modales Fenster mit einem Suchfeld und einer darunterliegenden Liste für Suchergebnisse. Platzhalter visualisieren die Anordnung der Namens- und Adressdaten, die zur Identifizierung der Dublette dienen.

Geöffnetes modales Fenster „Datensatz auswählen“ über der Benutzeroberfläche: Es zeigt eine Suchmaske mit dem Suchbegriff „Ba“ und eine Ergebnisliste mit zwei Einträgen (Ballon Willy GmbH und Atze Badekappe) zur Auswahl des zweiten Datensatzes.

Gegenüberstellung zweier Datensätze von „Atze Badekappe“ im Dublettenmanager: Die Unterschiede in der Adresse (Hausnummer 12a vs. 12) sowie die abweichende Anzahl an Verträgen und Dokumenten sind farblich hervorgehoben.

Finale Phase der Dublettenbereinigung: Datensatz 1 ist als Zieldatensatz blau markiert. Darunter erscheint eine grüne Vorschaukarte des „neuen Datensatzes nach der Überführung“, welche die kombinierten Verträge (3+5) und Dokumente (12+15) visualisiert.

Digitaler Userflow der Einstellungs-Übersicht: Ein Prozessdiagramm, das die zentrale Verteilung zu verschiedenen Administrationsbereichen visualisiert. Schwarze Kreise mit Kürzeln wie „S1“ markieren die Schnittstellen zu den detaillierten Sub-Flows für spezifische Kapitel wie „Meine Organisation“.

Wireframe der Einstellungsseite mit einer Kachel-Navigation für sechs Kernbereiche, darunter Organisation, Benutzerverwaltung, Datenimport und E-Signatur.

Finales UI-Design der Einstellungsseite: Unter einer einleitenden Beschreibung werden acht Themenbereiche als Kacheln mit Icons zur Auswahl angeboten, darunter Meine Organisation, Meine Benutzerdaten, Benutzerverwaltung, Datenimport, Rechenkerne und E-Signatur. Die Sidebar markiert den Punkt Einstellungen als aktiv.

Ansicht eines hochkomplexen interaktiven Prototyps in einem Design-Tool: Eine Vielzahl von Blueprints und Screens ist durch ein dichtes Netz aus hellblauen Verbindungslinien visualisiert, welche die logischen Verknüpfungen und Nutzerpfade zwischen den einzelnen Interface-Elementen darstellen.

Ansicht eines Design-Handover-Tools für die Entwicklung: Ein UI-Screen wird mit technischen Spezifikationen wie Padding, Abständen (Gaps) und CSS-Eigenschaften (Flexbox-Layout) überlagert dargestellt. Am rechten Bildschirmrand befindet sich eine Inspect-Leiste mit Code-Fragmenten, Farbwerten und Assets für die technische Implementierung.

Handschriftliche Notizseite in einem Block mit der Überschrift „To Do’s // User-Feedback“ als Symbol für die Iterationsphase: Die Seite ist durch eine vertikale Linie in zwei Bereiche unterteilt, die mit einem grünen Smiley für positives Feedback und einem roten Smiley für Optimierungspunkte markiert sind. Drei farbige Stifte liegen bereit, um neue Arbeitspunkte für die nächste Prozessrunde zu dokumentieren.