KlassischInteraktiv
DEEN

Ich bin Tobias Fladung

Pixel-Figur von Tobias Fladung mit Cap, grünen Augen und schwarzer Jacke

I build thoughtful product and digital experiences with UX, code, AI, human-computer interaction, and psychology.

UX/UI Designer AI Product Designer

Design-Zeit

Schwerpunkte

  • UX UI Design
  • End-to-End Product Design
  • Data-Driven Design
  • Human-AI Interaction Design
  • Conversion Optimization
  • Vibe-Coding
  • Information Architecture
  • Prompt Engineering
  • AI-Driven UX Strategy
  • AI-Assisted Prototyping
  • Accessibility & Inclusive Design
  • Innovation Strategy
  • User Research & Insights
  • Design Systems & Scalable Components
  • Cross-Functional Collaboration

Tools

  • Figma
  • Adobe CS
  • Miro
  • Cursor
  • GitHub Copilot
  • Google AI Studio
  • Claude Code
  • Cloudflare
  • Google Analytics

Referenzen

Über mich

Hallo, ich bin Tobias.

Ich bin 44 und arbeite als UI/UX Consultant & Designer. Seit über 20 Jahren gestalte ich digitale Produkte, erst als Art Director, heute als UX Designer. Ich lebe in der Rhön.

Ich arbeite agil und eng mit mehreren Teams. Neue Technologien reizen mich, und ich lerne ständig dazu. Ich denke über das Design hinaus, damit Produkte und Services mehr sind als schön.

Hire me LinkedIn
Tobias Fladung lächelt in die Kamera

Stimmen

Was frühere Teams sagen

  • Electronic Minds

    Wegen seiner stets verbindlichen, kooperativen und hilfsbereiten Art war Herr Fladung seinen Vorgesetzten eine wertvolle Stütze und den Kollegen ein geschätzter Partner. Von unseren Kunden wurde er stets aufgrund seiner freundlichen Art, hohen Kompetenz und seiner Hilfsbereitschaft sehr geschätzt. …

    Michael RosenwirthGeschäftsführer, Electronic MindsAuszug aus dem Arbeitszeugnis

  • WEFRA Life

    Herr Fladung verfügt über fachlich und methodisch sehr gute Kompetenzen und zeigt ein hohes Maß an Verantwortungsbewusstsein. Besonders hervorheben möchten wir seinen bedingungslosen Einsatz für sein Team und die damit einhergehende Hilfsbereitschaft. …

    Ariane Haack-KurzGeschäftsführerin, WEFRA LifeAuszug aus dem Arbeitszeugnis

Design-Roadmap

Wie aus einer Frage ein Produkt wird.

Fahre über einen Begriff oder tippe ihn an. Dann siehst du eine Definition in einem Satz.

  1. Zuhören

    1. Kontext klärenIch kläre Ziele, Grenzen und Erwartungen, bevor ich etwas gestalte.
      • Stakeholder-GesprächeKurze Interviews mit den Menschen, die das Produkt verantworten oder betreiben.
      • Annahmen-ListeEine Liste der Dinge, die das Team glaubt, aber noch nicht weiß.
      • ErfolgsbildEin Satz, der beschreibt, woran wir am Ende den Erfolg erkennen.
    2. Menschen verstehenIch lerne die Menschen kennen, die das Produkt wirklich nutzen.
      • Kontext-InterviewsGespräche am Ort der Arbeit, damit echte Abläufe sichtbar werden.
      • BeobachtungIch schaue zu, statt zu fragen: Verhalten zeigt mehr als Meinungen.
      • TagebuchstudieTeilnehmende notieren über Tage, wann und warum sie auf ein Problem stoßen.
    3. Daten lesenIch nutze Zahlen, um Muster zu finden und Vermutungen zu prüfen.
      • Funnel-AnalyseZeigt, an welchem Schritt Menschen einen Ablauf abbrechen.
      • HeatmapsZeigen, wohin Menschen klicken, wie weit sie scrollen und was sie übersehen.
      • Support-TicketsWiederkehrende Fragen im Support zeigen echte Hürden im Produkt.

  2. Schärfen

    1. Problem rahmenIch formuliere das Problem so, dass ein Team es lösen kann.
      • NutzerzieleWas ein Mensch am Ende erreicht haben will, unabhängig vom Werkzeug.
      • Problem-HypotheseEine prüfbare Vermutung, welches Problem wir wirklich lösen.
      • Fünf Mal WarumIch frage mehrmals nach dem Grund, bis die Ursache sichtbar wird.
    2. Muster bündelnIch fasse viele Beobachtungen zu wenigen, klaren Erkenntnissen zusammen.
      • Affinity MappingIch sortiere Notizen nach Themen, bis Muster sichtbar werden.
      • ArchetypenWenige Nutzertypen, die sich durch ihr Verhalten unterscheiden, nicht durch ihr Alter.
    3. Prioritäten setzenIch entscheide mit dem Team, was zuerst kommt und was warten kann.
      • Nutzen-Aufwand-RasterOrdnet Ideen nach Nutzen und Aufwand in vier Felder.
      • ErfolgsmetrikenMessbare Werte, die zeigen, ob eine Änderung wirkt.
      • Produkt-WettenVorhaben als Wette: mit Annahme, Einsatz und einem Termin für die Prüfung.

  3. Gestalten

    1. Struktur bauenIch ordne Inhalte und Funktionen so, dass Menschen sie finden.
      • Card SortingMenschen sortieren Begriffe in Gruppen; daraus entsteht eine verständliche Navigation.
      • SitemapEine Karte aller Seiten und ihrer Beziehungen.
    2. Abläufe skizzierenIch zeichne Wege durch das Produkt, bevor ich einzelne Screens gestalte.
      • User FlowsDiagramme, die jeden Schritt und jede Entscheidung auf einem Weg zeigen.
      • ScribblesSchnelle Skizzen auf Papier, die viele Ideen in kurzer Zeit zeigen.
      • Low-Fi-EntwurfGraue Entwürfe, die Aufbau und Hierarchie ohne Farbe zeigen.
    3. Oberfläche formenIch gebe der Struktur Form, Farbe, Schrift und Rhythmus.
      • RasterEin festes Maßsystem, das Seiten ruhig und einheitlich macht.
      • Schrift-SkalaEine feste Reihe von Schriftgrößen, die die Hierarchie klar macht.
      • Feedback-MomenteKleine Reaktionen der Oberfläche, die zeigen: Das hat geklappt.
    4. Worte wählenIch schreibe Texte, die Menschen sicher durch das Produkt führen.
      • Button-TexteVerben, die sagen, was nach dem Klick passiert.
      • FehlermeldungenSagen, was schiefging und wie man es löst, ohne Schuld zuzuweisen.
      • SprachstilRegeln dafür, wie das Produkt klingt: freundlich, klar und ehrlich.

  4. Mit AI gestalten

    1. Fähigkeiten einschätzenIch prüfe, was ein Modell zuverlässig kann und wo es scheitert.
      • FehlerbilderTypische Fehler eines Modells, gesammelt und nach Risiko sortiert.
      • Eval-SetsFeste Beispielaufgaben, mit denen ich die Qualität von Modellen vergleiche.
    2. Prompts gestaltenIch behandle Prompts wie Designmaterial: entwerfen, testen, verbessern.
      • Kontext-DesignIch entscheide, welches Wissen das Modell für eine Aufgabe bekommt.
      • SystempromptFeste Anweisungen, die Rolle, Grenzen und Ton eines Assistenten festlegen.
      • Prompt-BibliothekGeprüfte Prompts, die ein ganzes Team wiederverwenden kann.
    3. Vertrauen gestaltenIch zeige, was die AI tut, wie sicher sie ist und wie man sie korrigiert.
      • Quellen zeigenDie Oberfläche nennt die Quellen und Gründe einer Antwort.
      • Human in the LoopEin Mensch prüft oder bestätigt die wichtigen Entscheidungen der AI.
      • Wege zurückKlare Wege zum Rückgängigmachen, wenn die AI falsch liegt.
    4. Prototypen in CodeIch baue mit AI-Werkzeugen klickbare Prototypen in echtem Code.
      • Vibe-CodingIch beschreibe eine Funktion in Sprache, und die AI schreibt den ersten Code.
      • Echte DatenDer Prototyp nutzt echte Daten, damit Tests realistisch sind.

  5. Prüfen

    1. Mit Menschen testenIch beobachte echte Menschen bei echten Aufgaben mit dem Entwurf.
      • Moderierter TestIch begleite eine Testperson live und frage nach ihren Gedanken.
      • Unmoderierter TestTestpersonen lösen Aufgaben allein; ein Werkzeug zeichnet alles auf.
    2. Für alle zugänglichIch prüfe, ob alle Menschen das Produkt nutzen können.
      • WCAG-CheckPrüfung gegen die Kriterien der Web Content Accessibility Guidelines.
      • Screenreader-TestIch bediene das Produkt nur mit Screenreader und Tastatur.
      • KontrastText und Hintergrund brauchen genug Unterschied in der Helligkeit.
    3. Qualität messenIch mache Qualität mit Zahlen vergleichbar.
      • SUS-FragebogenZehn Fragen, die die gefühlte Benutzbarkeit als einen Wert messen.
      • Split-TestZwei Varianten laufen parallel, und die Daten zeigen die bessere.

  6. Liefern

    1. Mit Entwicklung bauenIch arbeite eng mit dem Entwicklungsteam, vom ersten Entwurf bis zum Release.
      • MachbarkeitIch kläre früh mit der Entwicklung, was technisch geht.
      • SpecsMaße, Zustände und Verhalten, beschrieben für die Umsetzung.
      • Design-QAIch vergleiche die gebaute Version mit dem Entwurf und melde Abweichungen.
    2. Design System pflegenIch halte Bausteine, Regeln und Code an einem Ort aktuell.
      • BausteineWiederverwendbare UI-Teile mit klaren Zuständen und Varianten.
      • Token-PipelineFarben, Abstände und Schriften fließen als benannte Werte von Figma in den Code.
      • LeitfadenBeispiele und Regeln, die erklären, wann man welchen Baustein nutzt.
    3. Release begleitenIch bleibe nach dem Launch dran und sammle die ersten Rückmeldungen.
      • Stufenweiser RolloutEine Funktion geht erst an wenige Menschen, dann an alle.
      • Release NotesKurze Texte, die Menschen zeigen, was neu ist.

  7. Wachsen

    1. Wirkung messenIch prüfe nach dem Release, ob wir die Ziele erreicht haben.
      • DashboardsEine Ansicht der wichtigsten Kennzahlen für das ganze Team.
      • KohortenVergleicht Gruppen, die zur selben Zeit gestartet sind.
    2. Lernen teilenIch mache Erkenntnisse für alle im Unternehmen sichtbar.
      • Research-ArchivEine durchsuchbare Sammlung aller Studien und Erkenntnisse.
      • Design-ReviewsRegelmäßige Runden, in denen das Team Entwürfe gemeinsam bewertet.
    3. Weiter iterierenIch verbessere das Produkt in kleinen, messbaren Schritten.
      • RetrospektiveDas Team bespricht, was gut lief und was es ändern will.
      • Backlog-PflegeIch ordne offene Ideen regelmäßig nach Wert und Dringlichkeit.