How  to  prototype  Windows  Phone  7  apps  with  PowerPoint

Why  PowerPoint?It  contains  a  useful  set  of  design  features,  making  it  ideal  to  create  wireframes  and  clickable  

prototypes  for  a  variety  of  applica9ons  quickly  and  cheaply.  These  features  include  basic  shapes,  visual  styles,  effects,  grouping,  slide  masters,  and  hyperlinks.

Here  is  the  process  I  used  to  prototype  an  image  sharing  app  for  win  7  phone  with  PowerPoint  in  under  an  hour.

Plan  itOne  of  the  simplest  ways  to  plan  an  interface  is  to  visualize  it  as  a  user  flow  diagram  with  links  between  states  corresponding  to  user  interac9on.  For  example,  here  is  the  flow  diagram  for  the  image  sharing  app  (created  using  Windows  Journal  on  a  Tablet  PC)

Sketch  itThe  next  step  is  to  create  rough  sketches  for  each  screen.  These  sketches  provide  the  high  level  direc9on  for  crea9ng  the  wireframes  in  PowerPoint,  so  don't  worry  about  puMng  too  much  detail  there.

Wireframe  itTo  wireframe  the  interface  with  PowerPoint,  simply  select  a  shape  from  the  insert  tab,  and  draw  the  main  screens  first.  Then  duplicate  (CTRL+D)  slides  to  create  different  states  for  each  screen,  based  on  your  user  flow  diagram.  

     

To  build  these  screens  faster,  I  use  the  PowerPoint  prototyping  library  from  Keynotopia.  

   

Hyperlink  itNow  the  best  part:  To  make  your  wireframe  clickable,  simply  select  a  shape  on  your  slide,  click  the  hyperlink  icon  from  the  insert  tab,  and  select  the  next  slide  in  the  user  flow.  That  way,  you're  crea9ng  a  non-­‐linear  flow  that  simulates  user  interac9on  with  interface  objects  to  navigate  to  other  screens.

Export  itPowerPoint  provides  a  wide  range  of  export  formats,  including  PDF.  The  reason  is  I  like  PDF  is  that  it  can  be  easily  shared  and  tested  on  different  devices  and  plaXorms.  If  you  already  have  a  Windows  7  phone,  open  the  PDF  file  and  tap  through  it  on  your  device  as  if  it  were  a  real  prototype.  All  this  is  done  without  wri9ng  a  single  line  of  code,  or  using  any  design  tool.

That’s  it!  Enjoy  prototyping  with  Keynote,  and  leave  a  comment  below  if  you  have  any  ques9ons  or  if  you’d  like  to  share  your  favorite  Windows  Phone  7  prototyping  tools  and  tricks.

Final  Tips-­‐  Grouping  shapes  together  (CTRL+G)  makes  it  easier  to  copy/move  them  around.

-­‐  Use  slide  masters  to  share  basic  screens  and  naviga9on  items  across  mul9ple  slides.  That  way,  you  avoid  lots  of  copy/paste,  and  you  can  update  mul9ple  slides  with  a  single  shape.

-­‐  Duplicate  formaMng  (style)  of  a  shape  or  text  by  copying  it  (CTRL+SHIFT+C)  and  pas9ng  it  onto  the  new  object  (CTRL+SHIFT+V)

-­‐  Create  (or  use  an  exis9ng  )  interface  library  to  save  yourself  9me  by  copying  and  pas9ng  interface  elements  rather  than  redrawing  them  every  9me.

-­‐  Keep  your  prototype  simple,  and  focus  on  the  main  features  that  you’d  like  to  visualize  and  test.  Everything  else  is  a  distrac9on.