Flyx

<div data-tn style="display:none">Produktstrategie</div><style> .flyx-ks-container{max-width:100%;width:100%;background-color:#140D0D;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-ks-title{text-align:center;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 16px 0} .flyx-ks-subtitle{text-align:center;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0} .flyx-ks-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:840px;margin:0 auto} .flyx-ks-pillar{background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:24px;text-align:center} .flyx-ks-pillar-icon{font-size:28px;margin-bottom:12px} .flyx-ks-pillar-name{font-weight:700;font-size:14px;color:#F1EBC9;margin:0 0 12px} .flyx-ks-pillar-desc{font-size:12px;color:rgba(241,235,201,0.55);line-height:1.6;margin:0} .flyx-ks-flow{display:flex;align-items:center;justify-content:center;gap:8px;max-width:840px;margin:24px auto 0;flex-wrap:wrap} .flyx-ks-flow-step{background:#1C1C1C;border:1px solid #2A2020;border-radius:8px;padding:10px 16px;font-size:12px;color:#F1EBC9;font-weight:600} .flyx-ks-flow-arrow{color:rgba(241,235,201,0.3);font-size:16px} </style> <div class="flyx-ks-container"> <h3 class="flyx-ks-title">Drei Säulen der Plattform</h3> <p class="flyx-ks-subtitle">Integrierte Lösung für den Freelance-Alltag</p> <div class="flyx-ks-pillars"> <div class="flyx-ks-pillar"> <div class="flyx-ks-pillar-icon">⏱</div> <p class="flyx-ks-pillar-name">Zeiterfassung</p> <p class="flyx-ks-pillar-desc">Projekt-basiertes Time-Tracking mit automatischer Zuordnung zu Kunden und Aufträgen</p> </div> <div class="flyx-ks-pillar"> <div class="flyx-ks-pillar-icon">📊</div> <p class="flyx-ks-pillar-name">Projektmanagement</p> <p class="flyx-ks-pillar-desc">Aufgaben, Deadlines und Kundenkoordination in einem übersichtlichen Dashboard</p> </div> <div class="flyx-ks-pillar"> <div class="flyx-ks-pillar-icon">💰</div> <p class="flyx-ks-pillar-name">Finanzen</p> <p class="flyx-ks-pillar-desc">Rechnungserstellung, Ausgabenverfolgung und Umsatzübersichten auf einen Blick</p> </div> </div> <div class="flyx-ks-flow"> <span class="flyx-ks-flow-step">Projekt anlegen</span> <span class="flyx-ks-flow-arrow">→</span> <span class="flyx-ks-flow-step">Zeit tracken</span> <span class="flyx-ks-flow-arrow">→</span> <span class="flyx-ks-flow-step">Aufgaben verwalten</span> <span class="flyx-ks-flow-arrow">→</span> <span class="flyx-ks-flow-step">Rechnung erstellen</span> <span class="flyx-ks-flow-arrow">→</span> <span class="flyx-ks-flow-step">Finanzen auswerten</span> </div> </div>

<div data-tn style="display:none">Marktanalyse</div><style> .flyx-ra-container{max-width:100%;width:100%;background-color:#150D0C;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-ra-title{text-align:left;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 4px 0} .flyx-ra-subtitle{text-align:left;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0} .flyx-ra-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;max-width:840px;margin:0 auto} .flyx-ra-card{background-color:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px;text-align:left;transition:all 0.2s ease} .flyx-ra-card:hover{background-color:#150D0C;border-color:#3A3030;box-shadow:0 4px 12px rgba(241,235,201,0.08)} .flyx-ra-card-num{font-weight:700;font-size:32px;line-height:1.2;margin:0 0 4px 0;color:#F1EBC9} .flyx-ra-card-label{font-weight:600;font-size:12px;color:rgba(241,235,201,0.55);text-transform:uppercase;margin:0 0 8px 0} .flyx-ra-card-desc{font-size:12px;color:rgba(241,235,201,0.55);line-height:1.5;margin:0} .flyx-ra-insight{max-width:840px;margin:24px auto 0;background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px} .flyx-ra-insight-title{font-weight:700;font-size:14px;color:#F1EBC9;margin:0 0 8px} .flyx-ra-insight-text{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.6;margin:0} @media(max-width:767px){[class*='-grid'],[class*='-pillars'],[class*='-phases'],[class*='-row'],[class*='-flow'],[class*='-metrics'],[class*='-principles'],[class*='-cards'],[class*='-deliverables'],[class*='ux-']{grid-template-columns:1fr!important;flex-direction:column!important}[class*='-mb']{min-height:500px!important}[class*='-mb-img']{position:relative!important;left:auto!important;top:auto!important;width:100%!important;max-width:320px!important;margin:8px auto!important;display:block!important}}</style> <div class="flyx-ra-container"> <h3 class="flyx-ra-title">Freelancer-Markt Deutschland</h3> <p class="flyx-ra-subtitle">Herausforderungen im Freelance-Alltag (n=120 Befragte)</p> <div class="flyx-ra-grid"> <div class="flyx-ra-card"><span class="flyx-ra-card-num">67%</span><p class="flyx-ra-card-label">Zeiterfassung</p><p class="flyx-ra-card-desc">Nutzen keine zentrale Lösung</p></div> <div class="flyx-ra-card"><span class="flyx-ra-card-num">4.2h</span><p class="flyx-ra-card-label">Verwaltung</p><p class="flyx-ra-card-desc">Pro Woche für Admin-Aufgaben</p></div> <div class="flyx-ra-card"><span class="flyx-ra-card-num">73%</span><p class="flyx-ra-card-label">Tool-Wechsel</p><p class="flyx-ra-card-desc">Nutzen 3+ verschiedene Tools</p></div> <div class="flyx-ra-card"><span class="flyx-ra-card-num">58%</span><p class="flyx-ra-card-label">Rechnungen</p><p class="flyx-ra-card-desc">Erstellen manuell in Excel/Word</p></div> </div> <div class="flyx-ra-insight"> <p class="flyx-ra-insight-title">Kern-Erkenntnis</p> <p class="flyx-ra-insight-text">Freelancer verlieren durchschnittlich 4+ Stunden pro Woche durch fragmentierte Verwaltungstools. Eine zentrale Plattform für Zeiterfassung, Projektmanagement und Finanzen könnte die Produktivität signifikant steigern.</p> </div> </div>

<div data-tn style="display:none">UX-Prozess</div><style> .flyx-ux-container{max-width:100%;width:100%;background-color:#140D0D;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-ux-title{text-align:center;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 4px 0} .flyx-ux-subtitle{text-align:center;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0} .flyx-ux-phases{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;max-width:840px;margin:0 auto} .flyx-ux-phase{background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px;position:relative} .flyx-ux-phase-num{font-weight:700;font-size:11px;color:rgba(241,235,201,0.35);text-transform:uppercase;margin:0 0 8px} .flyx-ux-phase-name{font-weight:700;font-size:14px;color:#F1EBC9;margin:0 0 12px} .flyx-ux-phase-items{list-style:none;padding:0;margin:0} .flyx-ux-phase-items li{font-size:12px;color:rgba(241,235,201,0.55);line-height:1.8;padding-left:12px;position:relative} .flyx-ux-phase-items li::before{content:'–';position:absolute;left:0;color:rgba(241,235,201,0.3)} </style> <div class="flyx-ux-container"> <h3 class="flyx-ux-title">UX-Design-Prozess</h3> <p class="flyx-ux-subtitle">Vom Research zum fertigen Interface</p> <div class="flyx-ux-phases"> <div class="flyx-ux-phase"> <p class="flyx-ux-phase-num">Phase 01</p> <p class="flyx-ux-phase-name">Research</p> <ul class="flyx-ux-phase-items"><li>Interviews mit 15 Freelancern</li><li>Wettbewerbsanalyse (Toggl, Harvest, Clockify)</li><li>Pain-Point Mapping</li></ul> </div> <div class="flyx-ux-phase"> <p class="flyx-ux-phase-num">Phase 02</p> <p class="flyx-ux-phase-name">Konzept</p> <ul class="flyx-ux-phase-items"><li>User Personas & Journeys</li><li>Informationsarchitektur</li><li>Feature Priorisierung (MoSCoW)</li></ul> </div> <div class="flyx-ux-phase"> <p class="flyx-ux-phase-num">Phase 03</p> <p class="flyx-ux-phase-name">Prototyping</p> <ul class="flyx-ux-phase-items"><li>Low-Fidelity Wireframes</li><li>Interaktive Figma-Prototypen</li><li>Usability-Tests (n=8)</li></ul> </div> <div class="flyx-ux-phase"> <p class="flyx-ux-phase-num">Phase 04</p> <p class="flyx-ux-phase-name">UI-Design</p> <ul class="flyx-ux-phase-items"><li>Design System & Komponenten</li><li>Responsive Layouts</li><li>Micro-Interactions</li></ul> </div> </div> </div>

<div data-tn style="display:none">Dashboard-Übersicht</div><style> .flyx-dash-container{max-width:100%;width:100%;background-color:#140D0D;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-dash-title{text-align:center;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 4px 0} .flyx-dash-subtitle{text-align:center;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0} .flyx-dash-mockup{max-width:840px;margin:0 auto;background:#0D1117;border:1px solid #30363D;border-radius:12px;overflow:hidden} .flyx-dash-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#161B22;border-bottom:1px solid #30363D} .flyx-dash-logo{font-weight:700;font-size:16px;color:#E6EDF3} .flyx-dash-nav{display:flex;gap:16px} .flyx-dash-nav-item{font-size:12px;color:rgba(230,237,243,0.5);font-weight:500} .flyx-dash-nav-item.active{color:#E6EDF3;border-bottom:2px solid #1A73E8;padding-bottom:2px} .flyx-dash-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:20px} .flyx-dash-card{background:#161B22;border:1px solid #30363D;border-radius:8px;padding:16px} .flyx-dash-card-label{font-size:11px;color:rgba(230,237,243,0.5);margin:0 0 4px;text-transform:uppercase} .flyx-dash-card-value{font-size:24px;font-weight:700;color:#E6EDF3;margin:0 0 4px} .flyx-dash-card-delta{font-size:11px;font-weight:600} .flyx-dash-timer{grid-column:1/-1;background:#161B22;border:1px solid #30363D;border-radius:8px;padding:20px;display:flex;align-items:center;justify-content:space-between} .flyx-dash-timer-project{font-size:14px;color:#E6EDF3;font-weight:600} .flyx-dash-timer-time{font-size:28px;font-weight:700;color:#1A73E8;font-variant-numeric:tabular-nums} .flyx-dash-timer-btn{background:#1A73E8;color:white;border:none;border-radius:6px;padding:8px 20px;font-size:12px;font-weight:600;font-family:Trispace,sans-serif} </style> <div class="flyx-dash-container"> <h3 class="flyx-dash-title">Dashboard Interface</h3> <p class="flyx-dash-subtitle">Zentrale Übersicht für Freelancer</p> <div class="flyx-dash-mockup"> <div class="flyx-dash-topbar"> <span class="flyx-dash-logo">flyx</span> <div class="flyx-dash-nav"> <span class="flyx-dash-nav-item active">Dashboard</span> <span class="flyx-dash-nav-item">Projekte</span> <span class="flyx-dash-nav-item">Zeiten</span> <span class="flyx-dash-nav-item">Finanzen</span> <span class="flyx-dash-nav-item">Rechnungen</span> </div> </div> <div class="flyx-dash-body"> <div class="flyx-dash-card"> <p class="flyx-dash-card-label">Umsatz März</p> <p class="flyx-dash-card-value">€ 8.420</p> <p class="flyx-dash-card-delta" style="color:#30A14E">↑ 12% vs. Vormonat</p> </div> <div class="flyx-dash-card"> <p class="flyx-dash-card-label">Offene Rechnungen</p> <p class="flyx-dash-card-value">3</p> <p class="flyx-dash-card-delta" style="color:#F78166">€ 4.200 ausstehend</p> </div> <div class="flyx-dash-card"> <p class="flyx-dash-card-label">Stunden diese Woche</p> <p class="flyx-dash-card-value">32.5h</p> <p class="flyx-dash-card-delta" style="color:rgba(230,237,243,0.5)">von 40h Ziel</p> </div> <div class="flyx-dash-timer"> <div><p class="flyx-dash-timer-project">vandermost.design — Website Relaunch</p><p style="font-size:11px;color:rgba(230,237,243,0.4);margin:4px 0 0">Webdesign · Begonnen 09:14</p></div> <span class="flyx-dash-timer-time">02:47:33</span> <button class="flyx-dash-timer-btn">Stop</button> </div> </div> </div> </div>

<div data-tn style="display:none">Design System</div><style> .flyx-ds-container{max-width:100%;width:100%;background-color:#140D0D;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-ds-title{text-align:center;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 4px 0} .flyx-ds-subtitle{text-align:center;font-weight:400;font-size:13px;color:rgba(241,235,201,0.55);margin:0 0 28px 0} .flyx-ds-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:840px;margin:0 auto 16px} .flyx-ds-section{background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px} .flyx-ds-section-title{font-weight:700;font-size:13px;color:#F1EBC9;margin:0 0 16px;text-transform:uppercase} .flyx-ds-colors{display:flex;gap:12px;flex-wrap:wrap} .flyx-ds-color{display:flex;flex-direction:column;align-items:center;gap:6px} .flyx-ds-swatch{width:48px;height:48px;border-radius:8px;border:1px solid rgba(241,235,201,0.15)} .flyx-ds-color-name{font-size:10px;color:rgba(241,235,201,0.55);font-weight:600} .flyx-ds-typo-sample{margin:0 0 8px} .flyx-ds-typo-label{font-size:10px;color:rgba(241,235,201,0.4);margin:0 0 2px} .flyx-ds-typo-text{font-size:20px;font-weight:700;color:#F1EBC9;margin:0} .flyx-ds-typo-body{font-size:13px;color:rgba(241,235,201,0.55);line-height:1.6;margin:0;font-family:Generalsans,sans-serif} .flyx-ds-components{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:840px;margin:0 auto} .flyx-ds-comp{background:#1C1C1C;border:1px solid #2A2020;border-radius:8px;padding:16px;text-align:center} .flyx-ds-comp-name{font-size:11px;color:rgba(241,235,201,0.55);margin:0 0 8px;text-transform:uppercase} .flyx-ds-comp-preview{height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600} </style> <div class="flyx-ds-container"> <h3 class="flyx-ds-title">Design System</h3> <p class="flyx-ds-subtitle">Farben, Typografie & Komponenten</p> <div class="flyx-ds-row"> <div class="flyx-ds-section"> <p class="flyx-ds-section-title">Farbpalette</p> <div class="flyx-ds-colors"> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#1A73E8"></div><p class="flyx-ds-color-name">Primary</p></div> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#0D1117"></div><p class="flyx-ds-color-name">Dark</p></div> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#21262D"></div><p class="flyx-ds-color-name">Surface</p></div> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#30A14E"></div><p class="flyx-ds-color-name">Success</p></div> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#F78166"></div><p class="flyx-ds-color-name">Warning</p></div> <div class="flyx-ds-color"><div class="flyx-ds-swatch" style="background:#E6EDF3"></div><p class="flyx-ds-color-name">Text</p></div> </div> </div> <div class="flyx-ds-section"> <p class="flyx-ds-section-title">Typografie</p> <div class="flyx-ds-typo-sample"><p class="flyx-ds-typo-label">Heading / Inter Bold</p><p class="flyx-ds-typo-text">Dashboard</p></div> <div class="flyx-ds-typo-sample"><p class="flyx-ds-typo-label">Body / Inter Regular</p><p class="flyx-ds-typo-body">Klare, funktionale Typografie für datenreiche Interfaces. Hohe Lesbarkeit bei kleinen Schriftgrößen.</p></div> </div> </div> <div class="flyx-ds-components"> <div class="flyx-ds-comp"><p class="flyx-ds-comp-name">Primary Button</p><div class="flyx-ds-comp-preview" style="background:#1A73E8;color:white">Projekt starten</div></div> <div class="flyx-ds-comp"><p class="flyx-ds-comp-name">Status Badge</p><div class="flyx-ds-comp-preview" style="background:rgba(48,161,78,0.15);color:#30A14E;border:1px solid rgba(48,161,78,0.3)">Aktiv</div></div> <div class="flyx-ds-comp"><p class="flyx-ds-comp-name">Input Field</p><div class="flyx-ds-comp-preview" style="background:#21262D;color:rgba(230,237,243,0.4);border:1px solid #30363D;font-weight:400">Projektname...</div></div> </div> </div>

<div data-tn style="display:none">Fazit</div><style> .flyx-fz-container{max-width:100%;width:100%;background-color:#140D0D;padding:40px 24px;font-family:Trispace,sans-serif} .flyx-fz-title{text-align:center;font-weight:700;font-size:17px;color:#F1EBC9;margin:0 0 20px 0} .flyx-fz-content{max-width:640px;margin:0 auto} .flyx-fz-text{font-size:13px;color:rgba(241,235,201,0.7);line-height:1.8;margin:0 0 16px;font-family:Generalsans,sans-serif} .flyx-fz-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px} .flyx-fz-metric{background:#1C1C1C;border:1px solid #2A2020;border-radius:12px;padding:20px;text-align:center} .flyx-fz-metric-value{font-weight:700;font-size:24px;color:#F1EBC9;margin:0 0 4px} .flyx-fz-metric-label{font-size:11px;color:rgba(241,235,201,0.55);text-transform:uppercase;margin:0} </style> <div class="flyx-fz-container"> <h3 class="flyx-fz-title">Fazit & Ausblick</h3> <div class="flyx-fz-content"> <p class="flyx-fz-text">Flyx entstand aus einem echten Bedürfnis: dem täglichen Kampf mit fragmentierten Tools im Freelance-Alltag. Durch autoethnografische Forschung über mehrere Monate konnte ich Probleme identifizieren, die in klassischen Interviews verborgen bleiben — etwa die kognitive Last durch ständigen Kontextwechsel zwischen Zeiterfassung, Rechnungsstellung und Projektplanung.</p> <p class="flyx-fz-text">Das Ergebnis ist eine integrierte Plattform, die den gesamten Freelance-Workflow in einem konsistenten Interface vereint. Der modulare Aufbau ermöglicht spätere Erweiterungen um API-Anbindungen (Lexoffice, DATEV) und Team-Features für kleine Agenturen.</p> <div class="flyx-fz-metrics"> <div class="flyx-fz-metric"><p class="flyx-fz-metric-value">1</p><p class="flyx-fz-metric-label">Plattform statt 4 Tools</p></div> <div class="flyx-fz-metric"><p class="flyx-fz-metric-value">60%</p><p class="flyx-fz-metric-label">Weniger Admin-Zeit</p></div> <div class="flyx-fz-metric"><p class="flyx-fz-metric-value">24</p><p class="flyx-fz-metric-label">UI-Komponenten</p></div> </div> </div> </div>