Adobe XD CC: Streamlining User Experience Design
The productivity impact of integrating Adobe XD into the UX development workflow.
About this research
This report presents the findings of a market-specific benchmarking project conducted by Pfeiffer Consulting for Adobe. The main aim of the research was to document the efficiency and productivity gains linked to Adobe XD (version 188.8.131.52), compared to other methods of producing comparable results, such as using graphic design or imaging software. Benchmarks looked at the complete user experience design workflow, from wireframing to prototyping, and commenting.
Benchmarks were executed using Pfeiffer Consulting’s Methodology for Productivity Benchmarking, which has been fine-tuned over more than a decade and measures the time experienced operators take to execute specific tasks. Please refer to the Methodology section for more information.
About Adobe XD
Adobe XD is a recent addition to the growing list of Creative Cloud apps and services. Adobe XD helps user experience designers to rapidly create and iterate the design for mobile apps and websites. The program allows for the creation of complex interactive prototypes, offers device preview and online revision of a prototype, and is integrated with Creative Cloud apps through CC Libraries support.
This can speed up the user experience design process significantly, as these benchmarks document. On average, based on 264 individual benchmarks, using Adobe XD instead of conventional methods of achieving comparable results was almost three times faster.
- This document presents the results of a benchmarking and technology analysis research project comparing Adobe XD with prototyping operations using graphics applications such as Photoshop CC and Illustrator CC.
- In benchmarks covering several frequent prototyping workflow situations, Adobe XD was on average almost three times faster than other methods.
- Adobe XD offered a close to 10x productivity increase in some of the common workflow situations that were benchmarked.
- Creative Cloud Libraries are essential for bringing in existing content. This allows designs created in Photoshop CC and Illustrator CC to be updated even at very late stages of the UX development project.
Average of 12 workflow benchmarks. Shorter is better.
Chart based on the average of 12 different workflow scenarios per solution. A total of 264 individual benchmark measures were taken.
Reference value: Average time when working with conventional methods. Shorter is better.
Eliminating bottlenecks in user experience design.
The complexities of user experience design.
To say that user experience design (or UX design for short) is a complex field is an understatement. Here we have a thriving area of human creativity that barely existed a decade ago, yet has engendered some of the most complex and multi-leveled workflows existing today.
The inherent complexity of UX design resides in the fact that it needs to combine efficiency and excellence on several distinct levels. On the visual side, the most sophisticated tools are required, yet they need to be tied into a structural organization that facilitates swift iteration, easy adaptation of a design to different devices and platforms, as well as the possibility to simply inject interactivity into a prototype that can be tested and validated with potential users.
From creative concept to clickable prototype.
Several clearly defined phases are involved in bringing an app project into existence. After the ideation phase, the next step is often a rapidly sketched paper prototype outlining the basic architecture and interactions. Then follows the phase of the wireframe prototype that uses neutral placeholders for all screens and design elements of the app. Once this is completed and validated, the designer replaces these structural elements with the actual designs and creates a high fidelity (HiFi) prototype, if possible with the necessary interactive elements that can be tested directly on the targeted device.
Create wireframe for mobile app.
Developing the initial wireframe for an app consists of creating an artboard for each required screen and placing user interface components through simple neutral design elements, which are later replaced with the actual designs.
While the basic operations for creating a wireframe are similar in graphics applications and in Adobe XD, the prototyping tool has a clear productivity advantage based on its simplified organizational and design features, such as easy artboard presets, repeat grid, smarter alignment and snapping, which all contribute to a faster design process.
In other words, UX design tools need to integrate as tightly as possible with the core applications for creative work, most notably Photoshop CC and Illustrator CC, indispensable for their highly sophisticated creative possibilities. But while those applications have robust support for multiple artboards, layers and device presets, they tend to fall short in terms of prototyping functionality. That’s where Adobe XD comes in, by allowing designers to complement the work they do best in the creative app of their choice with a toolset that aims at speeding up some of the most time-consuming aspects of app development, namely the transformation of wireframes into HiFi prototypes, the iteration of repetitive design elements, the injection of interactivity, as well as device preview and hand-off to developers.
CC Libraries allows the UX designer to place elements from CC apps directly into a prototype, ensuring that they will be automatically updated when changes to the design are required. In addition, designers can choose at what point a project created in Photoshop will be handed off to take advantage of Adobe XD, since the program can directly import complete Photoshop projects, retaining the complete layering structure of the Photoshop file.
- UX design is a highly complex domain that needs to combine efficiency and excellence on many different levels.
- The ability to transform a wireframe into a HiFi prototype quickly is essential.
- Benchmarks show that Adobe XD’s UX-centric tools provide an up to 10x productivity increase by providing features such as Repeat Grid and pasting appearance of an object.
- Integrating feedback and sharing of design specs speed up the development process significantly.
- The Design Specs feature provided by Adobe XD significantly speeds up the process of handing off detailed design specifications to a developer.
KEY BENCHMARK RESULTS
Create and populate multiple instances of a contact card.
Populating design elements. We benchmarked the time necessary to create five replicas of a contact card in an app and to populate them with photos of each person, their name and their function.
Adobe XD’s Repeat Grid feature, which allows for automatic placement of multiple pictures and texts in repeated elements, was almost ten times faster in this operation then achieving the same result in a graphic application.
KEY BENCHMARK RESULTS
Apply predeﬁned styling to three placeholder objects.
From LoFi to HiFi prototype. Replacing the neutral design elements of a wireframe with the final designs can be time-consuming. We benchmarked the time necessary to replace three placeholders with fully-designed elements. Using the Assets panel in Adobe XD, you can apply color and type formatting to placeholder objects, giving the program an almost 10x productivity advantage in this operation.
KEY BENCHMARK RESULTS
Extract and share HEX color values with a developer.
Developer handoff. Sharing precise design specifications with a developer is an essential part of the prototyping process. Adobe XD can share details of a design such as color values and character styles in different formats. It also allows developers to access measurements for objects on demand and copy text content in a single click. This gives the program a significant productivity advantage over achieving the same goals using a graphics application.
Speeding up the UX workflow.
The crucial phase of prototyping.
The efficiency of UX design hinges on the most important aspect of prototyping, namely the capacity to turn a static design into a functional version of the future app. Being able to visualize how it will look is important; but testing how it will actually work and how users respond to the app before the heavy lifting of actual code development begins is essential to avoid unnecessary costs and delays.
In other words, whatever tool is used to shape the appearance of an app, at one point along the line the stakeholders behind the project will need to see how it works and be able to collect user feedback. UX designers around the world use all kinds of methods to achieve that goal: some resort to HTML, others rely on presentation programs. But increasingly, dedicated UX design tools are being used to turn the dozens or hundreds of artboards into interactive prototypes.
Iteration and integration.
Prototyping workflows are particular in one respect: they require frequent iterations on a large number of similar or connected design elements. Visual coherence is key, and any change made to even minor aspects of a design, such as the modification of a color, stroke width or type-style, will need to ripple through dozens or hundreds of artboards. In other words, iteration is one of the major bottlenecks in prototyping. Adobe XD speeds up this process significantly through symbols which instantly reflect the application of changes across multiple artboards.
KEY BENCHMARK RESULTS
Create/document interactions based on flowchart.
This benchmark compares the time to inject interactivity into an Adobe XD prototype with the time necessary to indicate the required interactions using an app designed entirely in Photoshop. In both cases, we used the flowchart underlying the app as a basis.
(While these operations are not directly comparable, they both constitute an indispensable step when moving a prototype into the development stage.)
Adobe XD and CC Libraries.
One of the key aspects of the integration between Adobe XD and other Creative Cloud applications is the support of CC Libraries. In a nutshell, CC Libraries allows a user to share a variety of design elements—raster and vector images, but also colors and text styles, among many others—that can then be inserted in another CC application. CC Libraries maintains a link between the placed item and the original stored in the library; when the original is updated or modified, changes are immediately applied to all placed copies, unless the user has unlinked the item from its original.
This can increase the efficiency of exchanging data between different CC applications significantly. It is particularly useful in teamwork: CC Libraries can be shared with other members of a team or outside collaborators. This means that a logotype, say, that is created by a designer in London will automatically be updated in the app prototype that is created in California.
As far as Adobe XD is concerned, CC Libraries is the backbone of integration with Photoshop and Illustrator, allowing elaborate graphics to remain in their native environment and to be sure that any change to them is immediately applied across all artboards of a prototype.
Building the ideal UX design workflow.
What sets Adobe XD apart from other prototyping solutions is its integration with Creative Cloud. This allows for a workflow that combines the immense creative possibilities of Photoshop and Illustrator (among others) with tools and management features that are developed from the ground up with the necessities of UX design in mind.
This means that for the first time, UX designers have the possibility of integrating those different feature-sets in a way that can make the prototyping workflow significantly more efficient, as these benchmarks show. The core question is, of course: what is the most efficient way of combining these programs? Thanks to CC Libraries, it is possible to use the creative design tools to their full capabilities, without losing the possibility to change key design elements even at a late stage of the prototyping process. Such a design modification could even occur in the middle of a user testing session of an interactive prototype.
Finally, there is the question of developer hand-off. Adobe XD’s Design Specs feature provides developers on-demand access to measurements, color values and even cut and paste of texts through an online interface.
In other words, Adobe’s new application clearly does not aim to replace Photoshop or Illustrator, but to complement them with a toolset and workflow integration that can boost efficiency when dealing with the many intricacies of modern user experience development.
- In order to be efficient, prototyping workflows need to support iterating a large number of similar design objects. Adobe XD supports this workflow with Symbols, without requiring individual intervention for each instance of a design.
- Since design changes can occur even at very late stages of prototype development, tight integration with Photoshop CC and Illustrator CC is essential.
- The support of CC Libraries allows Adobe XD to integrate design changes as late as during the device preview phase.
- Combination of the UX-centric toolset and management features provided by Adobe XD with the graphic excellence of Photoshop and Illustrator is key to building an optimized prototyping workflow.
Optimizing the prototyping workflow.
|Adobe XD CC||Standard design work
Photoshop CC, Illustrator CC
|Third-party UX solutions|
|Testing & validation||
|Organization and finding photos||
Setting up the right UX design workflow can be complicated. While many designers start with the graphics application they feel most familiar with, it is usually necessary to switch to a dedicated prototyping tool at one point. While many specialized apps and services exist, Adobe XD offers the tightest integration with Photoshop and Illustrator through CC Libraries.
This benchmark project was commissioned by Adobe and independently executed by Pfeiffer Consulting.
All the productivity measures presented in this document are based on real-world workflow examples, designed and executed by professionals with many years of experience with the programs and workflows involved.
How we design the benchmarks
The basic approach is simple: in order to assess productivity gains that a program or solution may (or may not) bring, we start by analyzing the minimum number of steps necessary to achieve a given result in each of the applications or workflows that have to be compared.
Once this list of actions has been clearly established, we start to execute the operation or workflow in each solution, with the help of seasoned professionals who have long-standing experience in the field and with the solutions that are tested.
Every set of steps is executed three times, the average of the three measures is used.
About Pfeiffer Consulting
Pfeiffer Consulting is an independent technology research institute and benchmarking operation focused on the needs of publishing, digital content production, and new media professionals.
For more information, please contact firstname.lastname@example.org
All texts and illustrations © Pfeiffer Consulting 2018. Reproduction prohibited without previous written approval. For further information, please contact email@example.com.
The data presented in this report are evaluations and generic simulations and are communicated for informational purposes only. The information is not intended to provide, nor can it replace specific productivity research and calculations of existing companies or workflow situations. Pfeiffer Consulting declines any responsibility for the use or course of action undertaken on the basis of any information, advice or recommendation contained in this report, and can not be held responsible for purchase, equipment and investment or any other decisions and undertakings based on the data provided in this report or any associated document.
Adobe, the Adobe logo, Creative Cloud, Illustrator and Photoshop are either registered trade-marks or trademarks of Adobe Systems Incorporated in the United States and/or other countries. All other trademarks are the property of their respective owners.