3 things I learned teaching Motion and Usability workshops

Issara Willenskomer
UX in Motion
Published in
7 min readSep 13, 2019

Over the last 18 months, I’ve been teaching motion and usability workshops to design teams at companies including Dropbox, Slack, Oracle, Salesforce, and Kayak.

Hundreds of other designers and engineers from other top brands including Apple, Twitter, Shopify, Cisco, Volkswagen, Bank of America, have also attended my public workshops.

During the workshop, we use no software or prototyping tools, aside from paper prototyping, which we use to ideate, and communicate ideas.

Participants (primarily UX, UI & Product Designers, as well as engineers) learn how to integrate motion into the CX and UX workflow, ideation and iteration, how to use motion to solve UX challenges, how to design and implement motion standards, and how to use an ROI framework to communicate the value of motion to team members and stakeholders.

With paper prototyping of motion, the emphasis is neither on aesthetics or drawing skills, but on ideation granularity: this exercise becomes a blueprint that the designer uses in their prototyping tool of choice, dramatically increasing efficiency and implementation speed. Additionally, participants learn a rapid ideation system that builds on user mental models and interface behaviors rather than tedious frame by frame storyboarding.

After the workshop, designers are immediately able to apply what they learned in their prototyping tool of their choice, whether it be Figma, After Effects, Framer, Principle, ProtoPie, Adobe XD, or any other tool that gets results for their team.

Designers learn how to use motion strategically to make better products and partner with engineers to deliver high quality results.

This workshop doesn’t turn good designers into animators. The workshop turns great designers into even better designers.

Motion and usability workshops

Workshop outcomes

The workshop has 5 outcomes, or skills, which are required to successfully design, implement, present, test, and ship motion at a team level.

  1. Expand CX solution space
  2. Acquire new design vocabulary for ideation and presentation of motion
  3. Synergize collaboration between stakeholders, designers, and engineers
  4. Effectively communicate the value of motion
  5. Accelerate timelines and conserve budget with paper prototyping

If you want to learn more about the Creating Usability with Motion workshop, you can learn more at my workshop page.

Motion and usability

The demand for these team workshops spiked after my framework on motion and usability went viral and quickly ratcheted up over half a million views.

Read Creating Usability with Motion: The UX in Motion Manifesto.

With no further ado, here’s what I’ve learned, working personally with hundreds of UX/UI & Product Designers, as well as Engineers and PMs.

Lesson #1: Use an ROI framework to communicate motion

Probably the single greatest team challenge lies in the ability to communicate the value of motion.

This is also the largest opportunity.

While there is a general intuitive sense that motion has the potential to add value, the range of communicating this value falls all over the board. Very few teams approach the topic of motion from an ROI or metric standpoint.

When you fail to do this, it becomes nearly impossible to present motion opportunities to Product Managers, and make a compelling case for motion.

https://www.uxinmotion.com/how-to-sell-motion-to-stakeholders

From a PM standpoint, motion can be perceived as having value, but could negatively impact the road map, may be risky to attempt, and not deliver results. At the same time, it has high perceived value.

As a designer, you want to speak the language that PM’s understand: results.

If you have project data, find it. If you have a testable hypothesis, test it. If you’re not sure of the impact on the road map, learn it. If you aren’t sure about platform capabilities, find out. Do all this before you meet with stakeholders, and I promise you that when you speak to these things, it will be a game changer.

I created a free PDF script for designers to use to sell motion to stakeholders. I crowd sourced this from colleagues, PMs and my own personal experience.

👉🏽 Click here to download the ‘how to sell motion to stakeholders’ PDF script

Lesson #2: Designers need to talk to engineers

When I talk to designers about the capabilities of their engineering team and platform, I am always surprised at how little they know.

I’m not saying that designers need to learn how to code.

What they do need to learn how to do is have simple conversations about platform limitations, low hanging fruit, understand the resources required from engineers (research, implementation, testing, and QC), as well as motion asset handoff.

All of these answers can be obtained over lunch, yet I find that rarely do designers initiate this level of partnership.

At the end of the day, engineers are the ones implementing motion.

And the platform, to a large degree, will influence what’s possible. I taught a workshop recently at a Fortune 500 design team, where due to platform legacy, there was actually very little their engineers could execute on with regards to motion. Everyone from the leadership on down wanted motion, and understood the value. But there was no way to deliver.

In the workshop, we worked on enhancing partnership and reducing ideation friction. The designers had to downscale what they wanted, and focus on delivering value in areas that were possible. This was a huge win because they were able to move projects forward and get projects implemented.

Having these conversations — early on — allows designers to spend their time wisely designing motion that can get made.

Granted, there are instances where ‘pie in the sky’ has value, but for essential transitions and components, it pays dividends for designers to understand capabilities and limitations.

In the workshop, we have personal conversations about creating this partnership with engineering.

Click here to learn more about the UX in Motion: Motion and Usability team workshop

Lesson #3: Motion is easier than you think

When it comes to motion and product design, UX/UI & Product Designers often feel overwhelmed. They have little understanding of timing, industry motion standards, or thinking through the entirety of a transition involving multiple objects and properties.

At the same time, motion has high premium value, and the team members who can both design UX and deliver motion prototypes are unicorns.

There is also the myth that it takes months to learn how to animate. And this is true if you want to learn how to become a classic style animator. However, designing transitions, micro-interactions, and dashboard animations are much easier than most designers realize.

In my follow up workshop participant interviews, I find that designers were quickly able to take what they learned during the 1 day or 1/2 day workshop and begin implementing motion in their projects, regardless of prototyping tool.

In addition, my UI Animation Motion Standards online course helps you take all the guesswork out of learning motion standards. You’ll quickly learn how to use industry standard durations and easings in your projects, how to create your own standards, and how to communicate these values to your engineers.

Click here to learn about the UI Animation Motion Standards course

Look, here’s the truth: when it comes to product design, there are two completely different kinds of motion.

‘Integrative’ motion uses existing elements of the design, and relies on mental models and partnership with the UX. This kind of motion is very easy to learn, and is consists largely of transitions, micro-interactions, dashboard animations, and gesture. This is why all my UI Animation courses are only a few hours long.

Once you learn the industry standard plug and play timing numbers, everything becomes easy.

What I call ‘additive’ motion, on the other hand, is more like classic cartoon style motion and does take months to learn. This is motion that ‘goes on top’ of the design, is more passive for users, and typically involves complex behaviors, is highly technical, and involves non-standard timing.

Integrative motion (left), additive motion (right) Image Credit: Markus Magnusson, Project: Dropbox Paper

As a designer, most of the motion you will be working on is integrative. This kind of motion delivers the most value in products, is easy to learn, and is what the majority of the motion and usability workshop focuses on.

To summarize

If you want to transform the process of how your team delivers motion, focusing on these 3 areas will help tremendously: focusing on an ROI framework, streamline communication between engineers and designers, and focusing on integrative motion first.

--

--

Issara Willenskomer
UX in Motion

I teach UX/UI & Product Designers how to use animation to create better apps and websites: www.uxinmotion.com