Storyboarding the User Interface: Blueprint for an Application

1. Storyboarding the User Interface:Blueprint for an Application Shanaz Kanga | Michele Sarko Sr. UI Design Engineer | Manager, User Experience Group

2. Agenda • What is Storyboarding? • Driving Storyboarding in Your Organization • Some Examples and Success Stories • “How To” Tips • Conclusions

3. What is a Storyboard? A user interface storyboard is a visual script or a blueprint of everything that will be contained in an application or website.

4. Examples of Storyboards in other media • Successfully used in many fields: • Film production • Architecture • Advertising

5. Example – Film Production • Sketch representation of the film • Storyboards are an integral part of film and video production from the first creative and planning sessions to the final edit.

6. Example – Architecture E.g. You want to build your dream house. • List requirements • Meet the Architect - draft blueprints

7. Example – Architecture (cont.) • Structural, Electrical, Plumbing Consultants, etc... • See the look of the house before it is built • Catch potential problems • Proceed with construction • You have saved time and money ! • Common point of reference to verify structural and content elements

8. Example – Advertising • Using wooden mannequins to create a storyboard instead of sketches or drawings

9. Example – Advertising (cont.) • Storyboards for a beer commercial

10. Quote by Architect, Le Corbusier “I prefer drawing to talking. Drawing is faster, and leaves less room for lies.” - Le Corbusier

11. Comparison Typical Architectural Development Timeline Typical Application Development Timeline

12. Example of a Storyboard for an Application

13. What Storyboarding IS • Means of visual communication • A working image of the product in its preliminary stage • Storyboards can be tested with users to verify the usability • Example

14. What Storyboarding IS NOT • List of Functional Requirements • Task Flow Charts • Template • User Interface style Guide • Marketing Requirements Document

15. Need for Storyboarding • Short development time - careful planning • Provides common point of reference for multidisciplinary teams • People have difficulty visualizing an end product • Focus on total content of the program • Reduces bugs

16. Need for Storyboarding (cont.) • Cuts development time and costs • Ensures the user interface meets the requirements • Allows for usability test of the storyboards • Saves time for QA and Technical Writers • Helps new developers get up to speed • Helps build an elegant and concise solution • Ensures a common vision!

17. Perfect Fit into the Dev. Cycle Provide common vision to cross-functional groups • Development • Quality Assurance • Technical Writers • User Experience Group • Product Marketing

18. Perfect Fit into the Dev. cycle (cont.) Product Design Lifecycle.

19. Agenda (cont.) • What is Storyboarding? • Driving Storyboarding in Your Organization • Some Examples and Success Stories • “How To” Tips • Conclusions

20. Common Barriers to Storyboarding • Product Management and Development teams view storyboarding as additional work • Don’t understand the value of storyboarding • Concern about impacting product release schedules • Resist change - we’ve never done this before!

21. How to Get Buy-in From All Teams • Focus on the benefits of storyboarding to developers and management • Understand current problems during development • After first few storyboard sessions, Development and Product Management teams are fully on-board! • Focus on the results – money & time saved

22. Success Rates

23. Success Rates (cont.)

24. Agenda (cont.) • What is Storyboarding? • Driving Storyboarding in Your Organization • Some Examples and Success Stories • “How To” Tips • Conclusions

25. Example of a Storyboard

26. Example of a Storyboard

27. Example of a Storyboard

28. Remedy Success Story: The Process • Started at the beginning of development cycle • Product Management gave the requirements • Storyboards were developed • Got all cross-functional teams on board • Increased the bandwidth for discussions • Went through iterations to resolve concerns • Final storyboard packet • Sign off

29. Remedy Success Story: The Results • Tech writers could start documenting • QA could start their test plans • Developers had a common vision to start • Everyone on same page • Fewer bugs filed • Easier to use • Product Management shows screens to customers

30. Ex. 1 - Scenario for a Storyboard • Storyboard for Project – Moving Company XYZ • Company XYZ has been expanding in the last few years. The hiring rate has gone up. They have grown from 50+ to 150+ employees in 2 years. They need more office space to solve the current space issue for future expansion. The top executive decided it is time for the company to move to a new location. • Roles - • Requester • Support • Management

31. Ex. 1 (cont.) - Initial Screen with Edits

32. Ex. 1 (cont.) - Iteration with Edits

33. Ex. 1 (cont.)- Final Screen

34. Ex. 2 - Initial Sketch

35. Ex. 2 (cont.) - Iteration with Edits

36. Ex. 2 (cont.) - Final Screen

37. Ex. 3 - Initial Screen with edits

38. Ex. 3 (cont.) - Iteration with edits

39. Ex. 3 (cont.) - Final Storyboard

40. Agenda (cont.) • What is Storyboarding? • Driving Storyboarding in Your Organization • Some Examples and Success Stories • “How To” Tips • Conclusions

41. Storyboarding : “How To” Tips To create a prototype of how the finished product will look : • Create a scenario with different user roles based on which the storyboard will be developed • Identify elements to go on a page • Organize elements on the page • Group areas that go together • Create a consecutive flow of the interaction sequence

42. Storyboarding : “How To” Tips (cont.) • Include text, questions or comments if necessary • Get feedback • Iterations of the storyboard to include changes, if any • Sign-off

43. Storyboarding: “How To” Tips (cont.) • Create Visio flows for management teams • Work with developers to make iterations • Human Factors group can uncover problems that the Product Management might have • To begin with, give more help than they expect or need – it will pay back in dividends • Ownership – any team can “own” the storyboard once it is signed off by design and usability teams and is good to go

44. Agenda (cont.) • What is Storyboarding? • Driving Storyboarding in Your Organization • Some Examples and Success Stories • “How To” Tips • Conclusions

45. Conclusion • Ensures a common vision • Allows for careful planning • Helps teams to make a better design decision • Makes existing ideas more concrete • Cuts development time and costs • Allows for an elegantly designed solution

46. Storyboarding Questions?