Meine Rolle: UX/UI-Designer & Consultant (Freelance)
Initiative: Proaktiver Pitch an PM, Design & Dev
Leistungen: Proaktive Problemanalyse, technische Recherche, Proof-of-Concept, Guidelines & Pitch
Tool-Stack: Illustrator (SVG), TinyPNG
Arbeitgeber: Luzerner Kantonalbank (LUKB)
Zeitraum: 1 Tag Analyse, Prototyp & Konzept — März 2023
Optimierter SVG-Workflow – durch technisches Handwerk
Illustrationen zu gross. Animationen träge. Ladezeiten, die User mürbe machten. Durch SVG-Optimierung, symbolbasierte Architektur und CSS/JS-Bindings reduzierten wir die Dateigrössen um bis zu 94% – bei flüssigeren Animationen und schnelleren Ladezeiten. Bessere UX. Niedrigere Kosten.
Kern-Shift: Proaktiv erkannt. In einem Tag bewiesen. An PM und Dev übergeben – weil Ladezeiten in Banking-Apps kein Design-Problem sind. Sie sind ein Kosten-Problem.
3 Min. Lektüre
Wie wir die Probleme lösten
Drei Herausforderungen, drei Durchbrüche
Das Problem lag nicht am Format. Es war der Workflow.
Externe Agenturen lieferten Illustrator-Dateien. Wir exportierten und übergaben optimierte PNGs. Entwickler tauschten die Bilder per JavaScript aus – mit manuellen Mappings für Dutzende Illustrationen und verschiedene Assets. Die Dateigrössen explodierten. User warteten. Der Overhead war real: Exportieren, Optimieren, Umbenennen, Übergeben – Iteration für Iteration.
Ein paar Fakten aus der Produktion:
- Mehr als 24 Illustrationen, jeweils mit 4–10 Einzelbildern, für die PNG-Produktion.
- Bis zu 2–5 Iterationen pro Illustration im Dreier-Ping-Pong (Agentur, Intern, Dev.)
- Bei jedem Hand-Off per Mail, mussten Dateinamen inkl. Frame prefix eingehalten werden und jedes PNG zusätzlich durch einen Optimierungsprozess laufen (TinyPNG)
- Zusätzliche Runden durch Schreibfehler und Begriffsänderungen in Bildern oder Dateinamen. Merkliche Qualitätsverluste bei der Komprimierung.
- In der ersten Phase des Projekts mussten, über den Daumen, rund 200 Bilder bearbeitet werden.
Wir testeten SVG + CSS/JS statt PNG-Sequenzen, da wir eh Illustrator-Dateien für den Export bekamen. Die Vorteile von SVGs muss ich hier nicht näher erläutern. Und merkten schnell: Der gesamte Illustrations-to-Code-Prozess liess sich grundlegend überdenken.
Ergebnis: Standardisierte Spezifikationen und Templates machten die Zusammenarbeit zu einem wiederholbaren Workflow – weniger manuelle Nacharbeit, weniger Fehler, sauberere Iterationszyklen von Anfang bis Ende.
Zero interne PNG-Optimierungen und fehleranfällige Übergabe-Logistik.
Zusammenarbeit braucht eine gemeinsame Sprache.
Agenturen, Entwickler, Designer – alle hatten unterschiedliche Annahmen. Keine Namenskonventionen. Keine Format-Spezifikationen. Wir erstellten Guidelines: Layer-Naming → ID-Attribute, Grafik-Stile → Class-Attribute. Gemeinsame Templates.
Klare Dokumentation. Wenig Missverständnisse. Wir optimierten nicht nur Dateien. Wir optimierten den gesamten Workflow über alle Disziplinen hinweg.
Symbole skalieren. Redundanz nicht.
Die Illustrationen enthielten Hunderte von Duplikaten und ungenutzten Elementen. Als Bild nicht ersichtlich im SVG-Code schon. Keine Symbole. Keine Struktur. Wir bauten sie neu auf – mit verschachtelten Symbolen und optimierten Pfaden.
Bis zu 17-mal kleiner.
Nicht durch Kompression – durch Handwerk, Wiederverwertung, Vereinheitlichung. Saubere Struktur schlägt Dateigrössen-Hacks. Immer.
Ergebnis: Die Dateigrössen sanken um bis zu 94%. Elemente wurden wiederverwendbar gemacht und die Vereinheitlichung der Bildsprache unterstützt . Das Format zählt – aber ein guter Workflow ist es, was daraus mehr als nur Skalierung macht.
Prototyping
SVG-Implementierung → Proof
Der Prototyp beweist eine skalierbare Illustrations-to-Code-Pipeline: Iterieren durch den einfachen Austausch des SVG-Assets – ohne Code-Eingriff.
Ergebnis: Schnellere Updates, kleinere Dateien, flüssigere Micro-Animationen und keine oder deutlich weniger Übergabe-Fehler.
Impact: Beschleunigter Prozess, Ressourcen-Einsparungen, skalierbar über Dutzende von Illustrationen.
Business impact: ~80% Zeitersparnis pro Iterationsrunde – weniger Agentur-Pingpong, weniger interner Overhead
Key Learnings
Was dieses Projekt mich gelehrt hat
Workflows zu ändern braucht Geduld – und Beweis
Die Stakeholder waren mit PNG-Exporten vertraut. Der Schmerz: Menschen davon zu überzeugen, bewährte Abläufe aufzugeben. Was half: schnelle Prototypen mit 94% Dateigrössen-Reduktion und Prototypen, die den Wert sofort sichtbar machten.
Technisches Handwerk öffnet Design-Potenzial
SVG-Optimierung war nicht nur eine Frage der Dateigrösse – sie ermöglichte flüssige Animationen, die mit PNGs schlicht nicht möglich waren. Was mich rettete: das Verständnis für Design und Code – die Brücke zwischen dem, was Designer nutzen und erbringen, und dem, wie Entwickler es weiterverwenden können.
Nachhaltigkeit ist kein Nice-to-have. Sie ist schlaues Business.
Kleinere Dateien bedeuten schnellere Ladezeiten, niedrigere Serverkosten und eine bessere UX. Der Schmerz: ökologische Vorteile zu kommunizieren, ohne moralisierend zu klingen. Was half: Business-Metriken zuerst – Ladezeit, Kosteneinsparungen – und die Nachhaltigkeit folgte als Bonus.
Warum das noch zählt
In Banking-Apps zählt jedes Kilobyte
User sehen keine Dateigrössen. Sie spüren die Ladezeiten oder den Batteriestatus. Die beste Optimierung ist unsichtbar – schneller, flüssiger, reaktiver. Dieses Projekt hat bewiesen: Technisches Handwerk ist kein Overhead. Es ist das Fundament guter UX und echtem geschäftlichem Impact.
Danke fürs Lesen
Verwandte Projekte
Tauche tiefer in meine Arbeit ein
How curiosity doubled lead conversion
Winning accessibility through radical simplification
© 2025 Matze Lenz. All rights reserved. Imprint