1. Confidential and Proprietary © 2007 Blast Radius Inc. IA for Rich Interaction: Tools and Techniques from the Trenches Anthony Hempell | Manager, Usability & Interaction Adrian Chong | Interaction Architect

2. Introductions Anthony Hempell, Manager of Usability and Interaction Architecture, Blast Radius Adrian Chong, Interaction Architect, Blast Radius

3. San Francisco Vancouver New York Amsterdam Toronto Founded in 1996 Customer Experience Innovation: Consumer-Focused 350 Employees Blast Radius

4. Blast Radius: Clients

5. What we’re going to talk about Anthony: documenting user types and complex interactions in wireframes. Adrian: hyperlinking user flows; using drawing tools to demonstrate interactive content; using prototyping.

6. User types and complex interactions Anthony Hempell

7. Client: DIRECTV Largest satellite TV service in the US 15+ million subscribers DIRECTV.com: full redesign; 18 months Branding, IA, usability, functional redesign, new features

8. Documenting user types: issues Communicate different user types (anonymous, non- member, member) Show the material differences between states for front-end and back-end teams One user can transition between multiple types over months, weeks or even during a session. Complex business rules

9. User Personas Customers Sports Fans Movie Watchers Variety Seekers Loyal, but risk of moving to better offers Prospects DISH Subscribers Cable Subscribers Looking to switch or to upgrade TV experience

10. Anonymous ProspectsMembers Return prospect Registered prospect Authenticated Registered prospect Registered Member Authenticated Registered Member Generic Member Anonymous Registered prospect Anonymous Registered Member

11. User type definition

12. Mapping user type & system actions

13. Mapping user type transitions

14. Adding user types to site maps / flows

15. Adding user types to wireframes

16. Documenting user types: solutions Create coded system representing user types for use on all documentation Spend the time necessary to come up with the correct number of user types How users think of themselves vs. how the system identifies users Careful of the names you choose for your user types (controlled vocabulary)

17. DIRECTV: State transitions / storyboard Challenges: Diagramming transitions between different interface elements based on user actions Use of AJAX/Flash as presentation layer Complex workflows A lot of reviews were done over the phone

18. Solution? Cram as much stuff onto one page as humanly possible!

19. Storyboard transitions: Add element

20. Storyboard transitions: “filmstrip”

21. Storyboard transitions: Selection bar

22. Storyboard transitions: too much detail

23. Mapping Flows: too many on one page

24. State transitions / storyboards: solutions Purpose is to communicate flow Try to keep one flow per page Use diagrams to draw attention to similarities and differences between states Include only relevant detail

25. Hyperlinking, Tracing, and Prototyping Adrian Chong

26. Hyperlinking with Visio 2007 Visio 2007 has an export to PDF function This allows for PDFs to hyperlink from one page to another. No more saving as a web page Agnes Misiurny has put together a tutorial that talks about hyperlinking and a few other tips with Visio which we will make available. http://www.anthonyhempell.com/papers/RIA/ http://www.anthonyhempell.com/papers/RIA/

27. Canadian Tourism Commission

31. Lessons Learned Hyperlinking can be useful for orientation It would be nice to highlight parts of the flow diagram

32. Need for Speed Carbon Autosculpt

34. Anchor Point Pen Tool

35. Hold the Alt key

40. Lessons Learned Illustrating aspects of the interaction saves a lot writing Useful when interaction cannot be described with boxes and arrows Doesn’t take that long Clients react very positively and get a better sense of what you’re trying to build

41. EA Madden 07 EA’s largest sports franchise Coaches Corner Stats Gamecast

42. Ideas in here

44. Lessons Learned A working prototyping requires a client who has a lot of time to devote to the project Takes time, money, energy Results in a happy client who will get what they envisioned

45. Documentation Landscape

46. Contacts Anthony Hempell Mgr of Usability and Interaction anthony.hempell@blastradius.com Adrian Chong Interaction Architect adrian.chong@blastradius.com

47. Discussion / Questions