Motion Design: Help Wanted

Bhakti Patel at UXDX Community: Motion Design and Physical to Digital. Video: https://youtu.be/Q468XTo3N48

Readable transcript: edited from the recording's captions for readability (fillers and false starts removed, punctuation and section headings added). Wording is the speaker's own. Timestamps are positions in the video. Names marked [?] could not be verified against the audio.

Background, and why motion

[00:00:00] Hi everyone. I appreciate everyone joining, and I want to thank UXDX for having me. I wanted to chat to you guys specifically about motion and product: why motion, how do you get started, how to approach it as a company or a team or an individual, and what it can actually do for your career.

[00:00:17] A little bit of background, a little bit about me. I come from a motion design background, not a product background. For years I freelanced and contracted at agencies and studios and have worked with all these companies and brands. Most notably, I animated the UI in the movie Black Panther and in Thor: Ragnarok. Not really UI, but their fake spaceship futuristic kind of UI. And that was actually my first time animating UI in general.

[00:00:44] In general though, I would animate in my freelance work for the brand, not exactly the product. But that all started to change when I started going full-time at all of these places. Specifically at Dropbox and Twitter, I served as the motion design lead. And because I'm slightly afraid of the current owner of Twitter, I'm only going to show you guys work from Dropbox and we'll just pretend the other one isn't there for now.

[00:01:10] But why motion? Why is it so important to have it in product, or to start to develop the skill and bring it to your team and your company? Well, the reality is motion is absolutely necessary. It shouldn't be an afterthought in product, but unfortunately, unless you're doing a complete rebrand, it often is an afterthought.

[00:01:29] It's a tool just like color and type and buttons and modals. It's part of the design system and it's all-encompassing. A decision around motion is needed for everything, because motion added to anything can completely and entirely change the meaning or intent of the design. It can change the perception of loading by making things feel faster. It can help orient you in a product. It's shown to increase engagement and interactivity. You can change the perception of a brand by making it feel a lot more modern. So it's a useful tool that isn't just for fun.

[00:02:08] And I do want to be clear when I'm talking about motion. This type of motion is never okay. When you do this kind of motion in product, it ruins it for everyone. And the funny thing is, when I did that fireworks animation, I realized I actually have done a firework animation in product. But this is probably the only circumstance where it could be okay. And that's because I had a really good reason for it, which was: after you check off an entire list on your to-do, you have this little feel-good kind of moment in product. So it was an emotional way to use it. But that might be the only time you can ever use fireworks in animation for product.

What your role in motion looks like

[00:02:52] Getting started. What does it mean? What's your role in motion when it comes to the product? Chances are you're probably not a motion designer, and that's completely okay. But if you want to push for motion design at your place or pick it up as a skill, you need to understand what your role might look like, or the best way that you can work with a motion designer.

[00:03:14] What that means is, if you're in design systems or product, then you might be the key decision-maker or the driver for that work. If you're in engineering, it means that you're generally the bottleneck, but we'll get into a little bit more about how you can make sure that motion can be pushed forward through engineering. Then there's research and accessibility. These guys should be constantly consulted on whether or not what they're creating, or what's being animated, works for the users. Or if you're on the motion and brand team, this is a little bit tricky, so we'll get into it in a second.

[00:03:51] But if you're in design systems and product, your questions on the team, or the problems you're trying to solve, are: where does motion live, how does it work as a system, what problems can it solve, and how do you get started? You guys are generally the driver for all that work. Engineers are looking at what tools can be implemented, what's the end cost — as in, if you add in an animation here, is it going to slow down the product in any way? That's the question that engineers will need to answer. And then how do you tokenize it or document it? That's generally a collaboration with design systems and product, as well as the motion designer.

[00:04:26] And then there's research and accessibility. What benefit does motion have to the customers itself, and how do you make it widely accessible? Motion around accessibility isn't talked about enough, and that's because the research isn't really there. So this is something that I'm hoping that, as people get more and more into motion, it gets pushed to have more accessibility for motion research done.

[00:04:48] And then the motion and brand team. The reason why this is a little bit of a tricky one is that while it is the same medium of motion, the purpose is completely different. How does product motion live and work with the rest of the brand motion, where's that overlap, and then where do they actually break apart? I think the most important thing is that motion has to have a purpose in product. It cannot be for fun, it cannot be just for the sake of the brand. It has to have some sort of a purpose. I think that's really, really key, and something that shouldn't get overlooked. And that's where I think that collaboration might be a little tricky. You don't want to get too much collaboration from brand on these things, but you still do need it.

Where to start: the audit

[00:05:37] So where do you start? If you were to try to bring motion into your product, into your team, what's the best place to start? An audit. And I don't mean the IRS kind, but going through every user flow of the product and understanding how a user moves through your app, thinking about those key touchpoints. Where does motion already exist? What tools and teams are currently working with it? What areas can motion be used to solve a problem? Can motion be approached as a whole through design systems? So what really is that best place to start?

[00:06:14] And if you really don't know, my general experience has shown that it tends to be onboarding. It's a really good place to start because it's contained. Not everyone sees it, so if something breaks, it might be a little bit more okay to test there. The other thing as well is that it can be a little bit more expressive, so you can push the boundaries, see how users are reacting to that as well. And it's a really key place that every stakeholder wants to push, which is more and more people to sign on, and motion does create more engagement and interactivity. So there is a good use case for it.

[00:06:55] All right. You figured it out. You understand where you could use motion, what problems it can solve. But what you need to do now is understand the customer as well. For instance, at Dropbox, the customer is very productivity-driven. They just want to go through the product, find their project file, and get out of there as quickly as possible. So their main focus is really speed and orientation. The focus is to get through that product. In this animation right there, you can see you're moving through pretty quickly. When you click on something, it scales open. When you expand or collapse that sidebar, it has a very quick animation. If you use motion in a way to slow things down, every customer will rebel in this case. So that's not really the right way to approach motion for this customer base.

Motion tests, and making friends with engineering

[00:08:01] The next thing you can do is start to do a lot of motion tests. This is where you bring in a motion designer, and what they'll do is animate something hundreds of different ways. These motion tests you're seeing here are from Adventure[?], Willie and Jill[?], who worked with us on these motion tests, so shout out to them. But when I say a hundred different ways, I do mean a hundred different ways. Gunner was a studio that animated this Dropbox logo, and they went every possible way that they could.

[00:08:32] What's nice is it forces you to rethink what the brand can really be, or what motion in the product can actually be: how expressive you can be, how quick and simple you really need to be, when everyone doesn't have a clear picture in their head. This is a really easy way to just get as much out there so you have something to discuss and talk about.

[00:08:59] The one key thing though that I try to recommend is that you always choreograph it. When you're doing your motion test, try as often as possible to animate the whole screen and not individual elements. A user never sees the button just on its own. They always see it in context. So animate it in context. And then, after you start to do all these different motion tests, try to find patterns. What are the things that people are gravitating towards? What feels really good? And see if you can expand those principles out into other parts of your motion tests.

[00:09:35] Now, this is something that, while in this section, is something that you need to do from the beginning, which is make friends with engineering. They really are going to be your best friends throughout this entire process, because they'll keep you in check as to what could be too much, what's going to cost too much. For instance, on the left there you could see a motion test that was something that I just thought looked really cool. It felt really clean and speedy. But it is really difficult to do, and the end cost would just take too much. What we did was something on the right, which still has that same purposeful kind of motion where it has that little bit of position change happening, without being too heavy.

[00:10:25] Engineering's not really there to put a stop to things, while it might feel like that from time to time. Try to understand what the core problem is and work from there. If it's an end cost, let's create something that's a little bit easier to do. If it's that component just can't animate that way because the infrastructure's not built that way — okay, so let's find a temporary solution and then work towards seeing what we can do in the long term that can actually allow some of this other motion to be implemented.

Prototype, research, refine, define

[00:10:56] The other thing as well is prototype it and put it through research. After you get those motion tests, after you have a general idea of what you want to test, maybe try the one that you're really looking forward to, and then a simpler version, and then something a little bit further out. Prototype it and then put it through research. The key to this is honestly really trying to understand or decipher what the users really mean.

[00:11:24] For the previous motion, they said, "I don't know what is different. I can't quite pinpoint it, but the second option just feels better. It felt better." The second option was the one with motion, the first without. And what that indicates to us is that motion doesn't have to be in your face to be appreciated. It can be felt as minimal as it is. So keep that in mind when you're trying to implement motion into the product. You don't have to go that far out. It can really be as simple and purposeful as possible. And then, once you're able to understand that, refine it, expand it, and repeat it. Go through that user research process one more time and see what people are saying.

[00:12:06] And then lastly comes the defining stage. This is where you really, really need to work with your engineers, because sometimes they have a very specific way that they want this motion documented. I've seen so often where it never gets to the defined stage. It gets stuck at, "Okay, here are all the motion tests, this is what we want in the product," and then it doesn't actually get built. And that's because of this particular process. So this is really key. Start early on, work with the engineers, figure out what that documentation might look like later on, so when you get to this stage it's not a complete mystery.

[00:12:43] Sometimes there are certain things that can't be exactly defined. We're at that point exporting like a JSON file, and for that you would use something like Lottie animations, which is a tool that you can use to create code-based animation that engineers can implement a lot easier. It's a lot lighter. Something that I recommend you guys look into if you're really interested: Google Lottie animations. Airbnb developed it, but it's a tool that a lot of big companies are using these days. Once you're able to export it, then you have this nice little file that can replace any GIF. This is perfect for illustrations, icons, and logo animations. For the rest, I would highly recommend just building it in or writing it out in code.

[00:13:33] And the one big thing is that throughout this entire process you're going to hit roadblocks everywhere you go. Honestly, just keep swimming. When you're trying to get motion in for modals or for the snackbar, sometimes that might get delayed. Go back and start doing motion tests and animations on a different part of the product, and slowly just keep everything moving. Don't just wait and get stuck somewhere. Try something else, start animating somewhere else, and slowly it'll start to progress over time.

Lessons on team collaboration

[00:14:08] So that's the general process. But when it comes to all of this, there have been a couple of thoughts from my experience at both of these companies, as motion design lead, and working on motion at the other tech companies as well. The biggest things, the first lessons I've learned, are really on team collaboration.

[00:14:29] The first thing is just make it easy to work with motion. This is really a note to the motion designers who are on your team: create really simple toolkits. Start here, how to customize, export. Super simple things, to make it as easy as possible for anyone to dive in.

[00:14:48] The second is get buy-in from engineering early on. Motion needs to be implemented on a system level. It's not easy for them to do that, and to think that they can just take a piece of code and plug it in and it's all good and it works is not really how that happens. On top of that, they often have a lot of pressure to prioritize other projects or other needs that are a little bit more like it could break the system kind of thing if they don't get to it right now. So you really need to sell the purpose of motion and what it can really do, which is drive user engagement and create a much better experience by having motion in the product. Make sure they're your partners in the process and have that buy-in. Make it a relationship early on.

[00:15:36] And the third is just keep people informed. Like I mentioned, motion is a huge undertaking. It is throughout the entire product. It is in modals and snackbars and the onboarding and buttons and icons and illustrations. It's everywhere that can be in the product. So you can't do it alone. Make sure that everyone is along with you on that process.

What makes an animation meaningful

[00:15:59] The three lessons I learned on what it means to make meaningful animation. This is really key: every motion needs a purpose. Google uses three principles, which are that it has to be informative, focused, or expressive. Every company has a different way of going about it, but it generally tends to fall under these three.

[00:16:20] At Dropbox I focused a little bit more on structural motion, so things that are more orienting you in the space. The second being interactive motion, so the smaller things that feel a little bit more reactive, like clicking on a button and what would happen then. Informative, which is just something to draw your attention to, when an alert comes up or a notification bell kind of ringing. And the fourth was the expressive kind of emotional motion, which is very, very specific and seldom, times where you really want the brand to actually show through. So every motion just needs a purpose in general. There are so many different ways that you can figure that out, but really focus on what works for you and your brand.

[00:17:14] The second lesson I learned was, try to stay problem-solution focused. Understand the problem. It's so easy when you're working on motion and coming through this that you're like, "Okay, here's a problem. Motion can be the solution." But the question you have to ask is, is it actually the right solution? Sometimes motion could be a way to solve it, but it might not be the best, if you just need to redesign it. So keep that in mind. Ask these questions of the right solution, not just a solution.

[00:17:45] And the third thing is that accessibility matters. Motion should be somewhat accessible. For what isn't, you should have a reduced motion setting. So that's just something to keep in mind. Always think about accessibility as you're going through this entire process.

Getting started in product motion

[00:18:05] Some of the things that I really learned when I first started getting into product for motion. Like I mentioned, I came from a brand motion background, which was really quite different. So the first thing I did was just study. I studied Google Material, IBM Carbon, Uber, Compass, all those different motion guidelines and toolkits that were out there, and tried to really understand it: how they went about it, how I would do it differently, what if I were to apply it to a completely different brand, how would I take that. And just really, really study. There are hundreds and hundreds of Medium articles out there that can give you the resources and information on why this is really important, and I highly recommend using that as a place to start.

[00:18:47] Think holistically. Start with a defined space or a defined component: onboarding or the startup screen, something that's a little bit more defined. That way you can actually think about how it can build out into something larger. The last thing you want to do is only define how something moves, like a button in just settings, but then not how it would work everywhere else. So think about confined areas, so that we can approach it on a larger scale.

[00:19:21] And then lastly, don't reinvent the wheel. Again, I'm coming from a motion background, so it's a little bit easier for me to start to think about implementing all this motion and doing all these motion tests, but it's not necessary to get started. There is out-of-the-box motion, which is motion that's OS specific — for instance, Android and iOS have their own motion tokens that engineers can implement a lot more easily. That was a route that we ended up taking at a couple of different clients as well. So that's something to consider.

[00:19:56] And then on implementation: understand tools like Lottie. As I had mentioned, it's a really great way to get illustrations or icons or logos animated without using a GIF. It's a JSON file, engineers are more familiar with this, it keeps things light, and it saves you a lot of time on trying to figure out how to reduce the end cost. The second thing is always just keep testing. Work closely with engineering to understand the metrics and keep refining motion as you go. And then lastly, remember that it takes time. Implementing is something that doesn't happen immediately. It's not that quick, and it can take over a year. So be patient, and stay informed throughout the entire process.

Motion and your career

[00:20:49] And then the last thing I want to leave you guys with is three of my thoughts on what it means to have a career where you add some of that motion UX to it. The first is that motion will eventually become a requirement. You don't need to be an expert in it. You just need to know enough about how to work with it. So pick up a few different skills, start in Figma, move forward, but eventually it will be required. Right now though, it's still an opportunity, which means that it's a way for you to stand out. So getting motion early in your career, starting to think about that right now, can make a huge difference later down the line.

[00:21:35] The second thing is always just start small. I know it's a huge new skill. Animation is quite daunting, but you don't need to learn and animate in After Effects. Leave that for another time. Just start with some basic motion in Figma or ProtoPie.

[00:21:50] And the third is, it will grow. What I mean by that is, motion in product, while it is at the bigger companies and you are seeing it a lot more, is still quite in its infant stages. Maybe at this point a little bit at the toddler level. But in general, prototyping with motion in Figma kind of sucks. Research for motion accessibility is very limited right now. But these are opportunities to contribute to that growth. If you're noticing that prototyping in Figma is that bad, start to build tools for it if you can. Research for motion accessibility is limited right now: be that person in that company that creates that research for motion accessibility. Try to see these as opportunities for your career to really, really expand, to have a place to really own.

[00:22:50] So that's what I really do truly believe are the opportunities here when it comes to your career, when it comes to your company, and everything else. In general, I wanted to leave you guys with some time for questions, but thank you so much. Appreciate it.

Q&A

[00:23:07] Host: Thank you. That was really great graphics and demonstration. I really love the examples of the different motion. I was definitely picking the ones that I thought were my favorite as well when I was looking at your examples. So thanks for sharing this. As Bhakti said, she's open for questions, so please do write in any questions that you have. Oh, and we have one straight here from Chris: I would be interested in hearing if you have ever run into pushback on the time slash money it takes to design motion into a product, and if so, some tips on how to get by it.

[00:23:52] Bhakti: I have run into that everywhere. And the thing is, no matter how far along in the process you are, that problem will still continue to keep coming up. That's why I always mention trying to get engineering bought in early. And I say that from a little bit of experience, and by that, a lot of experience. That's always a bit of a struggle, just trying to get more people's time. Money is often not as much of an issue. It's really time, and getting the resources from everyone. It takes, as I mentioned, an entire team to get everyone on board.

[00:24:31] Some of the biggest ways that I went about it: one, when we ran into the issue with, for instance, engineering saying that implementing Lottie would be really difficult, it's a huge task and stuff like that, what I asked for was, can I get an engineer's time for just two days? If I can just get two days with them to do a really quick test, then if nothing comes of it, we can revisit it, but let's see what we can do in two days. And within two days we were able to really quickly test it. All the resources were there, and we were able to document the entire process of what it would take. And we realized it's actually really easy. So we had something to actually go back to them with and say, "Actually, it is possible. This is why we believe it's possible and why it doesn't take as much time." So that was a really quick way. It's just asking for a little to see how much further you can take it.

[00:25:28] The second thing was, it's really hard with motion in particular because people do think it is something for fun, and that it's just additive. But it's not icing on the cake. It's literally part of the batter. It's like the sugar in it. And cake without sugar is just gross, right? So it is something that is absolutely necessary. And to sell that, you need that user research. That's where you need to bring in customers, or talk to the UX research team from the very beginning. You need to start to look into how this actually solves a problem. Be very, very clear and defined as to what you can provide.

[00:26:12] And if you try to sell it as, "Oh, let's just add something to the toolkit or to the system, this is something that can really make it cool and fun and change the brand perspective," that won't get you as far as saying that this is going to help get users to interact and engage with the product more. Which is completely and entirely true, and that is the real purpose of motion in the product. That this is going to help orient users in the product. Something that's really, really annoying is when you click out of something and you don't know where it went. Or you open something and you forget where it opened out of, and things like that. But a little bit of motion, just that little bit of scaling down when you close something, makes all the difference. Or when something pops up, just that little bit of scale up and then —

[00:27:06] Host: Everything else falling into place.

[00:27:07] Bhakti: Yeah, exactly. And that little bit of motion can help you get oriented in the space a lot faster. It changes that little tiny moment of confusion in the customer's mind into something that's really quick and something that they understand. So motion is insanely purposeful, and lead with that whenever you're going forward.

[00:27:29] Host: Excellent. That's a great one, because that was actually going to be my first question as well, because I know some people who are struggling to get designers on teams, let alone the extra — let's keep it, the struggle.

[00:27:44] And one thing, I love your analogy of informative, focused. Because what really bugs me is when I get to a website and it puts motion in as I'm scrolling, and then if I'm scrolling quickly things haven't arrived because they're doing this kind of reveal thing, and that just bugs me. So what would you say to people who just grab those templates, or do they just start sliding motion in everywhere?

[00:28:13] Bhakti: Yeah. I would honestly start from zero. Show the entire page with zero motion and then see where it's absolutely necessary, and start to think about it. So for instance, when you're in the Dropbox product, you don't want all your files loading one by one. That's going to drive anybody crazy. But maybe when you're on the marketing page, where you want a little bit more of that pizzazz and that kind of stardom, you might actually let that happen. But again, it shouldn't ever be to a degree that it actually hinders you from using the product or using that website. So that's something to really keep in mind. But yeah, I think the best thing you can do is just start from scratch, have a clear no-motion template, and then build from there.

[00:29:04] Host: Excellent. All right, well thanks very much. That actually brings us to time. So I just want to thank you again for sharing your insights on motion design.

[00:29:14] Bhakti: Of course. Thank you so much for having me.