High Fidelity Animated Workflows

Discussion Forum Design Tools High Fidelity Animated Workflows
Viewing 8 posts - 1 through 8 (of 8 total)

Do people find that when trying to tackle a complex workflow (either for a specific customer ask or trying to peg an ideal journey for the user) it is helpful to having a high fidelity mockup to speak to? I have made a few animated workflows during my internship (in after effects) and it seems to have a lot of positive outcomes. I get a better understanding of how many small interactive elements need to be thought out (hover states,micro interactions, drag states etc) but it also is a very real thing that can be shown to developers and even used as a guide for their implementation.

Is the time (1-3 days depending on complexity) it takes to make one of these animated workflows worth it if it serves a positive role for designers and developers?

Not only do I think its worth it, I believe its mandatory (in my opinion and practice). Certainly you don’t need to put such time and effort into every UX idea, but as you correctly experienced for yourself, there are many benefits from such effort. In fact, in addition with team communication, and demonstrations for customer feedback, 4D mockups have become my primary UX specification document. Our biggest problem is we (Users) have no dedicated tools for exploring our ideas: we use the tools of desktop publishing (Illustrator & PhotoShop) and motion graphics (AfterEffects, Premier, Final Cut, etc) to try, test, and communicate our ideas. We have no tools of our own. You might want to try out Keynote (sorry I cannot stand PPT) to build some of your mockups, I often use this as I would InDesign for a PDF doc – bringing graphic elements (AI & PSD) and movie snippets of more complicated motion graphic effects (AE) and then use Keynote for most transitions and simple 2D animations. I have found this gives me more flexibility and control to iterate, evolving parts without changing others (plus in the end you can still output a movie file from Keynote in the end). And now there is a browser version of Keynote, so even if you have a PC you can now have access to this tool.

The point is, the closer you are to the final user experience the more you can properly assess the idea and its potential execution. No car or product goes into projection without a design prototype – same should be held for UX. Its just time and cost prohibitive currently, thus our “release” code is often our first real prototype. This is also why it takes a 3.0 product to be truly useful to the end user – its impossible to get it all right the first iteration.

Still this only gives us a linear story; it is still so difficult to build a true UX prototype that you can play with and do real user testing with. Hyper link methods and tools don’t go far enough, and I rarely get what I truly need from such a path. And currently you have to be able to write code in order to build a truly interactive experience. There is movement on this front, more graphic driven prototyping tools are starting to come out, but I haven’t found yet what I’m looking for – I imagine someday soon we might have dedicated tools for designing software experiences.

Best of luck, I hope this helps in some small way – Gray

User Experience Design Manager

In the final stage of the design phase it definitely makes sense to put a lot of effort into as much fidelity as possible. This is especially true for the simulation of the interaction.

It helps you as a designer to clearly define the interaction. During usability test you will get more detailed feedback and developers have a comprehensive and visual guidance.

Check out my posts on the topics of “What is a Wireframe?”, “What is a Mock-Up?” and “What is a Prototype?” if you are interested in reading more about the different stages of design.

I totally agree with Gray and Hanna,

I’d like to add one or two things here as i think that they are very important to have in mind as well 🙂 When animating the UI, you’re not only breathing life into your application, you’re also adding several more things to it like:

Within the app (Hi-def prototype), the motion conveys a distinct character. I’d even go so far to create an own “Persona(lity)” for the entire application.

Your motion should help ease the user through the experience. It should establish the “physical space” of the app by the way objects come on and off the screen or into focus.

Motion (animation) should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.

It should evoke a positive emotional response, wether by a smooth scrolling element of by a well executed (timed) animation

But with all that in mind, animation should always help the user and shouldn’t be just for the sake of animation. I always use my personal 3 questions to judge if an element should be animated or not: 1.) Is it meaningful and does it enhance the users experience ? 2.) Is the animation (behavior) coherent to the rest of the UI’s animation ? 3.) Is it contextual ?

Besides all of the above, i highly recommend reading the following books: “The Illusion Of Life” and “The Animators Survival Kit” and make yourself comfortable with the “12 Principles of Animation” these books are the holy grail of animation and most, if not all informations can be translated to what we do.

I hope it helps to make your decision easier. I’m practicing UI animation since 10 years now using After Effects and CINEMA 4D to enhance the experience for applications. Oh and YES the time is totally worth it.

User Experience Design Manager

Sean, is your prototype actually going to be implemented? If yes, it would be interesting to know what the developers really think. If not, maybe you can check with some developers what they think and if they appreciate the level of detail.

Hello all!

First let me say thank you for all of the advice information everyone has posted. I must admit I was afraid the post may go un answered.


This quote from Gray was right on the money

“No car or product goes into projection without a design prototype – same should be held for UX. Its just time and cost prohibitive currently, thus our “release” code is often our first real prototype. This is also why it takes a 3.0 product to be truly useful to the end user – its impossible to get it all right the first iteration.”

Making a high fidelity run through of your feature gives you the best prototype possible before implementing a v1 interactive prototype. I think this is very important because although as designers we would like to think we have thought out all eventualities, more often than not there is a small hover or state that has been overlooked and could have major ramifications that the developer may address on their own without asking for UX support.


The major drawback however is that it is not interactive when using After Effects on its own. Recently I have been using Framer.js to stitch together interactive screens with animated state changes. The animations can be very complex but as long as the beginning and end states are made in sketch or PS then you have full interactive control of the layers with minimal coding knowledge.


To address your question Hanna, yes the first prototype I made ended up being implemented. I didn’t work directly with the devs during implementation so their feedback was relayed through my manager but it was overall very positive and the animation was referred to as a guide many times. I have invited Hanna and David to the a SAP JAM group where I have been posting other animated workflows for internal viewing so please take a look if you are interested. The “Guide” the developers used is in that group and named FullPotential-Compose.mp4





User Experience Design Manager

Sean, I had a look at your designs and was impressed by their level of detail. There was one general problem I came up with. Sometimes it was not easy to distinguish when one action ended and the next one started. This might be easier to convey in a writen document.

Ha-ha Hanna,

If your observation is true, then it is also true for the user — thus this is an important insight and something to work on in the interaction/feedback of the design…


I have been recently researching a lot into this prototyping topic — although I cannot share my research directly, this is an very good article looking at a lot of the relatively new class of UX prototyping tools:


also if it is for an app, I recommend looking at Pixate — this one is the only one I really want to use (and I have just started a demo project today to start testing) – it says it is purely focused on mobile apps — but their is a custom size input, so I imagine that it might be useful for prototyping anything…. Good luck.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.