Tutorial:  Getting  Familiar  with  the  myBalsamiq  tools  for  mocking  up  ideas.    This  tutorial  is  intended  to  give  you  a  simple,  structured  way  to  begin  using  the  mybaslsamiq  mockup  tools.      The  goal  for  the  end  of  this  tutorial  is  that  you  are  comfortable  enough  with  procedural  mechanics  illustrating  ideas  that  you  are  off  and  running  on  your  own.    To  start,  login  to  the  mybalsmiq  site.  For  students  at  ASU,  you  should  have  received  an  invite  to  the  site,  and  can  login  at:    https://asu-­‐games-­‐impact.mybalsamiq.com/projects    In  this  tutorial,  you’re  going  to  start  by  working  off  of  the  story  If  You  Give  a  Mouse  a  Cookie,  included  at  the  end  of  this  document.    This  text  was  selected  because  it  is  popular  for  introducing  children  to  systems  thinking  and  specifically  cyclic  systems  with  feedback  loops.    What  that  means  is  that  it  is  a  good  object  to  render  as  system  diagram.    For  the  purposes  of  this  tutorial  we’re  going  to  focus  on  basic  usage  of  the  tools,  similar  to  what  we  did  for  the  DinerDash  game  (mockup  available  here:  http://goo.gl/2IVFN  )  This  means  we’ll  be  focused  on  getting  you  comfortable  with  geometric  shapes  and  arrows.  Once  you’ve  got  that  in  hand,  balsamiq  is  a  great  tool  for  sharing  ideas,  and  helping  you  think  through  sticky  problems  on  your  own.  As  you  start  mocking  up  more,  you’ll  begin  to  realize  how  ideas  are  incomplete  or  frequently  have  implicit  assumptions  that  you’ll  see  how  to  make  explicit,  ultimately  improving  your  communication  of  the  ideas.    **  Note:  Throughout  this  tutorial  mockup  and  prototype  are  used  interchangeably.  These  terms  refer  to  both  individual  mockups  and  a  group  of  mockups  treated  as  a  single  unit.  

1. To  begin,  login  to  the  site,  and  open  your  project.  You  should  see  something  like  this.

   

2. Click  “Add  New  Mockup…”  to  get  started.  Your  browser  will  start  the  application,  and  give  you  a  new  blank  mockup  to  work  with.  

 

     

3. Start  by  opening  the  “Common”  UI  Library,  and  drag  a  “Geometric  Shape”  onto  the  canvas.    

   

4. You’ll  be  prompted  to  enter  text  immediate.  Type  in  “This  is  the  first  state,”  and  then  click  the  canvas  to  stop  editing.  (Shortcut:  You  can  type  cmd-­‐enter  on  OSX,  or  cntrl-­‐enter  on  windows  to  stop  editing).  

5. You  should  now  see  the  Property  Inspector  for  the  geometric  shape.  You  will  also  notice  that  your  shape  doesn’t  show  all  the  text.  Resize  the  shape  so  that  the  text  fits.  

6. Now  that  you’ve  resized  the  shape,  take  a  look  at  the  inspector  to  see  some  of  the  options  it  provides.  Decide  what  shape  you  want  to  use  for  this  mockup,  and  then  move  on.  

   

7. Now  switch  to  the  “Markup”  UI  Library,  and  find  the  “Arrow/Line”  element.  Add  one  to  your  canvas  and  position  it  so  that  it  points  to  the  first  state.  You  should  have  something  that  looks  like  this  now.  

 8. Notice  we  didn’t  add  any  text  to  this  arrow,  but  we  want  to  indicate  that  this  

is  the  starting  point,  so  double-­‐click  the  arrow  to  add  a  label  “START”.  These  kinds  of  labels  help  “readers”  of  the  mockup  later.  

 9. Now  that  you’ve  done  a  little  work,  you  should  make  sure  to  save  your  

mockup  so  you  don’t  loose  it.  You’ll  be  prompted  to  name  the  mockup,  and  provide  any  notes  for  tracking  the  changes  you’ve  made.  When  saving,  

balsamiq  can  also  send  email  to  project  collaborators  notifying  them  of  changes—though  that  isn’t  necessary  this  time,  you  might  find  it  useful  in  the  future.  

 10. At  this  point  it  is  time  to  start  playing.  To  really  solidify  the  use  of  the  tool,  

start  building  the  system  captured  in  the  If  You  Give  a  Mouse  a  Cookie  story.  Try  playing  with  representations,  and  find  what  works  for  you.  The  purpose  is  to  think  about  the  representation,  and  how  you  would  communicate  a  system  to  yourself  and  others,  so  there  is  no  substitute  for  just  doing  it.  Make  sure  you  get  at  least  7  steps  (states)  in  your  mockup,  with  connections,  and  complete  the  cycle.  You  may  abbreviate  the  story  if  you  like  once  you  feel  you  have  a  handle  on  the  tool  use.  

11. When  you’re  done  with  your  work,  save,  and  then  close  the  mockup  (The  “Close”  Button  is  next  to  “Save”).  You’ll  be  returned  to  the  project  view.  

 12.  From  this  screen  you  can  download  the  entire  project  as  a  zip  file,  or  export  

to  a  PDF.    But  read  on  …  

 13. For  showing  your  work  in  your  blog/papers,  you  may  want  to  just  grab  a  

single  mockup.  To  do  that,  click  the  specific  mockup  you  want  to  download.  On  the  next  screen  you’ll  be  able  to  download  the  image  directly  to  use  as  needed.  

     

There  is  a  lot  that  can  be  done  with  prototyping  tools  like  balsamiq.  Think  of  this  as  an  opportunity  for  learning  how  to  develop  ideas,  teach  others,  and  make  your  work  life  better.  As  a  side  note,  being  able  to  communicate  ideas  visually  like  this  can  pay  thousands  of  dollars  an  hour  for  many  consultants  in  software,  policy,  and  business  fields.  This  really  is  about  building  a  valuable  skill  for  your  future.   Balsamiq.com  has  a  set  of  tutorials  that  you  may  find  useful  if  you’d  like  to  advance  your  skills:  http://support.balsamiq.com/customer/portal/topics/49503-­‐tutorials/articles          

 If  you  give  a  Mouse  a  Cookie  By  Laura  Joffe  Numeroff  A  video  reading  of  this  book  is  available  at  http://www.youtube.com/watch?v=YdA_HdYo2NU  (4:26)  if  you  want  to  see  the  original.  This  transcription  provides  the  book  text  with  one  line  per  page.    In  your  mockup  you  are  encouraged  to  represent  the  story  as  a  system  that  makes  sense  to  you,  not  as  the  text  is  written.  Think  of  your  mockup  as  answering  the  question,  “What  is  happening  in  the  story?”    

1. If  you  give  a  mouse  a  cookie,  2. He’s  going  to  ask  for  a  glass  of  milk.  3. When  you  give  him  the  milk,  4. He’ll  probably  ask  you  for  a  straw.  5. When  he’s  finished,  he’ll  ask  for  a  napkin.  6. Then  he’ll  want  to  look  in  a  mirror  to  make  sure  he  doesn’t  have  a  milk  

mustache.  7. When  he  looks  into  the  mirror,  he  might  notice  his  hair  needs  a  trim.  So  he’ll  

probably  ask  for  a  pair  of  nail  scissors.  8. When  he’s  finished  giving  himself  a  trim,  he’ll  want  a  broom  to  sweep  up.  

He‘ll  start  sweeping.  9. He  might  get  carried  away  and  sweep  every  room  in  the  house.  10. He  may  even  end  up  washing  the  floors  as  well.  11. When  he’s  done,  he’ll  probably  want  to  take  a  nap.  12. You’ll  have  to  fix  up  a  little  box  for  him  with  a  blanket  and  a  pillow.  13. He’ll  crawl  in,  make  himself  comfortable  and  fluff  that  pillow  a  few  times.  

He’ll  probably  ask  you  to  read  him  a  story.  14. So  you’ll  read  to  him  from  one  of  your  books  and  he’ll  ask  to  see  the  pictures.    15. When  he  looks  at  the  pictures,  he’ll  get  so  excited  he’ll  want  to  draw  one  of  

his  own.  He’ll  ask  for  paper  and  crayons.  16. He’ll  draw  a  picture.  17. When  the  picture  is  finished,  18.  He’ll  want  to  sign  his  name  19. with  a  pen.  20. Then  he’ll  want  to  hang  his  picture  on  your  refrigerator.  Which  means  he’ll  

need  21. Scotch  tape.  22. He’ll  hang  up  his  drawing  and  stand  back  to  look  at  it.  Looking  at  the  

refrigerator  will  remind  him  that  23. He’s  thirsty.  24. So…  25. He’ll  ask  for  a  glass  of  milk.  26. And  chances  are  that  if  he  asks  for  a  glass  of  milk,  27. He’s  going  to  want  a  cookie  to  go  with  it.