Video Sketching Firefox Metro Start Page

May 12, 2012

Starting this February, I began to work on a challenging but super exciting project: designing Firefox on Windows 8. As you may know, Windows 8 will employ a new user interface based on Microsoft?s Metro design language. This Metro environment is a tile-based, touch-optimized, cross-platform system.

To make Firefox shine on this unique environment, the UX team on MetroUI project has been focusing on solving some design challenges, such as: delivering a consistent ?Firefoxy? experience and also making it native on Metro; designing an equally awesome experience of Firefox Metro on desktop using mouse and keyboard.

Another challenge for me as a UX designer is prototyping and testing a product that has a brand new touch language. I found it hard to simulate the W8 touch experience in a quick and dirty way, withouting building a functional product. In order to get the experience out and gain enough feedback to iterate, I decided to ?video sketch? the Start Page of Firefox Metro by just using Keynote.

Making a video sketch by Keynote is simple:

Step 1: Create a user story. Write a script with scenes.
Step 2: Place your mockups into Keynote, put them in sequence to match the scenes you created.
Step 3: Link your mockups together(create animations, page transitions, or maybe just hotspot link)
Step 4: Record your slideshow
Step 5: Export as Quicktime movie

I will be posting more video sketch demos on Firefox Metro?s main features, such as browsing web pages, searching via awesomescreen, using app contracts, etc. Also stay tuned for more awesomeness about Firefox Metro from Stephen Horlander, Brian R. Bondy, and Asa Dotzler.

source: http://blog.mozilla....tro-start-page/