Building Better Experiences With Prototypes and Interaction Videos

Describing an interaction on a website via a static mockup is difficult, asking a developer to build it without any frame of reference is even more so. Without adding a substantial amount of work, how could we better articulate an interaction with the tools we currently used?

Approach

Where Is My Mind?

Communication is key, always, even if it takes a little time upfront; this is one of my core beliefs – especially in context to design and development.

I had a small amount of prototyping experience before working at Entrepreneur but I never fully understood how helpful a simple prototype could be to a developer, especially when the designer doesn’t have reference material (though as a designer you should, or at least know where to look).

It’s always best to start with an implemented example due to insights you can gain from how other designers solved similar problems. Once I find an example, time to pick it apart and start determining which elements can stay and which can be removed based on the project goals and requirements.

The process that I follow is very similar to my animation process where I start by thinking of the states of the interaction (static vs active states). Once the different states are defined, then I start determining the motions between each state; how to get from point A to point B. Much like Keynote, Adobe XD’s prototype mode allowed us to quickly plan out an interaction, then export a video file from that prototype.

It’s at this point where I felt comfortable sharing my interaction videos with the team so that we could start reviewing and iterating.

Takeaways

I’m Amazed

Since adding small prototypes and interactions, I’ve had numerous team members (not even limited to the design/developer team) thank me because it’s helped them literally see the design in action. This has also indirectly pushed our design and developer teams to find more implemented examples which has lessened the back and forth between different stakeholders due to visual clarity.

A worry expressed by several teammates was that creating these interactions or prototypes would end up making projects last longer. My argument, based on the numerous articles and tutorials I have read, was that by adding prototypes and interactions we would actually decrease the amount of time it took to complete projects.

Anecdotally, we have seen that on projects where we make a concerted effort to create high value interactions and prototypes – without fail, those projects progress more quickly and result in higher quality experiences.