Adobe
Desktop
2021-2022
Empowering designers to create more dynamic prototypes and immersive design experiences
From December 2020 to August 2021, our team set out to tackle a growing challenge for Adobe XD users: incorporating video into their prototypes without jumping between multiple tools. We listened to over 11k designers who told us they wanted a simple, all-in-one solution to express richer, more interactive ideas. By integrating video playback and controls directly into XD, we not only gave creators the power to seamlessly import, preview, and tweak video assets, but also boosted user engagement and solidified Adobe XD’s position as a leader in expressive prototyping. The feature’s success at Adobe MAX 2021 validated our approach and continues to shape how designers bring their most dynamic visions to life.
Understanding the problem
From December 2020 to August 2021, our team set out to tackle a growing challenge for Adobe XD users: incorporating video into their prototypes without jumping between multiple tools. We listened to over 11k designers who told us they wanted a simple, all-in-one solution to express richer, more interactive ideas. By integrating video playback and controls directly into XD, we not only gave creators the power to seamlessly import, preview, and tweak video assets, but also boosted user engagement and solidified Adobe XD’s position as a leader in expressive prototyping. The feature’s success at Adobe MAX 2021 validated our approach and continues to shape how designers bring their most dynamic visions to life.
Competitive analysis
Comparison landscape: no all-in-one tool provides feature and other offerings aren’t simple enough for creation at the speed of thought.
UserVoice responses
Over 11k users expressed demand for the inclusion of video assets within XD. Our interactions with users also revealed their struggles to prototype more complex interactions within XD. It became clear that their was a need for features that allowed more expressive prototyping.
User surveys
Comparison landscape: no all-in-one tool provides feature and other offerings aren’t simple enough for creation at the speed of thought.
Designers told us they wanted a more seamless way to bring motion and videos into their Adobe XD prototypes, without juggling multiple tools or compromising on fidelity. By integrating video functionality directly into XD, we identified a unique opportunity to empower creators to produce richer, more interactive experiences. Prototyping with video files would help our users communicate their visions more effectively but also position XD as the go-to platform for truly expressive prototyping.
Based on our understanding of the issue, we identified two primary goals for our initiative.
Limited → Expressive
The offering should empower designers to explore richer, more dynamic storytelling by integrating video playback and controls directly into Adobe XD, removing the need for external tools.
Fragmented → Unified
Streamline the prototyping workflow by creating a single, intuitive space for all media by ensuring designers can seamlessly import, preview, and edit video assets without leaving XD.
Designing a video prototyping tool
Our initial approach was to utilize the existing XD property inspector UI and have playback occur on artboards. Unfortunately, once we began socializing our designs with our cross functional partners three primary issues came to the fore: complexity, technical debt, and conflicts with our release timeline.
Complexity
Repurposing the existing UI for video editing introduced complexities: the panel had to adapt dynamically based on selected design elements, but the underlying architecture wasn’t designed for responsive, media-rich interactions.
Tech debt
We also learned that there was existing technical debt that would directly be impacted with our initial design direction.
Timeline conflicts
The existing underlying architecture of XD wasn’t designed for media-rich interactions and this created a significant risk to meeting our Adobe annual conference deadline.
The impact of our work
We released the feature at the 2021 Adobe MAX Conference to much enthusiasm from our users, which increased the usage of prototyping mode from 44% to 50% in the first few months post release. The new HUD design was incorporated into the org's design system and leveraged for additional new media types (i.e., Lottie files.) Additionally, we were able to reach an 80+% video import success rate despite the technical constraints on file size and type. In the video below, Howard Pinsky (Senior Design Evangelist at Adobe) walks through how to prototype using the feature.
Thank you for reviewing this project.
Find more below.
