Communicating design intent with animated mockups

9 Sep 2010 - 12:43pm
3 years ago
10 replies
3880 reads
.pauric
2006

I was recently asked to help clarify a design solution to team members and stakeholders.  The project had been spinning wheels with everybody looking at the problem from different angles.  What was needed was some good old 'users perspective' on how they would use the software, and this perspective needed to be seen by both the team and the high level stakeholder (read: does not have time to sit through paper prototype demo)

I looked at using keynote ( e.g. http://keynotopia.com/ ) but that would still require a lot of customisation for the specific project I was working on.  I went back to Omnigraffle (this method is doable in visio) and came up with a super simple way to create animated mockups / presentations.  

This is not an interactive mockup/prototype.  The deliverable is more what I'd call and 'experience prototype' that can demonstrate conceptual usage, surprisingly quick and easy to produce, ideal for early stages in a project or the elevator pitch to clients.

Watch this demo of the method (it's not the actual project I worked on fwiw, I create a fake project for the purpose of video): http://www.youtube.com/watch?v=6kgWuIqvzA8

1)create a storyboard on paper

2)create a page in omni/visio or other for each frame needed for the storyboard, Essentially you will make a frame then copy and paste, tweak, copy & paste, tweak - etc.

3)export each frame as a png (this is a one button operation in omni)

4)drag and drop in to iMovie then export it as a video.

Feedback is very welcome, it's gone down really well with the team, everyone nodding in agreement that this is indeed what we're trying to build (prior research completed obviously)  /pauric

Comments

12 Sep 2010 - 2:05am
martinpolley
2007

Nice! I have used a similar method to good effect. Except I just used a screen recording tool (Camtasia or Jing) to directly record the relevant part of my Visio window (which also allowed me to move the pointer around and pretend to click stuff). That's how I made this.


Cheers,

Martin Polley
Technical writer | Interaction designer

+972 52 3864280
Mail | @martinpolley | Web




On Fri, Sep 10, 2010 at 12:01 AM, pauric <radiorental@gmail.com> wrote:

I was recently asked to help clarify a design solution to team members and stakeholders.  The project had been spinning wheels with everybody looking at the problem from different angles.  What was needed was some good old 'users perspective' on how they would use the software, and this perspective needed to be seen by both the team and the high level stakeholder (read: does not have time to sit through paper prototype demo)

I looked at using keynote ( e.g. http://keynotopia.com/ ) but that would still require a lot of customisation for the specific project I was working on.  I went back to Omnigraffle (this method is doable in visio) and came up with a super simple way to create animated mockups / presentations.  

This is not an interactive mockup/prototype.  The deliverable is more what I'd call and 'experience prototype' that can demonstrate conceptual usage, surprisingly quick and easy to produce, ideal for early stages in a project or the elevator pitch to clients.

Watch this demo of the method (it's not the actual project I worked on fwiw, I create a fake project for the purpose of video): http://www.youtube.com/watch?v=6kgWuIqvzA8 [1]

1)create a storyboard on paper

2)create a page in omni/visio or other for each frame needed for the storyboard, Essentially you will make a frame then copy and paste, tweak, copy & paste, tweak - etc.

3)export each frame as a png (this is a one button operation in omni)

4)drag and drop in to iMovie then export it as a video.

Feedback is very welcome, it's gone down really well with the team, everyone nodding in agreement that this is indeed what we're trying to build (prior research completed obviously)  /pauric

(((Pleas
12 Sep 2010 - 5:06am
willdonovan
2009

Now that you have created the images, you can automatically convert them to a combined pdf (particularly if you are in a PC environment, Mac's seem to be tricker to do this).

This way you create another artefact the provides your audience with another way to view you presentation.




William Donovan



On 12 September 2010 18:03, martinpolley <martin.polley@gmail.com> wrote:

Nice! I have used a similar method to good effect. Except I just used a screen recording tool (Camtasia or Jing) to directly record the relevant part of my Visio window (which also allowed me to move the pointer around and pretend to click stuff). That's how I made this [1].

Cheers,
*Martin Polley*
Technical writer | Interaction designer

+972 52 3864280
Mail [2] | @martinpolley [3] | Web [4]

On Fri, Sep 10, 2010 at 12:01 AM, pauric <radiorental@gmail.com [5]> wrote:

I was recently asked to help clarify a design solution to team members and stakeholders.  The project had been spinning wheels with everybody looking at the problem from different angles.  What was needed was some good old 'users perspective' on how they would use the software, and this perspective needed to be seen by both the team and the high level stakeholder (read: does not have time to sit through paper prototype demo)

I looked at using keynote ( e.g. http://keynotopia.com/ [6] ) but that would still require a lot of customisation for the specific project I was working on.  I went back to Omnigraffle (this method is doable in visio) and came up with a super simple way to create animated mockups / presentations.  

This is not an interactive mockup/prototype.  The deliverable is more what I'd call and 'experience prototype' that can demonstrate conceptual usage, surprisingly quick and easy to produce, ideal for early stages in a project or the elevator pitch to clients.

Watch this demo of the method (it's not the actual project I worked on fwiw, I create a fake project for the purpose of video): http://www.youtube.com/watch?v=6kgWuIqvzA8 [7] [1]

1)create a storyboard on paper

2)create a page in omni/visio or other for each frame needed for the storyboard, Essentially you will make a frame then copy and paste, tweak, copy & paste, tweak - etc.

3)export each frame as a png (this is a one button operation in omni)

4)drag and drop in to iMovie then export it as a video.

Feedback is very welcome, it's gone down really well with the team, everyone nodding in agreement that this is indeed what we're trying to build (prior research completed obviously)  /pauric

(((Pleas

(((Pleas
13 Sep 2010 - 2:23am
Adrian Howard
2005

Lovely :-)

I've sometimes gone the even lower-tech route of just filming moving stuff around on a paper prototype. I'm not talking a fancy stop-motion animation here either. I mean a live recording of me shifting stuff around with my fingers. Simple - but often does the job :-)

Cheers,

Adrian

13 Sep 2010 - 7:17am
.pauric
2006

Adrian, that's exactly it. Don't get hung up on a particular technology or method.  Just understand what is needed to get the job done - do that and no more.  Progress trumps 'wowness' (o;

cheers /pauric

13 Sep 2010 - 1:10am
Jared M. Spool
2003

Brilliant. Just brilliant.

Jared

13 Sep 2010 - 9:26am
jabbett
2008

I recently created a stop-motion animation with my son by throwing a bunch of photos into Windows Movie Maker - sounds like it would be a good alternative to iMovie for Windows users.

For XP: http://www.microsoft.com/windowsxp/downloads/updates/moviemaker2.mspx
For Windows 7: http://explore.live.com/windows-live-movie-maker?wa=wsignin1.0

14 Sep 2010 - 11:18am
socialamigo
2010

Pauric - very nice demonstration - Seeing how you have investigated Keynote for use in this manner perhaps you could expand on the notes:  

I looked at using keynote ( e.g. http://keynotopia.com/ ) but that would still require a lot of customisation for the specific project I was working on

This would be helpful to understand specifically what was the hinderance; library issues, animation, what-have-you.

Thanks for this insightful thread.

Socialamigo

14 Sep 2010 - 1:37pm
.pauric
2006

Steve, there's three reasons I did not run with keynote.

First, I currently work in the computer aided modeling domain and to cut a long story short that equates to highly customised UI's, not the usually set of html elements or mobile patterns that a lot of these stencils contain.

The mockup I produced is a 'mixed media' of screengrabs from the foundation platform UI that then launches in to the mockup, I had to design the look & feel of the mockup so that I did not break suspension of disbelief for the viewer.  Remember the video of that terrible song from the 80's 'Take on me' from some second rate one-hit-wonder band from Norway?  something like that.  http://www.youtube.com/watch?v=djV11Xbc914&ob=av3n The off the shelf stencils didn't work.

Finally, and most importantly, tools.  When you have a really good hammer - everything starts looking like a nail.  Imho it's better to bend a prototyping tool that you've learned than to invest time in a new tool.  Or in other words, it's easier to attain Flow in your preferred tool.   Keynote is fine but suffers from the typical Apple Flatlanditis, I can get more done, more quickly and with better results in Omnigraffle than anything else I've tried. I've seen amazing things done with Powerpoint and Todd Warfel will blow your socks off with paper.  That's all down to Flow.

regards /pauric

16 Sep 2010 - 5:29pm
j.scot
2008

Back in 2006, I was working on a DoD-wide project for which each service (army, navy, af, marines) had the option of contributing money toward. Prior to my joining the team, there had been a lot of frustration among exec stakeholders because the dev team had difficulty communicating their intent in ways that really resonated with the guys writing the checks.

Enter the first design-thinker on the project. After solidifying my ideas about how best to redesign, I put together a 60-slide presentation in powerpoint which i used to simulate typical use of the application. I put links on all the tabs and navigation (each link going to a different slide that depicted the UI in a different state) so that when in presention mode, when I clicked around the UI, it would appear as if I was actually using the app.

I did this to communicate my vision of the UX to both the product manager and the dev team. But the PM liked it so much, he thought it would be good to present at the next Exec stakeholder meeting.

Since it was my design and my presentation, they asked me to present (they knew any questions or concerns would have to be directed to me anyway). The presentation resulted in, for the first time in the 8yr history of the project, exec stakeholders having ZERO questions, concerns, or doubts.

17 Sep 2010 - 1:05pm
Jared M. Spool
2003

Great story! Shows the value of a good prototype. 
Jared


Syndicate content Get the feed