My Role: Sole UX/UI Designer
Services: Workflow Optimization, Research, UI, Templating, Workshops
Platform: Adobe XD Shared Template
Employer: PXL Vision AG
Timeline: 1 month, January 2021
Whitelabel template – through real-time collaboration
Asset collection was broken. Wrong file formats. Endless back-and-forth. Unclear brand specs. Through a shared Adobe XD template with SCSS-mirrored tokens and co-editing sessions, we cut rework time by 50% and transformed whitelabel customization from file exchange into collaborative configuration. Faster. Clearer. More human.
Core shift: From asset chaos to real-time co-creation – through structured templates.
3 Min. Read
How we solved problems
Three challenges, three breakthroughs
The problem wasn't the customers. It was the process.
Customers sent assets. Wrong formats. Text too long. Colors in CMYK as in Hex or RGB . Every handoff required 3-4 revision cycles. We documented requirements better. Didn't help. So we flipped it: instead of collecting assets, customers configured them in a shared XD template. Edit colors, typography, logos – see changes live on all screens.
Result: rework time cut by ~50%. Process design beats better instructions.
Code as source of truth – not design files.
Designers and developers spoke different languages. Every handoff was translation work. We defined SCSS variables (tokens) with the dev team first – colors, fonts, component variants. Then mirrored them in XD. Customers edited visually. Developers received production-ready variables.
No guessing. No naming mismatches. Two interfaces. One source of truth.
Variables Defined: SCSS tokens first XD template mirrored Production-ready output
Real-time co-editing turned questions into answers.
Before: Email threads 15+ messages per change "Which version?" confusion
Every question was an email. Every clarification added delay. Adobe XD's co-editing let us run live sessions. Customer asks «Can we change this?» – we show the answer instantly. Changes visible in real-time across all screens. Efficiency improved. Engagement increased. This later informed our SaaS self-service portal, because we learned what customers struggle with before building it.
Key Learnings
What this project taught me
Stakeholder buy-in requires proof, not arguments
The product manager was skeptical. Better documentation felt safer. The pain: trying to convince with logic and slides. What worked: building a quick proof-of-concept, inviting them to a live co-editing session, and letting them experience the difference firsthand.
Good tools need good structure to work
Adobe XD's co-editing was powerful – but only after we structured the template around SCSS tokens and production needs. What saved me: working with developers first to define variables, then building the XD template around their system – not hoping dev would adapt to design.
Customer pain points are product insights
This wasn't just workflow optimization – it revealed exactly where whitelabel configuration breaks down. What helped: documenting customer struggles (text length prediction, brand color choices) and feeding these insights directly into our SaaS self-service portal roadmap.
Why this still matters
The best collaboration isn't file exchange. It's shared canvases.
Email threads don't scale. Screenshot feedback loops waste time. Async communication compounds misunderstanding. The teams that win don't send files back and forth – they work on the same canvas in real-time. This XD template later became the foundation for a self-service SaaS portal, proving that better collaboration today reveals better products tomorrow.