remedy, a bmc software company storyboarding the user interface: blueprint for an application shanaz...
TRANSCRIPT
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
Boehm's Software Engineering Economics
40-1000x
30-70x
15-40x
10x
3-6x1x
RequirementsPhase
Design Phase Coding Phase Dev Testing Accept Testing Operation
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
Example of a Storyboard
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?