Design ‘Appception.’ How Adobe’s Designers Are Using XD to Design XD

by Patrick Faller

posted on 02-16-2018

When it comes to creating apps iteratively, nothing beats being able to design new features, tweak existing ones, and be able to test them out right away, not to mention share those designs with stakeholders easily. That sums up the core tenets of Adobe XD, an all-in-one UX/UI tool.

For Adobe XD’s design team, switching between multiple tools to create the app was getting frustrating. The team decided to take the plunge, and they began using Adobe XD to design Adobe XD.

Early Days, Early Innovations and Challenges

As he was designing Adobe XD, Lead Product Designer Talin Wadsworth turned to his own app and quickly realized, even in its rudimentary phases, Adobe XD allowed him to quickly iterate and share design ideas with his team.

“We were trying to create an experience that felt real, that people could really get excited about. Rather than having to create static comps and then waiting for those to be prototyped by an engineer, we were able to have something that you can wrap your head around what the experience should be, sooner,” he said.

Talin Wadsworth, Lead Product Designer of Adobe XD

That also came with unique challenges, especially in the beginning. Simple features, like text tools and styling options that are so commonplace in Adobe’s software tools, simply weren’t there yet.

“All those things you take for granted were just missing in those early days. But even with the challenges of missing some of those basics, those first prototypes really showed how much value there was,” Wadsworth said. In Fall 2015, before the design team launched Adobe XD’s beta, Wadsworth began using his own tool to design it full-time. His team member followed suit, laying the tracks for the many iterations of the app that followed.

The Adobe XD Design Process

Wadsworth gradually introduced his team to a new workflow: use Adobe XD to iterate on Adobe XD’s current build. It was a natural transition for Senior Experience Designer Larz Hsu. He and the design team start almost every morning working with Adobe XD features from the latest master branch on Git.

When they’re building new features, XD’s designers take the elements they need from the master design file, which has all the super components and patterns, and begin iterating. The team has a dedicated Slack workspace for Adobe XD feedback.

“Because it feels effortless, we would often tweak our designs during design reviews based on the feedback we’re getting in real time. Because we use it every day, we know what works and what doesn’t,” he said.

For Adobe Principal Designer Khoi Vinh, watching the team easily collaborate on a daily basis, using the app’s features, has been incredible, and he feels, ultimately, users will benefit from their design process.

“There’s probably not more than a few dozen designers ever who got to work on the tool that they use every single day. That’s a special opportunity and also a big responsibility because in some ways it determines how many, many more designers will spend their workdays. The team took that incredibly seriously from the beginning — and they still do,” he said.

Adobe’s Senior Director of Experience Design, Jamie Myrold, and Principal Designer Khoi Vinh dive into the prototyping power of Adobe XD at Adobe MAX 2017

The Challenge of Working in Multiple Builds at Once

The one downside of using Adobe XD to design new features in Adobe XD is that many of the designers are working in multiple builds of the app at the same time. Talin Wadsworth has several Adobe XD icons sitting in the dock of his computer, and it’s not uncommon to see him running three or four builds of the app simultaneously, with different features and capabilities.

“Often times we’ll have Adobe XD open and we’ll have the file that has the UI for XD open that we’re working on for some new feature. Then we’ll be previewing the prototype of the UI of the design file of the app,” he said.

“It’s very inception-like. You start to wonder what’s the real toolbar, what’s the real UI.”

Members of the Adobe XD design team hard at work

Wadsworth feels that confusion was a small price to pay for how easy the app has made iteration. He said it’s easy to “just keep going” with your designs, thanks to time saved with early testing and feedback-gathering.

Design Insights from The Adobe XD Process

Working this way allowed the Adobe XD team to mimic the experiences of their designer users, who are looking to work as quickly and efficiently as possible. Talin Wadsworth said two key points emerged from this process; principles that every app designer should keep in mind to create the best possible experiences for their users:

“Looking back on it, I feel very proud that we’ve been able to launch XD at Adobe, using the app itself, and I feel very proud of this team.”

To learn more about how Adobe XD is shaping the future of UX/UI design, visit its website, and to comment on features and request new ones, head over to Adobe XD User Voice. For UX insights sent straight to your inbox, sign up for Adobe’s experience design newsletter.

Topics: Creativity, Design

Products: Creative Cloud