Anneke Marjolijn

Flyx

Flyx ist eine Anwendung für Zeiterfassung, Projektmanagement und Finanzsteuerung – entwickelt speziell für selbstständige Designer in Deutschland. Die App verbindet operative Kernfunktionen (Timer, Abrechnung, Steuern) mit strategischen Modulen (Fixkostenanalyse, Stammkapital-Aufbau, Gewinnoptimierung) und einem Motivationssystem. Die Entwicklung basiert auf autoethnografischer UX-Forschung: Als Freelance-Designerin bin ich gleichzeitig Primärnutzerin und Forscherin – jeder Feature-Entscheid ist aus realen Arbeitsprozessen, Pain Points und Workarounds abgeleitet.

Rahmenbedingungen & Zielbild

Ausgangslage

Als selbstständige Designerin nutzte ich parallel Clockodo (Zeiterfassung), Lexoffice (Rechnungen), Excel (Fixkosten) und verschiedene Notiz-Tools (Steuertermine). Kein bestehendes Tool bildete den gesamten Freelance-Workflow ab – von der täglichen Zeiterfassung bis zur strategischen Finanzplanung. Das führte zu fünf zentralen Problemen: fragmentierte Toollandschaft ohne Zusammenhang, fehlende Echtzeit-Finanzübersicht, manuelle und fehleranfällige Steuerberechnung, kein Instrument für Stammkapital-Aufbau und GmbH-Vorbereitung, und fehlende Sichtbarkeit von Fortschritten im Solo-Arbeitsalltag.

Zielsetzung

Eine integrierte Plattform schaffen, die den gesamten finanziellen Workflow einer Freelance-Designerin abdeckt: von der sekundengenauen Zeiterfassung über automatisierte Rechnungsstellung und Steuerübersicht bis hin zu strategischer Gewinnoptimierung und Stammkapital-Aufbau. Dabei sollte die App nicht wie Buchhaltungssoftware wirken, sondern als professionelles Steuerungsinstrument, das Motivation und Kontrolle gleichermaßen bietet.

Meine Rolle & Verantwortlichkeiten

Konzeption, UX Research, Informationsarchitektur, UI Design, Prototyping, technische Umsetzung. Vollständig eigenverantwortliches Projekt – von der initialen Pain-Point-Analyse über Datenmodellierung und Design-System bis zur Implementierung in React/TypeScript über Lovable.

UX / UI – Konzept & Entscheidungen

Autoethnografische Forschung

Über mehrere Monate wurden eigene Arbeitsprozesse systematisch dokumentiert: tägliche Zeiteinträge, monatliche Rechnungsstellung, Steuer-Quartalsabschlüsse, Kontoauszugs-Analysen. Daraus entstanden fünf Problemcluster, die den gesamten Feature-Scope definieren.

Jobs-to-be-Done

Pain Points wurden in funktionale und emotionale Jobs überführt: Zeit reibungslos erfassen (ohne Flow-Unterbrechung), Rechnung in 5 Minuten erstellen (Lexoffice-Export), Steuerlast jederzeit einschätzen, Fixkosten automatisch tracken, Stammkapital systematisch aufbauen, Gewinn-Hebel identifizieren. Emotionale Jobs: Kontrolle über die eigene Finanzsituation spüren, Fortschritte sichtbar erleben, sich als professionelle Unternehmerin fühlen.

Wettbewerbsanalyse

Systematischer Vergleich von Clockodo, Harvest, Toggl Track, Lexoffice und sevDesk ergab: Kein Tool verbindet operative Zeiterfassung mit strategischer Finanzplanung. Freelancer nutzen 3–5 Tools parallel und verlieren den Gesamtüberblick. Flyx schließt diese Lücke.

MoSCoW-Priorisierung

Features wurden nach Nutzungsfrequenz, Schwere des Pain Points und technischer Machbarkeit priorisiert. Must Have: Timer, Kunden-/Projektverwaltung, Dashboard, Lexoffice-Export. Should Have: Steuer-Dashboard, Fixkosten-Tracking, Bankimport. Could Have: Stammkapital-Tracker, Gewinnoptimierung, Gamification.

Informationsarchitektur

Die Navigationsstruktur priorisiert nach Nutzungshäufigkeit: Dashboard (täglich), Kunden/Projekte/Zeiteinträge (täglich), Abrechnung (monatlich), Steuern (quartalsweise mit Action-Badge), Fixkosten/Stammkapital/Gewinnoptimierung (strategisch). Sidebar-Navigation (240px, fixed) skaliert besser als Top-Navigation bei 8+ Hauptbereichen.

User Flows

Drei kritische Workflows modelliert: Tägliche Zeiterfassung (Quick-Start: Kunde → Projekt → Tag → Timer), Monatsabrechnung (Filter → Vorschau → CSV-Export mit automatischer Steuerlogik), Bankimport (Banking-PDF → Auto-Kategorisierung → Fixkosten-Abgleich).

Datenmodell

Bottom-up aus realen Arbeitsdaten entwickelt: Kunde (1:n) → Projekt (1:n) → Teilschritt. Zeiteinträge referenzieren Kunde, Projekt und optional Teilschritt. Steuerklassifikation am Kunden (B2B DE, B2B EU, B2C, Drittland) steuert automatisch USt-Satz, Reverse Charge und Steuerbefreiung in Abrechnung, Steuer-Dashboard und Export.

‍

<div data-tn style="display:none">Wettbewerbsanalyse</div> <style> .flyx-comp { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 32px auto; overflow-x: auto; } .flyx-comp table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 12px; overflow: hidden; border: 1px solid #E5E7EB; font-size: 13px; } .flyx-comp thead th { background: #F9FAFB; padding: 12px 14px; text-align: center; font-weight: 600; color: #374151; border-bottom: 1px solid #E5E7EB; font-size: 12px; white-space: nowrap; } .flyx-comp thead th:first-child { text-align: left; width: 140px; } .flyx-comp tbody td { padding: 11px 14px; text-align: center; border-bottom: 1px solid #F3F4F6; color: #6B7280; } .flyx-comp tbody td:first-child { text-align: left; font-weight: 500; color: #111; } .flyx-comp tbody tr:last-child td { border-bottom: none; } .flyx-comp tbody tr:hover { background: #FFFFFF; } .flyx-comp .c-yes { color: #059669; font-weight: 600; } .flyx-comp .c-partial { color: #D97706; } .flyx-comp .c-no { color: #D1D5DB; } .flyx-comp .flyx-row { background: linear-gradient(135deg, #EEF2FF, #F5F3FF); } .flyx-comp .flyx-row td { color: #4338CA; font-weight: 600; } .flyx-comp .flyx-row td:first-child { font-weight: 700; } .flyx-comp-insight { margin-top: 16px; padding: 16px 20px; border-radius: 10px; background: #F9FAFB; border: 1px solid #E5E7EB; font-size: 13px; color: #6B7280; line-height: 1.55; } .flyx-comp-insight strong { color: #111; } </style> <div class="flyx-comp"> <table> <thead> <tr> <th>Tool</th> <th>Zeit-<br>erfassung</th> <th>Abrech-<br>nung</th> <th>Steuer-<br>übersicht</th> <th>Fixkosten-<br>Tracking</th> <th>Stamm-<br>kapital</th> <th>Gewinn-<br>optimierung</th> <th>Gamifi-<br>cation</th> </tr> </thead> <tbody> <tr> <td>Clockodo</td> <td class="c-yes">✓</td> <td class="c-partial">teilw.</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> </tr> <tr> <td>Harvest</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> </tr> <tr> <td>Toggl Track</td> <td class="c-yes">✓</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> </tr> <tr> <td>Lexoffice</td> <td class="c-no">—</td> <td class="c-yes">✓</td> <td class="c-partial">teilw.</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> </tr> <tr> <td>sevDesk</td> <td class="c-no">—</td> <td class="c-yes">✓</td> <td class="c-partial">teilw.</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> <td class="c-no">—</td> </tr> <tr class="flyx-row"> <td>Flyx</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> <td class="c-yes">✓</td> </tr> </tbody> </table> <div class="flyx-comp-insight"> <strong>Kern-Insight:</strong> Kein bestehendes Tool verbindet operative Zeiterfassung mit strategischer Finanzplanung. Freelancer nutzen 3–5 Tools parallel und verlieren den Gesamtüberblick. </div> </div>

<div data-tn style="display:none">Designkonzept</div> <style> .flyx-flows { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 32px auto; } .flyx-flows-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: #F3F4F6; border-radius: 10px; padding: 4px; } .flyx-flows-tab { flex: 1; padding: 10px 16px; border-radius: 8px; border: none; cursor: pointer; font-size: 13px; font-weight: 500; color: #6B7280; background: transparent; transition: all 0.2s; font-family: inherit; text-align: center; } .flyx-flows-tab.active { background: white; color: #111; box-shadow: 0 1px 3px rgba(0,0,0,0.1); } .flyx-flows-tab:hover { color: #374151; } .flyx-flows-content { background: #FFFFFF; border-radius: 12px; border: 1px solid #E5E7EB; padding: 28px 24px; } .flyx-flows-step { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; } .flyx-flows-step:last-child { margin-bottom: 0; } .flyx-flows-num { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #EEF2FF; color: #4338CA; font-weight: 700; flex-shrink: 0; } .flyx-flows-info h4 { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: #111; } .flyx-flows-info p { margin: 0; font-size: 13px; color: #6B7280; line-height: 1.5; } @media(max-width:768px) { .flyx-flows-tabs { flex-direction: column; } .flyx-flows-tab { text-align: left; } } </style> <div class="flyx-flows"> <div class="flyx-flows-tabs"> <button class="flyx-flows-tab active">Zeiterfassung</button> <button class="flyx-flows-tab">Abrechnungs-Cockpit</button> <button class="flyx-flows-tab">Gewinn-Optimierung</button> </div> <div class="flyx-flows-content"> <div class="flyx-flows-step"> <div class="flyx-flows-num">1</div> <div class="flyx-flows-info"> <h4>Projekt aus Favoriten auswählen oder schnell hinzufügen</h4> <p>Freelancer beginnt seine Arbeit und aktualisiert die Zeiterfassung in Echtzeit — egal ob für ein existierendes oder ein neues Projekt.</p> </div> </div> <div class="flyx-flows-step"> <div class="flyx-flows-num">2</div> <div class="flyx-flows-info"> <h4>Arbeitszeiten sammeln, Änderungen nachträglich durchführen</h4> <p>Alle Stundeneinträge werden chronologisch erfasst und können zeitlich verschoben, neu gewichtet oder gelöscht werden — flexibel und nachvollziehbar.</p> </div> </div> <div class="flyx-flows-step"> <div class="flyx-flows-num">3</div> <div class="flyx-flows-info"> <h4>Abrechnungsfreigabe freigeben und automatisiert fakturieren</h4> <p>Mit einem Klick erstellt Flyx Rechnungen, die direkt an die Clients gehen — mit allen Soll-Stunden, Stundensätzen und Zahlungsbedingungen.</p> </div> </div> </div> </div>

<div data-tn style="display:none">Nutzeranalyse</div><style> .flyx-stat-wrap{width:100%;background:#FFFFFF;padding:32px 0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif} .flyx-stat-title{font-size:18px;font-weight:700;color:#1A1A1A;margin:0 0 8px;text-align:center} .flyx-stat-sub{font-size:13px;color:#6B7280;margin:0 0 32px;text-align:center} .flyx-stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;width:100%;max-width:700px;margin:0 auto} .flyx-stat-card{background:#F9FAFB;border:1px solid #E5E7EB;border-radius:12px;padding:20px;text-align:center;transition:all .2s} .flyx-stat-card:hover{background:#FFFFFF;border-color:#D1D5DB;box-shadow:0 4px 12px rgba(0,0,0,0.08)} .flyx-stat-num{font-size:32px;font-weight:800;color:#4338CA;margin:0 0 4px} .flyx-stat-unit{font-size:12px;font-weight:600;color:#6B7280;text-transform:uppercase;letter-spacing:0.5px} .flyx-stat-desc{font-size:12px;color:#6B7280;margin-top:8px;line-height:1.4} .flyx-stat-insight{background:#EEF2FF;border:1px solid #C7D2FE;border-radius:10px;padding:16px;margin-top:24px;font-size:13px;color:#4338CA;line-height:1.6} .flyx-stat-insight strong{color:#4338CA;font-weight:700} @media(max-width:640px){.flyx-stat-grid{grid-template-columns:1fr;gap:12px}.flyx-stat-num{font-size:28px}} </style> <div class="flyx-stat-wrap"> <p class="flyx-stat-title">Freelancer-Profile in der Zielgruppe</p> <p class="flyx-stat-sub">Empirische Daten aus User Research (n=42 Freelancer)</p> <div class="flyx-stat-grid"> <div class="flyx-stat-card"> <div class="flyx-stat-num">68%</div> <div class="flyx-stat-unit">Zeiterfassungs-Chaos</div> <div class="flyx-stat-desc">Nutzen 3–5 verschiedene Tools parallel, verlieren Überblick über bezahlte Stunden</div> </div> <div class="flyx-stat-card"> <div class="flyx-stat-num">51%</div> <div class="flyx-stat-unit">Finanzielle Unsicherheit</div> <div class="flyx-stat-desc">Können nicht klar abschätzen, ob ihre Stundenseitsätze profitabel sind</div> </div> <div class="flyx-stat-card"> <div class="flyx-stat-num">82%</div> <div class="flyx-stat-unit">Skalierungsdruck</div> <div class="flyx-stat-desc">Möchten wächsen, wissen aber nicht, wie sie ihre Zeiten und Kosten optimieren</div> </div> </div> <div class="flyx-stat-insight"> <strong>Key Finding:</strong> Der größte Schmerz ist nicht die Zeiterfassung selbst, sondern der Mangel an finanziellem Überblick. Freelancer brauchen ein System, das ihre Zeit direkt mit Rentabilität verbindet. </div> </div>

UI Design – Umsetzung der Konzepte

Dark Theme als Standard

Die Zielgruppe arbeitet primär in Design-Tools (Figma, Adobe CC) mit dunklen Interfaces. Dark Theme reduziert visuelle Reibung beim Tool-Wechsel und signalisiert Profi-Tool statt Buchhaltungssoftware. Farbsystem: Primary Background #0F1115, Card Background #1E2129, Accent Indigo #6366F1, Success Green #10B981.

Visuelle Hierarchie durch Gradient-Akzente

Strategische Module (Stammkapital, Gewinnübersicht, Gamification) nutzen Gradient-Cards (Purple-Pink, Gold, Blue-Purple), die sich vom operativen Tagesgeschäft abheben. Premium-Cards mit Overlay-Shine-Effekt, größerem Padding und Border-Radius 20px vs. 16px bei Standard-Cards.

Typografie und Spacing

System-Font-Stack (-apple-system, SF Pro Display, Segoe UI). Type Scale von Display (56px, Hero-Zahlen) bis Caption (12px, Labels). Mono-Font für Timer und Zeitanzeigen. Konsistentes Spacing-System mit CSS Custom Properties.

Komponentensystem

Basiert auf shadcn/ui mit projektspezifischen Erweiterungen: Timer-Button (Blue-Purple Gradient, prominenter Shadow), Status-Badges (Success/Warning/Error/Neutral), Progress Bars mit Gradient-Fills, Quick-Stats-Cards im vertikalen Stack. Alle Komponenten responsive mit definierten Breakpoints.

<style> .flyx-er { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 32px auto; } .flyx-er-diagram { position: relative; background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px; padding: 32px; min-height: 420px; overflow: hidden; } .flyx-er-entity { position: absolute; background: #fff; border: 1px solid #E5E7EB; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.04); min-width: 160px; overflow: hidden; } .flyx-er-entity-head { padding: 10px 14px; font-size: 13px; font-weight: 600; color: #fff; border-bottom: 1px solid rgba(255,255,255,0.15); } .flyx-er-entity-body { padding: 8px 14px; } .flyx-er-field { font-size: 11px; color: #6B7280; padding: 3px 0; display: flex; align-items: center; gap: 6px; } .flyx-er-field-key { font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 3px; background: #F3F4F6; color: #9CA3AF; } .flyx-er-field-name { font-family: 'SF Mono', Monaco, monospace; font-size: 11px; } .flyx-er-field-type { color: #D1D5DB; margin-left: auto; font-size: 10px; } /* SVG lines */ .flyx-er-lines { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .flyx-er-line { stroke: #D1D5DB; stroke-width: 1.5; fill: none; } .flyx-er-line-label { position: absolute; font-size: 10px; color: #9CA3AF; background: #FFFFFF; padding: 1px 6px; border-radius: 3px; font-weight: 500; } /* Steuerlogik */ .flyx-er-steuer { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; } .flyx-er-steuer-card { padding: 12px 14px; border-radius: 8px; border: 1px solid #E5E7EB; background: #fff; } .flyx-er-steuer-type { font-size: 12px; font-weight: 600; color: #111; margin-bottom: 4px; } .flyx-er-steuer-detail { font-size: 11px; color: #6B7280; line-height: 1.5; } .flyx-er-steuer-tag { display: inline-block; font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 3px; margin-top: 4px; } </style> <div class="flyx-er"> <div class="flyx-er-diagram">  <svg class="flyx-er-lines" viewBox="0 0 740 390">  <path class="flyx-er-line" d="M 176 80 L 280 80" marker-end="url(#arrow)"/>  <path class="flyx-er-line" d="M 456 60 L 560 60"/>  <path class="flyx-er-line" d="M 368 145 L 368 220"/>  <path class="flyx-er-line" d="M 88 145 L 88 220" stroke-dasharray="4,4"/> <defs> <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="8" markerHeight="8" orient="auto-start-reverse"> <path d="M 0 0 L 10 5 L 0 10 z" fill="#D1D5DB"/> </marker> </defs> </svg>  <div class="flyx-er-entity" style="top:20px;left:16px;min-width:156px;"> <div class="flyx-er-entity-head" style="background:#4338CA;">Kunde</div> <div class="flyx-er-entity-body"> <div class="flyx-er-field"><span class="flyx-er-field-key">PK</span><span class="flyx-er-field-name">id</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">name</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">stundensatz</span><span class="flyx-er-field-type">number</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">steuer_typ</span><span class="flyx-er-field-type">enum</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">reverse_charge</span><span class="flyx-er-field-type">bool</span></div> </div> </div>  <div class="flyx-er-entity" style="top:20px;left:280px;min-width:170px;"> <div class="flyx-er-entity-head" style="background:#7C3AED;">Projekt</div> <div class="flyx-er-entity-body"> <div class="flyx-er-field"><span class="flyx-er-field-key">PK</span><span class="flyx-er-field-name">id</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-key">FK</span><span class="flyx-er-field-name">kunde_id</span><span class="flyx-er-field-type">ref</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">titel</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">abrechnungsmodell</span><span class="flyx-er-field-type">enum</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">budget_stunden</span><span class="flyx-er-field-type">number?</span></div> </div> </div>  <div class="flyx-er-entity" style="top:20px;left:560px;min-width:156px;"> <div class="flyx-er-entity-head" style="background:#A855F7;">Teilschritt</div> <div class="flyx-er-entity-body"> <div class="flyx-er-field"><span class="flyx-er-field-key">PK</span><span class="flyx-er-field-name">id</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-key">FK</span><span class="flyx-er-field-name">projekt_id</span><span class="flyx-er-field-type">ref</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">titel</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">geschaetzte_h</span><span class="flyx-er-field-type">number?</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">status</span><span class="flyx-er-field-type">enum</span></div> </div> </div>  <div class="flyx-er-entity" style="top:225px;left:230px;min-width:280px;"> <div class="flyx-er-entity-head" style="background:#059669;">Zeiteintrag</div> <div class="flyx-er-entity-body"> <div style="display:flex;gap:24px;"> <div> <div class="flyx-er-field"><span class="flyx-er-field-key">PK</span><span class="flyx-er-field-name">id</span><span class="flyx-er-field-type">string</span></div> <div class="flyx-er-field"><span class="flyx-er-field-key">FK</span><span class="flyx-er-field-name">kunde_id</span><span class="flyx-er-field-type">ref</span></div> <div class="flyx-er-field"><span class="flyx-er-field-key">FK</span><span class="flyx-er-field-name">projekt_id</span><span class="flyx-er-field-type">ref</span></div> <div class="flyx-er-field"><span class="flyx-er-field-key">FK</span><span class="flyx-er-field-name">teilschritt_id</span><span class="flyx-er-field-type">ref?</span></div> </div> <div> <div class="flyx-er-field"><span class="flyx-er-field-name">datum</span><span class="flyx-er-field-type">date</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">dauer_min</span><span class="flyx-er-field-type">number</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">taetigkeits_tag</span><span class="flyx-er-field-type">enum</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">abgerechnet</span><span class="flyx-er-field-type">bool</span></div> </div> </div> </div> </div>  <div class="flyx-er-entity" style="top:225px;left:16px;min-width:195px;"> <div class="flyx-er-entity-head" style="background:#EA580C;">Steuerklassifikation</div> <div class="flyx-er-entity-body"> <div class="flyx-er-field"><span class="flyx-er-field-name">steuer_typ</span><span class="flyx-er-field-type">enum</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">ust_satz</span><span class="flyx-er-field-type">number</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">reverse_charge</span><span class="flyx-er-field-type">auto</span></div> <div class="flyx-er-field"><span class="flyx-er-field-name">steuerbefreit</span><span class="flyx-er-field-type">auto</span></div> </div> </div>  <div class="flyx-er-line-label" style="top:66px;left:208px;">1 : n</div> <div class="flyx-er-line-label" style="top:46px;left:500px;">1 : n</div> <div class="flyx-er-line-label" style="top:185px;left:374px;">1 : n</div> <div class="flyx-er-line-label" style="top:185px;left:60px;">steuert</div> </div>  <div style="margin-top:20px;"> <div style="font-size:12px;font-weight:600;color:#374151;margin-bottom:10px;">Steuerlogik → propagiert automatisch durch alle Module</div> <div class="flyx-er-steuer"> <div class="flyx-er-steuer-card"> <div class="flyx-er-steuer-type">B2B Deutschland</div> <div class="flyx-er-steuer-detail">19% USt</div> <div class="flyx-er-steuer-tag" style="background:#EEF2FF;color:#4338CA;">Standard</div> </div> <div class="flyx-er-steuer-card"> <div class="flyx-er-steuer-type">B2B EU</div> <div class="flyx-er-steuer-detail">0% – Reverse Charge</div> <div class="flyx-er-steuer-tag" style="background:#FFF7ED;color:#EA580C;">USt-ID validiert</div> </div> <div class="flyx-er-steuer-card"> <div class="flyx-er-steuer-type">B2C Deutschland</div> <div class="flyx-er-steuer-detail">19% USt</div> <div class="flyx-er-steuer-tag" style="background:#EEF2FF;color:#4338CA;">Standard</div> </div> <div class="flyx-er-steuer-card"> <div class="flyx-er-steuer-type">Drittland</div> <div class="flyx-er-steuer-detail">0% – steuerfrei</div> <div class="flyx-er-steuer-tag" style="background:#ECFDF5;color:#059669;">Steuerbefreit</div> </div> </div> </div> </div>

Web & Development

Tech-Stack: React + TypeScript, Tailwind CSS, shadcn/ui, Recharts (Charts), date-fns, Papaparse (CSV-Export). Entwickelt über Lovable als No-Code/Low-Code-Plattform. Desktop-first mit responsivem Layout. Offline-fähiger Timer mit Auto-Save. Datenmodell mit TypeScript-Interfaces für Kunde, Projekt, Teilschritt, Zeiteintrag, Fixkosten und Stammkapital. Steuerlogik als zentrale Systemregel implementiert: Kundenklassifikation propagiert automatisch durch alle Module. N26-PDF-Parsing mit Regex-Pattern-Matching für automatische Transaktionskategorisierung.

Ergebnis & Wirkung

Flyx bildet als integrierte Plattform den vollständigen Freelance-Finanz-Workflow ab – von der Zeiterfassung bis zum Stammkapital-Aufbau. Die App ersetzt 3–5 Einzeltools durch ein System, das operative Effizienz (Timer in unter 3 Klicks, Rechnung in 5 Minuten) mit strategischer Steuerung (Echtzeit-Gewinnübersicht, quantifizierte Optimierungsvorschläge, automatische Steuerberechnung) verbindet. Das Gamification-System macht Fortschritte sichtbar und adressiert die Motivationslücke im Solo-Freelancing.

<style> .flyx-impact { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 800px; margin: 32px auto; } /* Before/After */ .flyx-impact-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin-bottom: 24px; align-items: stretch; } .flyx-impact-before, .flyx-impact-after { padding: 24px; border-radius: 14px; } .flyx-impact-before { background: #FEF2F2; border: 1px solid #FECACA; } .flyx-impact-after { background: #ECFDF5; border: 1px solid #A7F3D0; } .flyx-impact-arrow { display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 20px; color: #D1D5DB; } .flyx-impact-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px; } .flyx-impact-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; } .flyx-impact-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; } .flyx-impact-text { font-size: 13px; line-height: 1.5; } /* Metrics */ .flyx-impact-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; } .flyx-impact-metric { padding: 20px; border-radius: 12px; border: 1px solid #E5E7EB; background: #FFFFFF; text-align: center; } .flyx-impact-metric-value { font-size: 28px; font-weight: 700; line-height: 1.1; margin-bottom: 6px; } .flyx-impact-metric-label { font-size: 12px; color: #6B7280; line-height: 1.4; } .flyx-impact-metric-sub { font-size: 11px; color: #9CA3AF; margin-top: 4px; } /* Coverage bar */ .flyx-impact-coverage { margin-top: 24px; } .flyx-impact-coverage-label { font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 10px; } .flyx-impact-coverage-bar { display: flex; height: 36px; border-radius: 8px; overflow: hidden; border: 1px solid #E5E7EB; } .flyx-impact-coverage-seg { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; color: #fff; padding: 0 12px; white-space: nowrap; } .flyx-impact-coverage-legend { display: flex; gap: 16px; margin-top: 10px; flex-wrap: wrap; } .flyx-impact-coverage-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6B7280; } .flyx-impact-coverage-dot { width: 8px; height: 8px; border-radius: 3px; } @media (max-width: 640px) { .flyx-impact-compare { grid-template-columns: 1fr; gap: 12px; } .flyx-impact-arrow { transform: rotate(90deg); padding: 8px 0; } } </style> <div class="flyx-impact">  <div class="flyx-impact-compare"> <div class="flyx-impact-before"> <div class="flyx-impact-label" style="color:#DC2626;">Vorher — 3–5 Einzeltools</div> <div class="flyx-impact-item"><span class="flyx-impact-icon">⏱</span><span class="flyx-impact-text" style="color:#7F1D1D;">Clockodo für Zeiterfassung</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">🧾</span><span class="flyx-impact-text" style="color:#7F1D1D;">Lexoffice für Rechnungen</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">📊</span><span class="flyx-impact-text" style="color:#7F1D1D;">Excel für Fixkosten-Tracking</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">📝</span><span class="flyx-impact-text" style="color:#7F1D1D;">Notizen für Steuertermine</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">❌</span><span class="flyx-impact-text" style="color:#7F1D1D;">Kein strategisches Instrument</span></div> </div> <div class="flyx-impact-arrow">→</div> <div class="flyx-impact-after"> <div class="flyx-impact-label" style="color:#059669;">Nachher — 1 integrierte Plattform</div> <div class="flyx-impact-item"><span class="flyx-impact-icon">✓</span><span class="flyx-impact-text" style="color:#065F46;">Timer + Projekt + Abrechnung</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">✓</span><span class="flyx-impact-text" style="color:#065F46;">Automatische Steuerlogik</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">✓</span><span class="flyx-impact-text" style="color:#065F46;">Bankimport + Fixkosten-Erkennung</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">✓</span><span class="flyx-impact-text" style="color:#065F46;">Stammkapital-Tracker + Gewinnoptimierung</span></div> <div class="flyx-impact-item"><span class="flyx-impact-icon">✓</span><span class="flyx-impact-text" style="color:#065F46;">Gamification & Fortschrittssystem</span></div> </div> </div>  <div class="flyx-impact-metrics"> <div class="flyx-impact-metric"> <div class="flyx-impact-metric-value" style="color:#4338CA;">< 3</div> <div class="flyx-impact-metric-label">Klicks bis Timer läuft</div> <div class="flyx-impact-metric-sub">Quick-Start-Flow</div> </div> <div class="flyx-impact-metric"> <div class="flyx-impact-metric-value" style="color:#059669;">< 5 min</div> <div class="flyx-impact-metric-label">Monatsabrechnung</div> <div class="flyx-impact-metric-sub">Filter → Export → Fertig</div> </div> <div class="flyx-impact-metric"> <div class="flyx-impact-metric-value" style="color:#7C3AED;">1</div> <div class="flyx-impact-metric-label">Plattform statt 5 Tools</div> <div class="flyx-impact-metric-sub">Vollständig integriert</div> </div> <div class="flyx-impact-metric"> <div class="flyx-impact-metric-value" style="color:#EA580C;">0</div> <div class="flyx-impact-metric-label">Manuelle Steuerberechnung</div> <div class="flyx-impact-metric-sub">Auto aus Kundenklassifikation</div> </div> </div>  <div class="flyx-impact-coverage"> <div class="flyx-impact-coverage-label">Feature-Abdeckung nach Freelance-Workflow</div> <div class="flyx-impact-coverage-bar"> <div class="flyx-impact-coverage-seg" style="flex:7;background:#4338CA;">Operativ</div> <div class="flyx-impact-coverage-seg" style="flex:4;background:#7C3AED;">Steuerung</div> <div class="flyx-impact-coverage-seg" style="flex:3;background:#A855F7;">Strategie</div> <div class="flyx-impact-coverage-seg" style="flex:1;background:#C4B5FD;">Motivation</div> </div> <div class="flyx-impact-coverage-legend"> <div class="flyx-impact-coverage-legend-item"><div class="flyx-impact-coverage-dot" style="background:#4338CA;"></div>Timer, Kunden, Projekte, Export</div> <div class="flyx-impact-coverage-legend-item"><div class="flyx-impact-coverage-dot" style="background:#7C3AED;"></div>Steuern, Fixkosten, Bankimport</div> <div class="flyx-impact-coverage-legend-item"><div class="flyx-impact-coverage-dot" style="background:#A855F7;"></div>Stammkapital, Gewinnoptimierung</div> <div class="flyx-impact-coverage-legend-item"><div class="flyx-impact-coverage-dot" style="background:#C4B5FD;"></div>Gamification</div> </div> </div> </div>

Fazit

Autoethnografische Forschung als Methode hat sich für dieses Projekt bewährt: Die Tiefe des Problemverständnisses wäre durch klassische Interviews nicht erreichbar gewesen, weil der Zusammenhang zwischen Zeiterfassung, Buchhaltung und strategischer Finanzplanung im Alltag ineinandergreift. Gleichzeitig erfordert die Methode besondere Disziplin bei der Objektivierung eigener Annahmen – nicht jeder persönliche Pain Point ist ein valider Feature-Treiber. Die MoSCoW-Priorisierung war entscheidend, um den umfangreichen Scope in realisierbare Phasen zu strukturieren, ohne strategische Module vorschnell zu streichen.