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

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?