My Role: Freelance UX/UI Consultant
Services: Workflow Optimization, Technical Research, Guidelines, Workshops
Platform: SVG Illustration System
Employer: Luzerner Kantonalbank (LUKB)
Timeline: 2 × 6 months, March 2023
Optimized SVG workflow – through technical craftsmanship
Illustrations were too large. Animations lagged. Loading times frustrated users. Through SVG optimization, symbol-based architecture, and CSS/JS bindings, we reduced file sizes by up to 94% while enabling smoother animations and faster loads. Better UX. Lower costs.
Core shift: From heavy PNGs to lightweight SVGs – through structured illustration craftsmanship.
3 Min. Read
How we solved problems
Three challenges, three breakthroughs
The problem wasn't the file format. It was workflow.
External agencies delivered Illustrator files. We exported and handed over optimized PNGs. Developers swapped images with JavaScript and added manual image mappings for each of the several dozen illustrations and different assets. File sizes ballooned. Users waited. We ended up with overhead from exporting, optimizing, renaming, and handover of PNG files across several iterations. We tested SVG + CSS/ JS instead of PNG sequences. Discovered we could optimize the workflow and illustration-to-code pipeline.
Result: Standardized specs and templates transformed collaboration into a repeatable workflow—minimizing manual afterwork, preventing errors, and keeping end-to-end iteration cycles clean and efficient.
Zero interal PNG optimazations and erro prone hand-off organisation
Collaboration requires shared vocabulary.
Agencies, developers, and designers – everyone had different assumptions. No naming conventions. No format specs. We created guidelines: layer naming → id attributes, graphic styles → class attributes. Shared templates.
Clear documentation. Zero ambiguity. We didn't just optimize files. We optimized the entire workflow across disciplines.
Symbols scale. Redundancy doesn't.
Illustrations contained hundreds of duplicate elements. No symbols. No structure. We rebuilt them using nested symbols and optimized paths.
Up to 17× smaller. Not through compression – through craftsmanship. Clean structure beats file size hacks. Always.
Result: file sizes dropped by up to 94%. Animations run smoother. Iterations are fast and reliable. Format matters—but a great workflow is what makes it more than scale.
Prototyping
SVG implementation → Prototype
The prototype proves a scalable illustration-to-code pipeline: iterate by swapping the SVG asset—no code changes.
Result: faster updates, smaller files, smoother micro-animations, and fewer or no handoff errors, just commitments.
Impact: upspeeded process, recource savings, scalable over dozens of illustartions
Key Learnings
What this project taught me
Changing workflows requires patience and proof
Stakeholders were comfortable with PNG exports. The pain: convincing people to change proven workflows. What worked: building quick prototypes showing 96% file size reduction and running live tests that proved the value immediately.
Technical craft unlocks design potential
SVG optimization wasn't just about file size – it enabled fluid animations we couldn't achieve with PNGs. What saved me: understanding both design and code, bridging the gap between what designers want and what developers can implement.
Sustainability isn't a nice-to-have. It's smart business.
Smaller files mean faster loads, lower server costs, and better UX. The pain: framing environmental benefits without sounding preachy. What helped: leading with business metrics (loading time, cost savings) and letting sustainability follow as a bonus.
Why this still matters
Every kilobyte counts
Users don't see file sizes. They feel the loading times, battery consumption. The best optimization is invisible – faster, smoother, more responsive. This project proved that technical craftsmanship isn't overhead. It's the foundation of great UX and Business impact.
Thank you for reading
Related projects
Dive deeper into my work
How curiosity doubled lead conversion
Winning accessibility through radical simplification
© 2025 Matze Lenz. All rights reserved. Imprint
