How to transition from a motion background into UX
Jul 11, 2019A few weeks ago I received a really good question: how do you transition from a motion background into UX and product design?
The motion designer who wants to transition into UX and product design
Many of the folks who reach out to me about this question fall into this group.
They have had a career in motion design, are already strong in After Effects, and want to make the transition over to UX and product design. Makes sense. The money is good and competition is fairly light.
They are very strong in motion but tend to be weak on ideation, collaboration, UX team dynamics, and understanding the fundamentals of UX. Additionally, they typically lack a point of view on the value of motion in product design, other than ‘it’s cool.’
Their main strength however, is that they are able to visualize how static screens can be connected with motion. This is a valuable skill that UX designers typically lack. So, motion designers transitioning into UX often have an advantageโ—โif the team views them as UX contributors, and not just pixel pushers.
The UX workflow is different than for motion graphics
The first thing to understand is that UX design and workflow is fundamentally different than motion design. In motion design, unless you’re working on extremely complex projects involving multiple team members, it can be a rational choice to build your projects in a sloppy way, meaning that it takes time to develop clean workflows that are scalable and rapidly iterable based on emerging feedback and data.
From a cost/benefit standpoint, developing clean workflows can have little ROI in classic motion graphics projects. You can use tons of keyframes and essentially pay no price.
Not true for UX. You need to focus on extremely adaptable projects that you can deliver multiple versions on. I do this through a lot of parenting and strategizing the simplest way of building projects so that I can update them easily. This means I use as few keyframes as possible.
You need to embrace design systems
The second thing to realize is that UX works in a context of design systems, something that motion designers are trained NOT to do. The reason they’re trained to not use motion systems is that the emphasis is on making the motion look great, not fitting keyframes and easing to a standard set of parameters.
By contrast, you need to understand that delivering motion is not the end goal. The end goal is getting the motion into the product. You will not be doing this. Engineers/developers will be doing this. All motion must be scalable and fit into an ecosystem of other motion. Focusing on one-off’s is bad.
You need to learn the basics of UX
Fortunately (and UX designers will hate me for saying this), in my opinion, the basics of UX are easier to learn than the basics of motion. So here’s my recommend:
- Read 3 of the top 10 UX books out there (buy from your local bookstore please, not Amazon). It really doesn’t matter which ones. Just read them. You’ll learn something. I know they’re boring. But do it anyway.
- Take 1 online or live intro UX class. Don’t spend thousands of dollars doing this. Just find a well reviewed class that you can afford. Again, you need to learn the basics, not buy a freaking Porsche. Don’t take like 5 classes, like half my friends do. It’s just not worth it unless you want to become a UX designer.
From this minimal knowledge base, you can start to speak the language around UX, understand the way that UX and product designers talk about problems, and you’ll start to understand the basics concepts and workflows at a level where you can add value and contribute.
Keep in mind, many product managers are looking for motion people who can interface with UX teams.
The important thing is to not get all insecure and go crazy reading like 30 books and taking like 10 classes. Unless you’re looking to become a UX designer, you should be focusing on investing the minimum to understand and contribute to UX projects. Your end goal is that you want to position yourself as a strong motion person who integrates seamlessly with the UX team, can get your work to engineers, and can make compelling cases for when and how to use motion to improve experiences and make better products.
Learn another prototyping tool in addition to After Effects
Since you already probably use After Effects, I highly recommend you expand your versatility by learning an actual prototyping tool. You’ll want something high end.
If you can code, I’d have you learn Framer. If not, I’d have you learn something like Principle, Figma, or Protopie, or if you know someone on the team you’re applying to work on, ask them what they useโ—โand then learn that tool. Don’t go out and learn some weird edgy tool that nobody has ever heard of. Seriously, don’t.
The good news is that these tools are insanely easy to learn, compared to After Effects.
The advantage of AE is that it can do anything. The disadvantage is that it’s not interactive. The other prototyping tools will all seem primitive in comparison, but they do deliver interactive prototypes, which you will need to deliver on occasion.
Do not learn Adobe XD unless you HAVE to. The animation skills are lacking (in my opinion).
Also, educate yourself about Lottie. It’s easy to learn, and will blow people’s minds and add a ton of value.
Learn Sketch
As much as I hate to tell you to learn something else, you really should learn Sketch. The tool is so easy you can pick up the basics in half a day.
Most (but not all) designers use Sketch, so the assets you will be working with will likely (but not always) be coming to you from Sketch. You’ll want to watch my tutorial video on how to get Sketch files into After Effects.
Strategically design your portfolio for the kind of work you want
Read my article here on this topic. The idea is that project managers are looking for 4 kinds of (potentially overlapping) skills, and you want to fit your work to one of these 4 areas, and demonstrate you have the skills they are looking for. The 4 things they’re looking for are:
- Demonstrate that you can build UI animation
- Demonstrate that you can think through UI animation in the context of UX
- Demonstrate that you are an animator and can deliver high quality motion for digital products
- Demonstrate that you have a technical knowledge of implementing motion and can work with engineers
To develop a strong portfolio, you MUST collaborate
This is the big one. Chances are you have a strong motion portfolio but your design skills are… lacking, to put it politely.
The bad news: unless you are working with extremely high-end visual assets, your portfolio is going to look… bad. As a motion person, your UI design skills are probably far short of being impressive.
You just have to accept this and not try to impress people with your mediocre design skills. It will not go well for you. You’re going up against incredible, passionate designers who live for designing UI, and you will be mercilessly crushed. Nobody wants that.
People tend to not really understand this: if you work with poorly designed static source files, your animation will look bad, no matter how much love you put in.
The good news: there is no need to go to design school. Unless you are looking to transition your career and become a designer, just do the following –
- Create an account on a site like Dribbble or Behance (hopefully both)
- Find 10 phenomenal UX/UI/Product designers who have no motion in their portfolio. Do you see the bolded word above? Phenomenal. You’re looking for HOT designers. Not average, not decent, but HOTTT.
- Reach out to them and invite them to collaborate: they provide you with their kick ass design source files to animate, and you provide them with insanely polished UI animations to use on their site. You may choose to give each other credit. Just be cool and work out the details. Even if you only find one person to collaborate with, do that. It’s a win/win with zero downside for either party.
Here’s how I would approach this in an email. Feel free to use this. I’d write something like:
Subject: Design collaboration
Hey Laura, I hope this finds you well. I came across your portfolio on Dribbble and I’m completely blown away by your design skills. My background is in motion design and I’m looking to create a strong portfolio of UI motion work. I was wondering if you would be open to a collaboration where I animate your source files and post to my UI animation portfolio, and give you credit in the description. In exchange, you can use my UI animations in your portfolio to showcase the potential of your gorgeous designs put to motion. Let me know what you think! I’m looking forward to hearing back.
Sincerely,
Issara
They may not write you back. Be cool. Be persistent. Until you get a ‘no’ just assume they’re busy. Feel free to reach out in multiple ways. Just keep ‘pinging,’ ‘checking in,’ and ‘resurfacing’ your inquiry. Be cool, have fun, and just try to find at least one awesome designer to work with.
When the person says yes: do not ask them to prepare their design files for you. Seriously. Take this as a personal challenge to learn how to work with files no matter how you get them. And also as a personal challenge to make this as friction free for this other person who is essentially doing you one huge ass solid.
Plus, you get to make a new friend, which is always great.
Alternatively, if you simply cannot find someone who will collab with you, and you are desperate, there are a TON of extremely high end UI mockup templates out there that you can buy for dirt cheap. The screens learn great, they’re all made in Sketch, and you can jam on those to your heart’s content. Last resort for sure, but no shame in doing it.
Again, you need visually strong assets or your portfolio will look bad.
If you are unable to tell what visually looks good or not, then find someone who you know who has taste and ask them. Don’t second guess. Don’t try to justify your belief in why your terribly designed thing is somehow better. Just don’t. It’s not worth the calories.
Post & share
The last step is to actually post these projects to your site. The common format is an animated GIF. You can use GifGun to do this.
Dribbble now supports videos so that’s great. Don’t go building some custom HTML website or I will literally transmogrify myself into pure data and smack you through your computer screen.
You can simply use a site like Dribbble or Behance or if you want to take it up a notch, use Cargo Collective. Do. Not. Use. Anything. Else. Do not use Wix. Or Squarespace. Do not create a custom HTML site. I can’t believe I even have to say this in 2019.
Then apply for jobs, share your links, post, and in all ways try to get your work in front of eyeballs. Be persistent, be patient, and when folks don’t get back to you, assume that they are busy, and follow up in a week or so.
๐ If you want to learn UI animation from me, you can check out the UI animation courses on my site: UX in Motion
๐ I have a popular and FREE UI Animation with After Effects Fast Start course. You can view it here
๐จ๐ผ๐ค If you want me to come in and teach motion and usability or After Effects to your team, you can go here: https://uxinmotion.net/motion-and-usability-onsite-workshop/ or schedule a call to learn more.
Don't miss a beat!
New moves, motivation, and classes delivered to your inbox.
We hate SPAM. We will never sell your information, for any reason.