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 96% while enabling smoother animations. 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 file format. It was workflow.
External agencies delivered Illustrator files. We exported PNGs. Developers swapped images with JavaScript. Every animation required dozens of assets. File sizes ballooned. Users waited. We tested SVG + CSS instead of PNG sequences. Discovered we could animate elements directly.
Result: file sizes reduced by up to 96%. Animation smoothness improved. Error loops nearly eliminated. Format matters. But workflow matters more.
Symbols scale. Redundancy doesn't.
Illustrations contained hundreds of duplicate elements. No symbols. No structure. We rebuilt them using nested symbols and optimized paths. From 730KB to 96KB. Same visual quality.
40× smaller. Not through compression – through craftsmanship. Clean structure beats file size hacks. Always.
Before/After Comparison: 730KB → 96KB Same quality, 40× smaller
Collaboration requires shared vocabulary.
Guidelines Created: Layer naming → id attributes Graphic styles → class attributes
Agencies, designers, developers – 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.
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 loading times. 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.