How do you simplify customization and collaboration?
By leveraging Adobe XD’s capabilities, we transformed a time-consuming and unclear communication process into a seamless, collaborative experience, allowing customers to tailor their applications efficiently.
Reading time, about 3 min.
Project start: January 2021
Timeline: 1 months
Employer: PXL Vision AG, a Swiss market leader, provides automated identity verification for organizations that are digitalizing their KYC or onboarding processes.
Services: Workflow optimization, Research, UI, Templating, Workshops, Handoffs
Application: Adobe XD shared template
The Challenge
How might we improve communication and file-sharing for our Whitelabel web app and ensure customers feel at home?
Before implementing the Adobe XD template, the asset collection process was cumbersome:
- Assets arrived in the wrong format or were too large.
- Text snippets were tricky to integrate due to length and assignability issues.
- Communication required constant back-and-forth due to missing information.
The Result
We introduced a collaborative, shareable Adobe XD Whitelabel template, allowing customers:
Customize colors, typography, and workflows to fit their brand. Directly place and refine text with real-time feedback. Engage in collaborative XD sessions for faster iteration and problem-solving.
Performance & Business Impact
A Whitelabel template is not just a convenience—it’s a business advantage.
- Reduced rework time, accelerating production.
- Standardized workflows improve customer onboarding and satisfaction.
- Increased adoption by making customization intuitive and collaborative.
My Role
Sole UX/UI Designer
In this proactive project, I worked closely with the product manager and lead developer to provide solutions to enhance our communication with customers and support our developers in Serbia with valuable assets.
Team: Roxana Prada (CPO), Michael Zelaznik (Full Stack Developer)
Tools: Adobe XD, Slack
Skills Applied: Design Systems, White Labeling, Adobe XD, UX/UI Design, Creative-Sessions, Custome-Workshops
In short, the design process
Learn from past experiences
While struggling with customer assets and unclear information, I wondered if we could share our Adobe XD production files directly with our customers' designers.
How we tackled the challenge:
- Explored new Adobe XD features to optimize workflows.
- Created a Whitelabel XD template with reusable components and styles.
- Collaborated with development teams to define SCSS variables (tokens) and production assets.
- Developed guidelines and documentation for our customers.
- Distributed the Whitelabel template to customers.
- Get back Brand Packs with configured assets and customer preferences.
- Handed off the assets to development for implementation.
Key Insights & Takeaways
This experience was invaluable. It created a solution that reduced my workload in adjusting, optimizing, and renaming customer assets. It also provided valuable insights for developing features for our SaaS self-service portal, which was in the pipeline.
Code as the Single Source of Truth
Building on SCSS variables (tokens) streamlined development.
We worked closely with the dev team to define:
- SCSS variables.
- Typographic assets.
- Color definitions.
- On-screen text elements.
- Required and optional UI components.
Mirroring these in an XD template allowed for faster, clearer developer handoffs—eliminating unnecessary revisions.
Make It Easy to Use
Customers should intuitively navigate and customize their projects.
Our Adobe XD template provided:
- Global brand editing (colors, typography, logos) with real-time reflection on screen layouts.
- Text editing directly on UI components.
- Visibility toggles for optional elements.
- Customizable app flows to adapt to specific needs.
Even non-designers could use the free Adobe XD version to set up their projects effortlessly.
Real-Time Collaboration Matters
The ability to collaborate in real-time was a game-changer.
Adobe XD’s co-editing feature allowed us to:
- Run live design sessions, answering questions instantly.
- Provide direct help during customization.
- Improve efficiency and engagement, making the process more fun and connected.
Looking Ahead
Future Scalability
The Whitelabel template experience laid the groundwork for a SaaS portal with built-in customization. Identifying customer's battles early gave us valuable insights into configuration challenges in large-scale applications.
What the project taught me
Clarity & the Right Resources Improve Efficiency and Satisfaction
A shared understanding between teams accelerates results.
Collaboration between designers, developers, and customers created a streamlined workflow and a more enjoyable customization experience.
What I Learned
- Collaboration tools boost efficiency and engagement.
- Helping others succeed simplifies our work and enhances team synergy.
- Experimenting with new features opens new use cases and unlocks innovation.
What I Would Do Differently
- Initially, convincing the PM of this approach was a challenge. Next time, I would use data-driven arguments and relatable insights to gain buy-in faster.
- I would formalize the collaboration process earlier, ensuring smoother integration with development teams.
- In my following projects, I will advocate for single-source things and streamline design and development by tokens and code.
Final Thought
By rethinking how we collaborate, we improved workflows and created a better, faster, and more engaging way for customers to personalize their web apps. White labeling should be effortless, and this template made it happen.
Thank you for reading
Related projects
Dive deeper into my work
Collaborate
… SOON
© 2025 Matze Lenz. All rights reserved. Imprint