This Week's Sponsor:

Kolide

Ensure that if a device isn’t secure it can’t access your apps.  It’s Device Trust for Okta.


An Interview with Khoi Vinh, Principal Designer at Adobe

Earlier this week I had the opportunity to sit down with Khoi Vinh, Principal Designer at Adobe who leads its Design Practices group and author of Subtraction.com. Vinh, who was in Chicago to speak at the HOW Design Live conference, talks about how Adobe is using Adobe XD to integrate UX and UI design and prototyping into the product creation process for everyone from freelancers to big companies. He also discusses designers’ role in addressing the problems social media is facing, how artificial intelligence is beginning to play a role in design, and his podcast, Wireframe.

(The following has been condensed and edited for readability.)

Tell me a little bit about what you’re working on at Adobe these days.

Adobe XD is one of the main priorities at Adobe. We’re really passionate about the experience design space; really passionate about how product designers, UX/UI designers, they’re really kind of leading the way for how professional creativity is changing and XD is more than just an app, it’s a platform to help us build what designers need. So we see it as more than just a design app. It’s also prototyping and sharing, and so it’s really meant to help designers, and also the people who work with them, get more value out of the design process and be more productive in general.

How does it work with the code side of things when the designers pass things off to the programmers?

That’s an area that we’re really interested in. So, you can design something in Adobe XD in the drawing mode, which is roughly analogous to what you’re able to do in Illustrator or Photoshop in terms of determining what an interface looks like and creating all the artboards. And then you can bring it to life with a prototype, and you can share it with the marketing team or with other designers by sharing a web prototype.

We also have developer specs, which is basically a way of letting a developer take a look at what you’ve created, see all of the colors, the type, the spacing, everything, and that’s going to get more and more sophisticated, more and more rich over time, so that the developer handoff is really smooth. What we want is for design to flow as elegantly as possible throughout the whole team and also to help maintain the integrity of the designer’s vision, their intention, all the way through.

I know you’ve done a lot with things like the animations and the prototyping phase. What kinds of things have you been able to implement there?

Auto-Animate, that’s what we call that feature. We really believe that prototyping is a very critical leverage point for designers, in not just the whole design process, but in the way they work with clients, with stakeholders, with their in-house team, with all the rest of the business. And the reason is that prototypes get you very close to something that’s real without actually committing you to code, so that you’re not afraid to throw things away.

The way we conceive of prototypes – by intention, by design – they are not meant to be the actual code. We may get to a point one day soon where you’re designing right to code, but for right now we really think that to help people get an idea out of their head and into a clickable, tangible, movable version is really important because it changes the conversation. It brings clarity to the whole team. It brings clarity for the designer as well because now they can see how practical their idea is.

So, that’s a long way of saying animation is a really, really elemental part of that because once you see something moving, it becomes more than just an idea, it becomes something that just feels like it’s just a few inches away from reality. And that gets people to pay attention. And so, when we thought about how to implement an animation, there are tons of great animation tools out there that let you do very, very sophisticated animation. What we tried to do is think of a way to let you create sophisticated animations with as shallow a learning curve as possible.

So, Auto-Animate is based on a very simple sort of keyframe approach where you have one artboard where a circle might be the top of the screen and one artboard where a circle might be the bottom, and if you link them up as a prototype, it will actually move from one position to the other, like tweening from the old Flash days or something like that. And that’s something that everybody gets the first time they see it, they say, ‘Okay, I can do that.’

I think that is a really important part of our approach to it because you can get a lot more sophistication, and we’ll enable more sophistication later, but the challenge of mastering a complex interface, like a timeline interface or a scripting interface, can be very off-putting. So we want as many people as possible experimenting with animation creating richer and richer prototypes, and I think we’ve opened up the door to lots of folks. So we’ve seen people create some amazing stuff with this simple concept. The thing above all is that it’s super fun. You’re not wrestling with really complex user interface conventions, you’re just moving stuff around and doing it the way a designer thinks, which is usually visually.

It reminds me a lot of how Apple’s Keynote works because it does the same kind of keyframe stuff.

Well, Keynote is one of many inspirations. It’s purpose-built for presentations. It’s very visually oriented. It’s super easy to learn. All of the metaphors are consistent. There’s a high degree of visual integrity there. We like that model for sure.

So what’s your focus? Is it on custom UIs? Is it on the existing standard set of controls?

We focus on everything that comes under the umbrella of user experience design, which, roughly speaking just means that you’re thinking about the sum total experience for the end user; how to get from screen to screen and then what the interface looks like and what the interactions are and how information can be found and so forth. So, roughly speaking, yeah, it would be for the custom designer, for the designer who’s creating something bespoke for their company or their clients or customers.

But we’ve also invested a lot of money in putting a ton of UI kits out there for iOS, for Android, for all different kinds of things, so that people can get up and running really quickly, and can access them right from within the app. So if you’re not a “trained designer,” you can actually put things together really easily. And we see that in a lot of companies where XD, because it’s so approachable, people outside the design team will start using it in order to create mockups – create quick prototypes – to get ideas.

What platforms is XD on?

Windows and Mac. I should also say that we have two companion apps for iOS and for Android as well.

How do you approach those two products differently?

We try to create a consistent experience while also trying to be true to each platform. We don’t want to create a compromise between them that’s not satisfactory for Windows users or satisfactory for Mac users. So our designers spend a lot of time on both platforms and are very cognizant of what makes each platform unique or what its strengths are and how to respect that for each user.

And also, being truly cross-platform and being good citizens of both is a huge part of our strategy because a lot of other computing tools don’t offer that, especially for Windows users, because so much of the design community is on Mac. For Windows users to be able to use XD and get virtually the same experience and to be able to collaborate with their design studio they hire, which is maybe on Mac, or the design team, that actually makes a huge difference because now they’re going to be speaking the same language – that’s really important.

So is the product geared towards someone who’s working as a designer in a company? Or is it something that individuals like a solo indie developer might want to use as well?

We think user experience design is a profession that runs the gamut. So it’s individuals, small teams, independent studios, small, medium, and large-sized agencies. In-house teams are also small, medium, and large, and their needs are different, but the basic tools that are required to get your job done are roughly similar enough that we believe a solution like XD can be inclusive of everybody.

So if you are an independent designer working on your own, XD is terrific. If you are on any kind of a team, the collaboration features really smooth the workflow. And if you work at a big company with a big design team with super sophisticated requirements, we have a plug-in infrastructure for you to be able to tailor your workflow to build tools that are specific to your company’s needs. We really like the idea that it can scale.

Adobe has been offering subscriptions far longer than we’ve seen on platforms like Apple’s App Store. Do you ever worry that having a subscription leaves certain people behind? Adobe does a great job with students, making products available to them at a price that they can afford, and it works well for companies of various sizes, but what about the person who comes right out of school and maybe is just trying to do work on a portfolio on their own?

So first of all, Adobe XD is free to start, so you can actually create as many files as you want, and work for as long as you want in XD. When you start sharing projects online and collaborating with other people, that’s when we hope you will become a Creative Cloud member.

But the subscription model in general we believe actually gives more people the opportunity to try the app. And our subscriber numbers, which I can’t quote off the top my head, but they’ve just been growing and growing, we have more and more people coming into the Creative Cloud world than ever before. And part of the reason is an enormous amount of investment goes into each release of these apps we’ve got. The apps are cross-platform, they’re internationalized, they go through a heavy QA. We spend a lot of time thinking about how apps work for enterprise and for individuals. So, it’s a huge investment.

Now, in the pre-subscription world, when we were selling perpetual licenses, we had to basically charge for the complete value of all that. With the subscription model, you can pay for a month, or you can pay for 24 months, you can sign on and sign off. And actually many small companies take advantage of that because they have freelancers come in and work for six or eight weeks, and then they leave and turn off the subscription. So that’s really helpful.

And what it does is it allows people to pay for the value that makes sense for them. So if they are going to work on a six-month contract or something, they want to pay for six months. Well, that’s actually a one-to-one mapping of the value that they get for those six months. If they are engaging in projects continually and collaborate with lots of people, then they’re paying each month, and they’re getting every single update for the app that they’re subscribed to. And, if they’re subscribed to all updates, they also get many of the new products that we create just added to the bundle. So the value equation is very different from perpetual licensing, but we believe it’s more accessible for more people in general and makes sense for more businesses.

What do you think about Marzipan coming to Apple’s platform? Any thoughts on where we’re going? Because it’s going to be really interesting from a design perspective. Some of those early Marzipan apps in Mojave are pretty rough right now.

Well, I should say that I don’t know anything more about Marzipan than I read on MacStories. I personally haven’t been disclosed on anything from Apple. I do agree that some of the apps are lacking in terms of their Mac-ness. And as a very, very long-time Mac user, that makes me a little bit sad, because I really like all of the beautiful details the true Mac has.

On the other hand, I’m excited for a world where these platforms come closer together. I think making it easier for developers to create apps that work on phone, tablet, and desktop is super exciting. And for any new frontier like that, it’s not uncommon for things to be a little bit rough in the beginning, like the early days of Mac OS X.

In one of the interviews I saw with you from a while back, you talked a little bit about AI and machine learning and how that plays into design. Tell me a little bit about where you see that going.

I think right now, it’s still the Wild Wild West. There’s a lot of enthusiasm around AI in terms of the end-user experience and how to make great experiences with immersive technology for consumers and for business users.

We are really excited about the opportunity to make things better and remove friction and tedium for professional users as well. So there are things that designers do every day and have been doing forever that are second nature that you don’t think about – like lining things up or wiring an artboard together or drawing a home icon and then linking that to the home screen. These are things that a computer can do just as easily or at least suggest to you. So to remove the tedium of doing that work and letting you focus just on what only a designer can do.

We have this AI platform called Sensei, which takes a ton of anonymized data from millions of users to help us figure out what are the best practices for doing certain things that we’ve implemented on the Photoshop side or on the digital imaging side in terms of helping people with presets for manipulating photos and so forth. I’m actually not super in the weeds on those details, but I know they’re doing a lot there. As we’re building the foundation for XD, we’re looking to bring that kind of stuff to it as well.

What role do you think designers can play in fixing some of the problems that we’re seeing with social media? Is there a role for designers working on making that a better experience for people?

Absolutely. This is part of my talk tomorrow actually. In many ways we’re in this situation partly because of design; because design has sort of abetted the sort of unbridled ambitions that people love to optimize for on these platforms – you know, eyeballs, clicks, views, likes, and so forth. And it’s been really effective at doing that.

So when you think about all these problems, they’re not just technology problems, right? They’re not just a matter of the algorithm. You’re thinking about the sum total user experience, and design can’t solve them on their own, but I really believe that design needs to be a key part of that conversation.

The responsibility of the designer in crafting solutions is to think about the total experience of the user or the customer. Like what is the effect on that customer of seeing only confirmation bias-oriented content in their feed? Or we’re only pushing them to come back, again and again, to view the same thing over and over again at the expense of other activities in their lives. I think design and the approach that designers bring to research and the whole user journey, so to speak, is a very valuable tool there.

So part of the challenge is that the world at large doesn’t see design in that light necessarily. First of all, the world doesn’t really understand design. They sort of assume it’s all technology. So I think part of our challenge is to try to level up the conversation around design to help people understand it, and appreciate what it can bring, and then be proactive in trying to figure out how to solve this problem.

Tell me a little bit about your podcast.

It’s called Wireframe. We do it in partnership with Gimlet who are based in Brooklyn, New York, conveniently where I live.

The hook is to tell high-quality, in-depth stories about design, and to treat design in the way that you might hear stories about architecture or technology or art or culture, like on the radio. Our attitude is design traditionally hasn’t been treated that way. Most of what gets written about design is written by designers for designers. There are tons of great design podcasts out there, and I don’t want to take anything away from them, but they’re almost all just interview format, and so it really feels like you’re dropping in on shop talk, right?

What we tried to do is tell a complete story about design. Our first episode was about the Hawaii missile crisis and how that warning system was flawed in terms of design. We try to show how design led to the situation and how it can be part of the solution. We try to take you into the mind of a designer, but in a narrative way. It’s not just interviews, it’s actually a story start to finish that, hopefully, pulls you in.

And what we found is that it’s been surprisingly popular with people who don’t call themselves designers. They get pulled in and start to see design as something tangible that they can relate to. And at the same time, it’s actually been really fun for people who know design already, because they’re not accustomed to seeing design, or hearing design I should say, treated in this manner.

Unlock More with Club MacStories

Founded in 2015, Club MacStories has delivered exclusive content every week for over six years.

In that time, members have enjoyed nearly 400 weekly and monthly newsletters packed with more of your favorite MacStories writing as well as Club-only podcasts, eBooks, discounts on apps, icons, and services. Join today, and you’ll get everything new that we publish every week, plus access to our entire archive of back issues and downloadable perks.

The Club expanded in 2021 with Club MacStories+ and Club Premier. Club MacStories+ members enjoy even more exclusive stories, a vibrant Discord community, a rotating roster of app discounts, and more. And, with Club Premier, you get everything we offer at every Club level plus an extended, ad-free version of our podcast AppStories that is delivered early each week in high-bitrate audio.

Choose the Club plan that’s right for you:

  • Club MacStories: Weekly and monthly newsletters via email and the web that are brimming with app collections, tips, automation workflows, longform writing, a Club-only podcast, periodic giveaways, and more;
  • Club MacStories+: Everything that Club MacStories offers, plus exclusive content like Federico’s Automation Academy and John’s Macintosh Desktop Experience, a powerful web app for searching and exploring over 6 years of content and creating custom RSS feeds of Club content, an active Discord community, and a rotating collection of discounts, and more;
  • Club Premier: Everything in from our other plans and AppStories+, an extended version of our flagship podcast that’s delivered early, ad-free, and in high-bitrate audio.