Adobe Video Prototyping

Overview

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.

My role

Lead designer
Prototyper
Design systems

Platforms

Desktop web

Year

2020-2021

Understanding the problem

Based on user research and customer feature requests, the team discovered an unmet need in the prototyping tools market. Designers were unable to fully express their design intentions for hi-fidelity prototypes accurately and simply while using Adobe XD.

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

I collaborated with our research team to create and distribute a survey to understand designers’ current usage patterns designing with video and their expectations from a design tool.

How might we expand the expressive potential of designers by incorporating dynamic media into the creative process?

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.

After identifying the technical constraints we went back to the drawing board, and I took the lead in setting the new direction for the product. Since we couldn't utilize the existing property inspector, I came up with a novel approach to utilize the form factor of XD's color picker and combine the elements from our initial video editor design to create a HUD player.

After socializing our new direction and working closely with our engineering teammates, we were able to determine the logic and design we could commit to build to meet our business and timeline goals. The final designs also went through multiple design reviews and our design had some innovations that were approved and ingested by Adobe's team managing the company's design system Spectrum.

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.

Empowering designers to create more dynamic prototypes and immersive design experiences