Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
UX Alive Conference speaker is Ashwin Sodhi presentations
Next

1

Share

Writing Storyboards

1st KT Econovation Open Conference
2nd Session Presentation

Related Books

Free with a 30 day trial from Scribd

See all

Writing Storyboards

  1. 1. Writing Storyboards Jay Cho at Waplestore Inc.
  2. 2. ?
  3. 3. 2 Developers
  4. 4. 2 Developers 1 Designer
  5. 5. 2 Developers 1 Designer No Planners
  6. 6. 3 Developers
  7. 7. 3 Developers 2 Designers
  8. 8. 3 Developers 2 Designers No Planners
  9. 9. Therefore,
  10. 10. No Storyboards in traditional meaning
  11. 11. T^T
  12. 12. Instead,
  13. 13. Share how weʼre doing,
  14. 14. Share how weʼre doing, Answer your questions!
  15. 15. 1. Storyboard?
  16. 16. Before we get started...
  17. 17. Great Ideas?
  18. 18. Great Ideas? Top Secrets?
  19. 19. Great Ideas? Top Secrets? Well...
  20. 20. No Great Ideas, Without Executions!
  21. 21. First-step of Execution is, Storyboard!
  22. 22. Prejudices of storyboard
  23. 23. Itʼs formal! It should be thick PPT-typed Documents
  24. 24. Itʼs formal! It should be thick PPT-typed Documents Itʼs not my job! It was usually plannerʼs
  25. 25. Yes, but...
  26. 26. Great Tools to organize your own ideas
  27. 27. Great Tools to organize your own ideas Wonderful Methods to share the ideas in your head with others
  28. 28. Great Tools to organize your own ideas Wonderful Methods to share the ideas in your head with others Perfect Pre-Designs to reduce logical mistakes on development time
  29. 29. in traditional Meanings
  30. 30. Yes, but...
  31. 31. In App Development,
  32. 32. In App Development, UI & Logic are tightly coupled
  33. 33. In App Development, UI & Logic are tightly coupled API & Resource are limited
  34. 34. Case Study : SmartDialer™
  35. 35. Keypad Based Contacts Search Application
  36. 36. Keypad Based Contacts Search Application ✓ Our First Project ✓ Designer-driven Process ✓ Take 3 weeks for Development
  37. 37. Keypad Based Contacts Search Application ✓ Our First Project ✓ Designer-driven Process ✓ Take 3 weeks for Development ✓ Use System API : Phone Call, SMS Send ✓ Use Default UI : ABAddressBookUI ✓ Make Custom Designed TabBar Controller
  38. 38. Keypad Based Contacts Search Application ✓ Our First Project ✓ Designer-driven Process Cause of Problems! ✓ Take 3 weeks for Development ✓ Use System API : Phone Call, SMS Send ✓ Use Default UI : ABAddressBookUI ✓ Make Custom Designed TabBar Controller
  39. 39. Use System API Use Default UI Make Custom Controller
  40. 40. Use System API cause of changing our plan Use Default UI Make Custom Controller
  41. 41. Use System API cause of changing our plan Use Default UI cause of changing our design Make Custom Controller
  42. 42. Use System API cause of changing our plan Use Default UI cause of changing our design Make Custom Controller cause of taking more time to develop
  43. 43. Thus, you better help plannerʼs job!
  44. 44. 2. Storyboard Tools
  45. 45. Traditional PPT
  46. 46. Traditional PPT Some Images Descriptions
  47. 47. Photoshop UI Kit
  48. 48. Hand Drawing Tools http://www.uistencils.com/products/iphone-stencil-kit
  49. 49. Mind Map
  50. 50. Wiki
  51. 51. And, anything you feel free to use!
  52. 52. 3. Writing Storyboard
  53. 53. Idea
  54. 54. Write Idea Requirements
  55. 55. Write Adjust & Fix Idea Requirements Requirements
  56. 56. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views
  57. 57. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views Draw Main View
  58. 58. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views Put Draw Sub Views Main View (Flowchart)
  59. 59. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views Put Draw Draw Sub Views Main View Sub Views (Flowchart)
  60. 60. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views Put Draw Draw Sub Views Storyboard Main View Sub Views (Flowchart) Done!
  61. 61. Group Write Adjust & Fix Idea Requirements Requirements Requirements by Views Put Draw Draw Sub Views Storyboard Main View Sub Views (Flowchart) Done!
  62. 62. Case Study : SmartTimer™
  63. 63. Timer Application For Effective Conference ✓ Role based Project ✓ Take 2 weeks for Development
  64. 64. Idea
  65. 65. Write Requirements
  66. 66. Write Requirements • Choose Timer As Simple As Possible
  67. 67. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert
  68. 68. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time
  69. 69. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar
  70. 70. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie
  71. 71. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File
  72. 72. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File • Send Recorded Voice File via Email
  73. 73. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File • Send Recorded Voice File via Email • Changeable Alert Sound
  74. 74. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File • Send Recorded Voice File via Email • Changeable Alert Sound • Changeable Mic Gain
  75. 75. Write Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File • Send Recorded Voice File via Email • Changeable Alert Sound • Changeable Mic Gain • Changeable Record File Format
  76. 76. Adjust & Fix Requirements • Choose Timer As Simple As Possible • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice & Movie • Play Recorded Voice File • Send Recorded Voice File via Email • Changeable Alert Sound • Changeable Mic Gain • Changeable Record File Format
  77. 77. Adjust & Fix Requirements • Choose Timer As Simple As Possible Use Default • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar Make Custom • Record Voice & Movie Removed • Play Recorded Voice File Make Custom • Send Recorded Voice File via Email Use Default • Changeable Alert Sound • Changeable Mic Gain • Changeable Record File Format
  78. 78. Group Requirements by Views • Main (Time Select) • Choose Timer As Simple As Possible • Timer View • Divide Time by 80:20 rule and Alert • Display Remain Time • Display Progressive Bar • Record Voice • Player View • Play Recorded Voice File • Send Recorded Voice File via Email • Settings View • Changeable Alert Sound • Changeable Mic Gain • Changeable Record File Format
  79. 79. Draw Main View
  80. 80. Put Sub Views Player View Settings View Timer View
  81. 81. Draw Sub Views
  82. 82. 4. Choose Your Own
  83. 83. Solo?
  84. 84. Smallest is good for you! Just note is enough, but you may try Mind Map or Wiki for later.
  85. 85. Team?
  86. 86. Focus on sharing, Find the best tool for your team! Try Wiki, Mind Map first. You may need traditional documents, especially when youʼre on out-sourced project.
  87. 87. Case Study : Waplestore Inc.
  88. 88. The Point is, finding your own way is most important for your storyboard!
  89. 89. Remember This!
  90. 90. Storyboard is the best tool to organize ideas to share this with others to reduce your mistakes!
  91. 91. You should write a storyboard to imagine the whole details of your application
  92. 92. Try to find your own ways, and try it to fit with your team!
  93. 93. Questions?
  94. 94. More Questions?
  95. 95. Visit Our Website http://www.waplestore.com Drop a mail to us support@waplestore.com Follow our twitter @waplestore
  96. 96. Or, Just visit our office anytime! for YOU!
  97. 97. Thank you! WE HOPE TO SEE YOU AGAIN :)
  • bienpop

    Oct. 27, 2012

1st KT Econovation Open Conference 2nd Session Presentation

Views

Total views

2,045

On Slideshare

0

From embeds

0

Number of embeds

322

Actions

Downloads

1

Shares

0

Comments

0

Likes

1

×