A 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.
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: