Ich designe digitale Produkte, die Menschen verstehen. Von User Research über Prototyping bis zum pixel-perfekten Interface – ich verbinde strategisches UX-Denken mit visuellem Handwerk.
Nutzerbedürfnisse verstehen. Produkte gestalten, die wirken.
Mein Ansatz: Jedes Interface beginnt mit den Menschen, die es nutzen. Ich kombiniere datengetriebene User Research mit einem Auge für Details – so entstehen digitale Produkte, die sich intuitiv anfühlen und messbar performen.
Mit einem dualen Hintergrund in UX/Product Design und crossmedialer Gestaltung bringe ich strategisches Denken und visuelles Handwerk zusammen.
02/2026 – 05/2026
Online Employer Branding Manager
Konzeption & Umsetzung digitaler Employer-Branding-Maßnahmen und gezielte Content-Erstellung für moderne Kanäle.
01/2025 – 01/2026
Media Manager
Konzeption von Marketing-Kampagnen, Qualitätssicherung (CI/CD) und Steuerung externer Dienstleister und Agenturen.
08/2022 – 01/2025
Media Designer
Mitwirkung am Markenrelaunch, Gestaltung ganzheitlicher Digital- und Printmedien (inkl. UI/UX, Video & Animation).
03/2018 – 02/2022
B.A. Zeitbasierte Medien
Studium mit Vertiefung in Branding, Corporate Design, visueller Kommunikation und crossmedialer Medienproduktion.
02 Expertise
01
UX/UI Design & Prototyping
Entwicklung von intuitiven User Interfaces und interaktiven Prototypen mit Fokus auf Usability, Accessibility und Design Systems.
WireframingHigh-Fidelity UIFigmaDesign Systems
02
User Research & Strategy
Datengestützte Analyse von Nutzerbedürfnissen, Erstellung von Personas und User Journeys für zielgerichtete Produktstrategien.
User InterviewsUsability TestingA/B TestingPersonas
03
Frontend & Interaction
Nahtlose Zusammenarbeit mit Entwickler-Teams durch Verständnis für Web-Technologien und komplexe Mikrointeraktionen.
HTML/CSSWeb-AnimationResponsive DesignHandoff
04
Crossmediales Design
Ganzheitliche Gestaltung über alle Medienkanäle hinweg – von Print und Packaging über Brand Identity bis hin zu 3D-Visualisierung und Social Media Content.
Smart Login CinematicPredictive DashboardSmart Intent TransferFinPro AI AssistantAusgabenanalyseTime to SpendKI AnalyseAbo-VerwaltungAbo-EinstellungenKarteneinstellungenPIN VerwaltungProfileinstellungenFinanzierungsplan
Das Problem: Blindflug im Online-Banking
Die Persona für dieses Projekt ist Niklas Schneider (28). Niklas steht stellvertretend für eine Generation von Nutzern, die von klassischen Banking-Apps zunehmend frustriert ist. Das Kernproblem: Die Interfaces sind extrem unübersichtlich, überladen und rein reaktiv. Sie präsentieren eine endlose, tabellarische Historie vergangener Transaktionen, bieten aber nahezu keine greifbaren Informationen über das eigene Ausgabenverhalten oder Hilfestellungen für ein vorausschauendes Management. Der Nutzer starrt auf einen Kontostand, weiß aber oft nicht, wie viel von diesem Geld eigentlich schon für kommende Fixkosten verplant ist.
Fokus: Predictive Data Visualization, Trust UX, AI-to-UI Interaction
Die Strategie: Von reaktiven Tabellen zu proaktiver Planbarkeit
Die architektonische Lösung für FinPro besteht darin, das klassische Banking-Paradigma komplett umzudrehen. Anstatt Niklas zu zwingen, Taschenrechner und Kontoauszug im Kopf zu synchronisieren, übernimmt das Interface die komplexe Datenverarbeitung. Abstrakte Finanzströme werden in leicht verständliche, in die Zukunft gerichtete Visualisierungen und Intent-basierte Interaktionen (natürliche Sprache) übersetzt. Das Ziel ist absolute finanzielle Planbarkeit durch "Predictive Banking".
UX Engineering in Action
Um das Vertrauen in ein digitales Finanzprodukt zu maximieren und gleichzeitig das Ausgabenmanagement radikal zu vereinfachen, habe ich folgende Frontend-Mechaniken entwickelt:
Predictive Balance & "Safe to Spend": Das Herzstück des Dashboards ist ein dynamisches Liniendiagramm (via Chart.js), das nicht die Vergangenheit, sondern die finanzielle Zukunft simuliert. Ein zentraler "Safe to Spend"-Indikator zieht wiederkehrende Ausgaben automatisch ab. Niklas sieht auf den Cent genau, was am Ende des Monats wirklich noch ausgegeben werden darf.
Smart Intent Transfer via FinPro AI: Schluss mit endlosen IBAN-Formularen und verschachtelten Überweisungsmenüs. Eine zentrale KI-Eingabeleiste ermöglicht fließende, natürliche Interaktionen. Ein Prompt wie "Lege 200€ für den Urlaub zurück" reicht aus. Das System verarbeitet den Intent, reduziert den "Safe to Spend"-Betrag und füllt die visuellen Sparziele (Liquid Savings Goals) in Echtzeit auf.
Trust UX & Positive Friction: Um unüberlegte Ausgaben zu verhindern, wurden herkömmliche "Senden"-Buttons durch bewusste Interaktionen (wie einen "Slide to Authenticate"-Regler) ersetzt. Zusätzlich greift der "Community Shield": Eine Echtzeit-Warnung, die den Nutzer durch starke visuelle Kontraste ("Positive Friction") proaktiv stoppt, falls eine Zahlung an einen potenziell unsicheren Kontakt initiiert wird.
Fazit
„UX bedeutet für mich Strategie, Struktur und Logik - nicht bloß schöne Optik.“
FinPro ist der perfekte Beweis für dieses Prinzip. Durch den strategischen Einsatz moderner Frontend-Technologien und KI-Integrationen wird ein traditionell starres, unübersichtliches System in ein empowerndes Werkzeug verwandelt, das dem Nutzer die volle Kontrolle über seine finanzielle Zukunft zurückgibt.
ClauseClear: AI Vertrags-Analyse
Wie KI-gestützte Vertragsanalyse versteckte Klauseln aufdeckt und Nutzern eine echte Verhandlungsmacht gibt.
Smart Login CinematicVertragsübersichtDokumenten-UploadAnalyse-DashboardInteraktiver WissensbereichRed Flag ScoreRechtsanwalt ChatBenutzerprofilAbo-Verwaltung
Das Problem: Extreme juristische Komplexität
Die Persona für dieses Projekt ist Max Müller (32). Max steht stellvertretend für eine Generation von Nutzern, die bei komplexen Verträgen – sei es für die neue Wohnung, das Fitnessstudio oder Freelance-Projekte – schnell kapitulieren. Das Kernproblem: Die Dokumente sind extrem unübersichtlich, voller juristischem Jargon und darauf ausgelegt, den Leser zu ermüden. Der Nutzer starrt auf seitenlange AGBs, verliert den Überblick über versteckte Klauseln, unvorteilhafte Kündigungsfristen oder drohende Vertragsstrafen und unterschreibt notgedrungen im Blindflug – mit oft teuren oder rechtlich bedenklichen Konsequenzen.
Fokus: Legal Tech UX, AI-Driven Text Analysis, Human-in-the-Loop, Trust Design
Die Strategie: Von juristischer Komplexität zu proaktiver Handlungssicherheit
Die architektonische Lösung für ClauseClear besteht darin, die Asymmetrie zwischen Dienstleister und Verbraucher komplett aufzubrechen. Anstatt Max zu zwingen, Jura zu studieren oder teure Anwälte für einen simplen Check zu bezahlen, übernimmt das Interface die komplexe juristische Datenverarbeitung. Abstrakte Paragrafen werden in leicht verständliche, visuell greifbare Risikobewertungen und direkte Handlungsoptionen übersetzt. Das Ziel ist absolute vertragliche Transparenz durch "AI-Assisted Legal Parsing".
UX Engineering in Action
Um die Hürde vor juristischen Dokumenten abzubauen und gleichzeitig maximale rechtliche Sicherheit (Trust UX) auszustrahlen, habe ich folgende Frontend-Mechaniken entwickelt:
Automated Red Flag Detection & Fairness-Score: Das Herzstück der App ist der smarte Dokumenten-Scanner. Die KI analysiert hochgeladene Verträge und berechnet einen übersichtlichen "Fairness-Score" (visualisiert via Chart.js). Kritische Passagen – wie unzulässige Datenweitergaben oder versteckte Preiserhöhungen – werden direkt im Text als visuelle "Red Flags" isoliert, kategorisiert und in einfache, greifbare Sprache übersetzt.
One-Click Dispute Resolution: Wenn rechtswidrige oder eigenartige Klauseln gefunden werden, lässt das System den Nutzer nicht allein. Eine smarte Interaktionslogik ermöglicht es, mit nur einem Klick eine professionelle, rechtssichere Nachricht an den Dienstleister zu generieren, die alle identifizierten Mängel präzise auflistet und anfechtet.
Human-in-the-Loop & Trust UX: KI hat rechtliche Grenzen. Um das volle Vertrauen des Nutzers zu gewährleisten, wurde ein nahtloser Übergang zur echten, menschlichen Anwaltsberatung integriert. Werden hochkomplexe Risiken entdeckt, schlägt das System proaktiv den Kontakt zu verifizierten Rechtsexperten vor – direkt erreichbar über eine integrierte Chat- und Terminierungsfunktion zur finalen Klärung.
Fazit
„UX bedeutet für mich Strategie, Struktur und Logik - nicht bloß schöne Optik.“
ClauseClear ist der perfekte Beweis für dieses Prinzip. Durch den strategischen Einsatz moderner Frontend-Technologien und intelligenter KI-Features wird ein traditionell einschüchterndes, undurchsichtiges System in ein empowerndes Werkzeug verwandelt, das dem Nutzer die volle Kontrolle über seine Verträge und Rechte zurückgibt.
WerkFlow
Das Onboarding-Chaos im Handwerk systemisch lösen.
In der Handwerks- und SHK-Branche ist der erste Arbeitstag oft von analogem Chaos geprägt. Die kognitive Last für neue Mitarbeiter ist extrem hoch. Die Lösung durfte kein weiteres komplexes HR-Tool sein, sondern eine reduzierte, mobile-first Web-App direkt für die Baustelle.
Die zentrale architektonische Entscheidung: Ich habe das Onboarding-Paradigma komplett umgedreht. Anstatt den neuen Mitarbeiter Formulare ausfüllen zu lassen, bereitet die HR im Hintergrund alles vor. Der Nutzer ruft seine Logins und Aufgaben nur noch über einen sicheren, geführten Prozess ab.
UX Engineering in Action
Um die Bedürfnisse von Anlagenmechaniker Lukas (21) und Bauleiter Thomas (48) unter einen Hut zu bringen, habe ich komplexe Datenflüsse in intuitive Interfaces übersetzt:
Social Onboarding: Das Dashboard holt Lukas sofort ab. Team-Kommentare verhindern das Gefühl der Isolation. Ein subtiler roter Indikator lenkt bei Pflichtaufgaben die Aufmerksamkeit.
Der 2FA-Zugangs-Wizard: Keine Passwörter auf Post-its. Ein sicherer 3-Schritte-Prozess enthüllt die fertig konfigurierten System-Logins nach Eingabe der Firmen-Handynummer.
Asynchrones Dual-Approval: Die Ausgabe von teurem Equipment erfordert beidseitige Bestätigung. Hakt Lukas eine Aufgabe ab, wechselt sein UI lokal auf "Warten auf HR-Freigabe".
Fazit
„UX bedeutet für mich Strategie, Struktur und Logik - nicht bloß schöne Optik.“
WerkFlow beweist genau das: Durch den Einsatz moderner Frontend-Technologien (React, Tailwind) werden analoge, frustrierende Geschäftsprozesse direkt in skalierbaren, funktionalen Code übersetzt.
Artistio AI
Professionelles Audio Mastering – zugänglich gemacht durch KI.
Screenshots & States (Wischen / Klicken für Vollbild)
Split-Screen Login mit AI Chart.js VisualizerDas Mastering Studio DashboardTrack Library & Stem SeparationAI Mastering Agents & PersonasInteraktive ProfileinstellungenDynamischer Checkout (Credit/Plan)
Das Problem: Die Black Box im Studio
Audio-Mastering ist für viele Musikproduzenten frustrierend. Automatisierte Tools liefern oft laute Ergebnisse, zerstören aber die Dynamik – man hat null Kontrolle.
Als Producer von Deep und Melodic House kenne ich dieses Problem aus dem eigenen Studio-Alltag nur zu gut. Ich bin bei diesem Projekt meine eigene Zielgruppe (Persona). Ich brauche ein Tool, das mir beim komplexen Balancing hilft, bei dem ich aber nicht die kreative Kontrolle an eine unsichtbare Maschine verliere. Wenn der Mix nicht atmet und die Dynamik fehlt, nützt mir ein lautes Master-File nichts.
Projekt-Details
Rolle: UX Engineer / Design Technologist
Tech-Stack: React, Tailwind CSS (Pro-Audio Dark Mode), Chart.js, AI-Assisted Prototyping
Fokus: AI-to-UI Interaction, Data Visualization, SaaS-Monetarisierung
Die Strategie: Sprache statt Plugin-Chaos
Die architektonische Lösung für Artistio: Die Übersetzung von menschlichem, musikalischem Empfinden in technische Parameter. Anstatt den Nutzer mit 50 virtuellen Drehreglern (Knobs) und komplexen Multiband-Kompressoren zu überfordern, kommuniziert er über natürliche Sprache mit einem AI-Agenten. Das System führt den Befehl aus, macht die Änderungen am Audio-Signal aber durch das Interface visuell zu 100 % transparent und nachvollziehbar.
UX Engineering in Action
Um das Vertrauen von Producern zu gewinnen und gleichzeitig ein tragfähiges Geschäftsmodell abzubilden, habe ich folgende Frontend-Architektur aufgebaut:
LLM-to-UI Translation (Die "Geisterhand"): Der Nutzer tippt einfache Prompts wie "Mach den Bass wärmer und die Vocals präsenter". Ein komplexes React-State-Management sorgt dafür, dass sich die klassischen Audio-Slider im Dashboard nach der AI-Analyse wie von Geisterhand exakt auf die neuen Werte anpassen.
Datenvisualisierung mit Chart.js: Um die Entscheidungen der KI transparent zu machen, visualisiert ein dynamisches Line-Chart die aktuelle EQ-Frequenzkurve. Sobald der Agent den Prompt verarbeitet hat, verändert sich die Kurve flüssig. So wird aus einer Black Box ein visuell greifbares, vertrauenswürdiges Tool.
SaaS-Logik & Micro-Interactions: Ein integriertes Credit-System beweist das Verständnis für Business-Logik. Jeder AI-Prompt zieht dynamisch einen Credit ab. Erreicht der Counter null, greift ein nahtloser "Upgrade to Pro"-State – eine essenzielle Monetarisierungs-Mechanik für moderne Tech-Produkte.
Fazit
„UX bedeutet für mich Strategie, Struktur und Logik - nicht bloß schöne Optik.“
Artistio verbindet meine tiefe Domain-Expertise in der Musikproduktion mit moderner Frontend-Architektur. Das Projekt demonstriert, wie man abstrakte KI-Technologien durch intelligente Interfaces und Chart-Visualisierungen so zähmt, dass sie dem Nutzer die Kontrolle geben, anstatt sie ihm zu nehmen.
Medienmanagement
Website / Social Media / SEO
Acure Branding
Corporate Identity / Logo / Print
Mediendesign
Merchandise / Print / Corporate Design
CI-Entwicklung
Branding / 3D / Konzept
Automaten Projekt
Design System / UI / Visuals
Grill Projekt
3D Prototyping / Rendering
Glentech
Spatial UX / Experience Design
Exhibition Design
Messe / Print / Experience
Moewa Plakat Design
Plakat / Design
Whisky Label Design
Packaging / Print
Die Vision gibt die Richtung vor. UX Engineering baut den Weg, der Nutzer mühelos ans Ziel bringt.
WerkFlow: Das Onboarding-Chaos im Handwerk systemisch lösen
Wie asynchrones State-Management und nutzerzentrierte UIs die kognitive Last am ersten Arbeitstag eliminieren.
In der Handwerks- und SHK-Branche ist der erste Arbeitstag oft von analogem Chaos geprägt: Personalbögen auf Papier, fehlende Systemzugänge und unklare Werkzeugausgaben. Die kognitive Last für neue Mitarbeiter ist extrem hoch. Die Lösung durfte kein weiteres komplexes HR-Tool sein, sondern eine reduzierte, mobile-first Web-App direkt für die Baustelle.
Die Strategie: Von "Eingabe" zu "Abruf"
Die zentrale architektonische Entscheidung: Ich habe das Onboarding-Paradigma komplett umgedreht. Anstatt den neuen Mitarbeiter Formulare ausfüllen zu lassen, bereitet die HR im Hintergrund alles vor. Der Nutzer ruft seine Logins und Aufgaben nur noch über einen sicheren, geführten Prozess ab.
UX Engineering in Action
Um die Bedürfnisse von Anlagenmechaniker Lukas (21) und Bauleiter Thomas (48) unter einen Hut zu bringen, habe ich komplexe Datenflüsse in intuitive Interfaces übersetzt:
Social Onboarding & Smart Nudging: Das Dashboard holt Lukas sofort ab. Team-Kommentare verhindern das Gefühl der Isolation. Ein subtiler roter Indikator bei Pflichtaufgaben (wie der UVV-Schulung) lenkt die Aufmerksamkeit sanft, ohne den Flow zu blockieren. Reale SHK-Checklisten (z.B. für Viessmann-Wärmepumpen) liefern ab Minute eins echten Mehrwert.
Der 2FA-Zugangs-Wizard: Keine Passwörter auf Post-its. Ein sicherer 3-Schritte-Prozess enthüllt die fertig konfigurierten System-Logins nach Eingabe der Firmen-Handynummer – bereit zum Kopieren.
Asynchrones Dual-Approval: Die Ausgabe von teurem Equipment erfordert beidseitige Bestätigung. Hakt Lukas eine Aufgabe ab, wechselt sein UI lokal auf "Warten auf HR-Freigabe". Bei Bauleiter Thomas taucht der Task synchron zur Freigabe auf. Komplexes React-State-Management, verpackt in eine simple Checkbox-Interaktion.
Fazit
„UX bedeutet für mich Strategie, Struktur und Logik - nicht bloß schöne Optik.“
WerkFlow beweist genau das: Durch den Einsatz moderner Frontend-Technologien (React, Tailwind) werden analoge, frustrierende Geschäftsprozesse direkt in skalierbaren, funktionalen Code übersetzt.
Relaunch der Website inklusive SEO-Optimierung, Entwicklung eines neuen Social-Media-Konzepts, Employer Branding und Weiterentwicklung des Corporate Designs.
Social Media Mockup
Mediendesign
Entwicklung einer Merchandising-Linie zur Kundenbindung inkl. Gestaltung von Artikeln, Fahrzeugfolierungen und Messe- sowie Kampagnenwerbemitteln.
Entwicklung einer eigenständigen Marke mit Corporate Design, Packaging und Online-Plattform. Nutzerinnen und Nutzer können über einen interaktiven Konfigurator individuelle Tee-Mischungen erstellen.
Rebranding & Visuals
Entwicklung von Corporate Design und visueller Inszenierung der Automaten mit 3D-Visualisierungen, Fotografie und KI-gestützter Bildbearbeitung.
3D & Photography
Erstellung realistischer 3D-Visualisierungen und Produktfotos für die Vermarktung. Ziel war eine hochwertige und konsistente Darstellung.
Bild 4Bild 5Bild 6
Exhibition Design
Entwicklung und Gestaltung von Werbemaßnahmen – mit Fokus auf den Messeauftritt sowie begleitende Printmedien.
Messestand-DesignEntwicklung von Printmedien
Glentech
Entwicklung der Corporate Identity und Webdesign für Glentech. Ein moderner, technologischer Auftritt.
Corporate Website
Moewa Plakat Design
Ein aufmerksamkeitsstarkes Plakat-Design für Moewa.
Support Dashboard
Whisky Label Design
Ein exklusives Label-Design für einen Whisky, gestaltet mit Fokus auf hochwertige Typografie und edle Materialien.
Label Design
Acure Corporate Identity
Ein ganzheitliches Corporate Identity Projekt für mein elektronisches Musikprojekt "Acure". Durch die Fusion echter Fotografien mit Künstlicher Intelligenz entstanden einzigartige, stimmige Album-Cover. Zusätzlich wurde ein prägnantes Logo entwickelt und sämtliche Marketingmaßnahmen für verschiedene Plattformen konzipiert. Um den Workflow zu optimieren, habe ich zudem eine eigene App programmiert, die das Motiv automatisch zu einem kohärenten Album Cover mixt und es passgenau in die Formate 1:1 und 9:16 (für z.B. Spotify Canvas und Reels) zuschneidet.
Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV: Nico Zink Wilhelm-Leuschner-Str. 52 64546 Mörfelden-Walldorf
Datenschutzerklärung
1. Datenschutz auf einen Blick
Allgemeine Hinweise: Die folgenden Hinweise geben einen einfachen Überblick darüber, was mit Ihren personenbezogenen Daten passiert, wenn Sie diese Website besuchen. Personenbezogene Daten sind alle Daten, mit denen Sie persönlich identifiziert werden können.
2. Datenerfassung auf unserer Website
Cookies & Externe Dienste: Diese Website verwendet technisch notwendige Cookies, um Ihre Cookie-Einstellungen zu speichern. Externe Dienste wie Schriften oder Analytics werden standardmäßig nicht geladen, es sei denn, Sie stimmen im Banner explizit zu. Sie können Ihre Einwilligung jederzeit widerrufen.
3. Hosting
Wir hosten die Inhalte unserer Website bei einem externen Anbieter. Die Nutzung des Hosts erfolgt zum Zwecke der sicheren und effizienten Bereitstellung unseres Online-Angebots durch einen professionellen Anbieter (Art. 6 Abs. 1 lit. f DSGVO).
Wir verwenden Cookies, um das Design optimal darzustellen. Einverstanden?
