Storyboarding the User Interface Blueprint for an Application

Storyboarding the User Interface: Blueprint for an Application Shanaz Kanga | Michele Sarko Sr. UI Design Engineer | Manager, User Experience Group Remedy, a BMC Software company

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

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.

Examples of Storyboards in other media § Successfully used in many fields: Film production – Architecture – Advertising –

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.

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

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

Example – Advertising § Using wooden mannequins to create a storyboard instead of sketches or drawings

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

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

Comparison Typical Architectural Development Timeline Typical Application Development Timeline

Example of a Storyboard for an Application

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

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

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

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!

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

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

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

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!

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

Success Rates

Success Rates (cont. )

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

Example of a Storyboard

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

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

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

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

Ex. 1 (cont. ) - Iteration with Edits

Ex. 1 (cont. )- Final Screen

Ex. 2 - Initial Sketch

Ex. 2 (cont. ) - Iteration with Edits

Ex. 2 (cont. ) - Final Screen

Ex. 3 - Initial Screen with edits

Ex. 3 (cont. ) - Iteration with edits

Ex. 3 (cont. ) - Final Storyboard

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

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

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

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

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

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

Storyboarding Questions?