Storyboarding the User Interface: Blueprint for an Application

46
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

description

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 - PowerPoint PPT Presentation

Transcript of Storyboarding the User Interface: Blueprint for an Application

Page 1: Storyboarding the User Interface: Blueprint for an Application

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

Page 2: Storyboarding the User Interface: Blueprint for an Application

Agenda

What is Storyboarding? Driving Storyboarding in Your

Organization Some Examples and Success

Stories “How To” Tips Conclusions

Page 3: Storyboarding the User Interface: Blueprint for an Application

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.

Page 4: Storyboarding the User Interface: Blueprint for an Application

Examples of Storyboards in other media

Successfully used in many fields:– Film production – Architecture– Advertising

Page 5: Storyboarding the User Interface: Blueprint for an Application

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.

Page 6: Storyboarding the User Interface: Blueprint for an Application

Example – Architecture

E.g. You want to build your dream house.

List requirements Meet the

Architect - draft blueprints

Page 7: Storyboarding the User Interface: Blueprint for an Application

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

Page 8: Storyboarding the User Interface: Blueprint for an Application

Example – Advertising

Using wooden mannequins to create a storyboard instead of sketches or drawings

Page 9: Storyboarding the User Interface: Blueprint for an Application

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

Page 10: Storyboarding the User Interface: Blueprint for an Application

Quote by Architect, Le Corbusier

“I prefer drawing to talking. Drawing is faster, and leaves less room for lies.”

- Le Corbusier

Page 11: Storyboarding the User Interface: Blueprint for an Application

Comparison

Typical Architectural Development Timeline

Typical Application Development Timeline

Page 12: Storyboarding the User Interface: Blueprint for an Application

Example of a Storyboard for an Application

Page 13: Storyboarding the User Interface: Blueprint 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

Page 14: Storyboarding the User Interface: Blueprint for an Application

What Storyboarding IS NOT

List of Functional Requirements

Task Flow Charts Template User Interface style

Guide Marketing Requirements

Document

Page 15: Storyboarding the User Interface: Blueprint for an Application

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

Page 16: Storyboarding the User Interface: Blueprint for an Application

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!

Page 17: Storyboarding the User Interface: Blueprint for an Application

Perfect Fit into the Dev. Cycle

Provide common vision to cross-functional groups

Development Quality Assurance Technical Writers User Experience Group Product Marketing

Page 18: Storyboarding the User Interface: Blueprint for an Application

Perfect Fit into the Dev. cycle (cont.)

Product Design Lifecycle.

Page 19: Storyboarding the User Interface: Blueprint for an Application

Agenda (cont.)

What is Storyboarding? Driving Storyboarding in Your

Organization Some Examples and Success

Stories “How To” Tips Conclusions

Page 20: Storyboarding the User Interface: Blueprint for an Application

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!

Page 21: Storyboarding the User Interface: Blueprint for an Application

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

Page 22: Storyboarding the User Interface: Blueprint for an Application

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

Page 23: Storyboarding the User Interface: Blueprint for an Application

Success Rates (cont.)

Page 24: Storyboarding the User Interface: Blueprint for an Application

Agenda (cont.)

What is Storyboarding? Driving Storyboarding in Your

Organization Some Examples and Success

Stories “How To” Tips Conclusions

Page 25: Storyboarding the User Interface: Blueprint for an Application

Example of a Storyboard

Page 26: Storyboarding the User Interface: Blueprint for an Application

Example of a Storyboard

Page 27: Storyboarding the User Interface: Blueprint for an Application

Example of a Storyboard

Page 28: Storyboarding the User Interface: Blueprint for an Application

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

Page 29: Storyboarding the User Interface: Blueprint for an Application

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

Page 30: Storyboarding the User Interface: Blueprint for an Application

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

Page 31: Storyboarding the User Interface: Blueprint for an Application

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

Page 32: Storyboarding the User Interface: Blueprint for an Application

Ex. 1 (cont.) - Iteration with Edits

Page 33: Storyboarding the User Interface: Blueprint for an Application

Ex. 1 (cont.)- Final Screen

Page 34: Storyboarding the User Interface: Blueprint for an Application

Ex. 2 - Initial Sketch

Page 35: Storyboarding the User Interface: Blueprint for an Application

Ex. 2 (cont.) - Iteration with Edits

Page 36: Storyboarding the User Interface: Blueprint for an Application

Ex. 2 (cont.) - Final Screen

Page 37: Storyboarding the User Interface: Blueprint for an Application

Ex. 3 - Initial Screen with edits

Page 38: Storyboarding the User Interface: Blueprint for an Application

Ex. 3 (cont.) - Iteration with edits

Page 39: Storyboarding the User Interface: Blueprint for an Application

Ex. 3 (cont.) - Final Storyboard

Page 40: Storyboarding the User Interface: Blueprint for an Application

Agenda (cont.)

What is Storyboarding? Driving Storyboarding in Your

Organization Some Examples and Success

Stories “How To” Tips Conclusions

Page 41: Storyboarding the User Interface: Blueprint for an Application

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

Page 42: Storyboarding the User Interface: Blueprint for an Application

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

Page 43: Storyboarding the User Interface: Blueprint for an Application

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

Page 44: Storyboarding the User Interface: Blueprint for an Application

Agenda (cont.)

What is Storyboarding? Driving Storyboarding in Your

Organization Some Examples and Success

Stories “How To” Tips Conclusions

Page 45: Storyboarding the User Interface: Blueprint for an Application

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

Page 46: Storyboarding the User Interface: Blueprint for an Application

Storyboarding

Questions?