This document discusses the convergence of Agile processes and user experience (UX) design, and how tools like Ext JS can help facilitate collaboration between teams. It provides an overview of the author's background and experience with Agile, UX, and technologies like Ext JS. Key points discussed include using high-fidelity wireframes and prototypes to reduce risk, maintaining a shared understanding between teams, and how Ext JS can serve as both a design pattern library and a tool to help distribute design work across location-independent teams.

1. January 23, 2010Agile + UX

2. “ART becomes SCIENCE becomes ENGINEERING”IDEAS become BEST PRACTICES become TOOLS [and DELIVERABLES]Agile + UX

3. 1991 - Virginia Tech Engineering Fundamentals1993 – 1999 Corcoran School of Art Fine Arts/ New Media1995 Sheridan DesignPublic Art, murals, Community Art projects1996 – 1999 Architecture1999 – 2001 .COMMultimedia & web application design2001 – 2005 Pay.govUI design/ SDLC Process2005 - CloverLeaf ConsultingUX/ Agile Process2009 – Georgetown International Business (MBA)2009 Three Pillar GlobalMe (Pat Sheridan)

4. AgileCollocation of teams(XP) Peer programmingUser StoriesIterations/ SprintsStories, Tasks, and PointsBacklogVelocity/ BurndownRetrospectivesUXUser centered designInformation architectureContent strategyVisual designDesign patternsView componentsTask flow/ interaction designProcess Maturity and Convergence

5. Competition – Old ThinkingCollaboration – New ThinkingProduct: Closed SourceProcess: Project/Date FocusedTeams: Segmented Skills/ InputDate driven, “Done yet?”hierarchicalProcess: 50% TransparentDesign:All up front (waterfall)All at the end (lipstick) Product: Open SourceProcess: Business Value / Priority FocusedTeams:InterdisciplinaryScope driven sprintsFlatProcess: 100% TransparentDesign:Integrated throughoutCollaboration makes for unbeatable Competition

6. Understand tasks at the most granular levelManage Risk and ComplexityEvaluate UI/UX choices as OptionsScope is Everything

7. Envision SessionDesign iterations ahead of Dev iterationsImportance of BacklogOngoing FeedbackProcess

8. Story ListStory DependencyMental ModelWireframesDeliverables

9. RIA: Reaching the Next Plateau

10. Toolset Maturity + Process ConvergenceProcess MaturityPlatform MaturityDevice MaturityData visualizationGrids, charts, graphs, mapsUser Maturity – customization and control‘User Directed Interfaces’ as opposed to ‘design for user’RIA: Reaching the Next Plateau

11. Changing frame of reference

12. Communication ChallengesWeb 2.0, 3.0, Drag-and-Drop, ZZZzzzzzzInvalidated notions of finished statesReference the way successful sites LOOKReference the way successful sites ACTMint.comAnything GoogleAnything Desktop, fat client experienceChanging frame of reference

13. How people work:Determining Risk and ComplexityLack of knowledge of ‘Big App’ developmentLack of pattern knowledge on the infrastructure side of RIAKnowledge Gap – ‘Honest Mistakes’Customers/Designers don’t know what is available in the toolboxSerialized analysis/ design cyclesToo much customizationConsistency to a faultInconsistent business rules for a ‘consistent’ UIWhere Things go Wrong

14. Working: Quicker Feedback/ Dev iterationsDesigningFocus on Interactions and re-useDesign Pattern LibraryDesign Component Library [Style Guide]DevelopingCustom ComponentsAesthetics: Renderer/ Templates/ ThemesSquaring the Circle

15. Modals/ ErrorForm ValidationSearch/ Find / BrowseNavigation vs. ActionExt JS as Design Pattern Library

16. Agile + Ext JS + Omnigraffle

17. Meeting FacilitationHigh resolution wireframes remove Hand Waving + Leap of FaithConstraints on DesignWorking ‘with’ or ‘against’ the FrameworkScope/LOEConsistencyAgile + Ext JS + Omnigraffle

18. Agile: Story Mental Model

19. Agile: Story Dependency

20. Agile: Story Dependency

21. Agile + Ext JS + Omnigraffle

22. Deliverables: Wireframes (Low-Res)

23. Ext JS Wireframes

24. Ext JS Wireframing

25. 25Focus on conversations not documentationFebruary 2, 2011

26. Maintaining shared understandingAgile UXPrototype driven analysisBusiness, customer, and dev team stakeholders Text based ‘wireframes’Ext JS Component architecture allows for meta-code descriptionsTPG EnvisionDistributed DesignLocation independent teams/ interdisciplinary skills/ skill levelsProcess maturity, deliverables, infrastructureDistributed Design

27. DevelopersCommon language for discussion w/ designersAPI, Docs, examplesCustomersHighly visual deliverables80%/20% out of the boxUX/ Interaction DesignersExt JS DesignerExt JS example site == Design Pattern LibraryOmnigraffle Stencil == Rapid PrototypingExt JS Designer!!What’s in it for me?

28. Happy Coding!