January 23, 2010<br />Agile + UX<br />
“ART becomes SCIENCE becomes ENGINEERING”<br />IDEAS become BEST PRACTICES become TOOLS [and DELIVERABLES]<br />Agile + UX...
1991 - Virginia Tech <br />Engineering Fundamentals<br />1993 – 1999 Corcoran School of Art <br />Fine Arts/ New Media<br ...
Agile<br />Collocation of teams<br />(XP) Peer programming<br />User Stories<br />Iterations/ Sprints<br />Stories, Tasks,...
Competition – Old Thinking<br />Collaboration – New Thinking<br />Product: Closed Source<br />Process: Project/Date Focuse...
Understand tasks at the most granular level<br />Manage Risk and Complexity<br />Evaluate UI/UX choices as Options<br />Sc...
Envision Session<br />Design iterations ahead of Dev iterations<br />Importance of Backlog<br />Ongoing Feedback<br />Proc...
Story List<br />Story Dependency<br />Mental Model<br />Wireframes<br />Deliverables<br />
RIA: Reaching the Next Plateau<br />
Toolset Maturity + Process Convergence<br />Process Maturity<br />Platform Maturity<br />Device Maturity<br />Data visuali...
Changing frame of reference<br />
Communication Challenges<br />Web 2.0, 3.0, Drag-and-Drop, ZZZzzzzzz<br />Invalidated notions of finished states<br />Refe...
<ul><li>How people work:</li></ul>Determining Risk and Complexity<br />Lack of knowledge of ‘Big App’ development<br />Lac...
Working: Quicker Feedback/ Dev iterations<br />Designing<br />Focus on Interactions and re-use<br />Design Pattern Library...
Modals/ Error<br />Form Validation<br />Search/ Find / Browse<br />Navigation vs. Action<br />Ext JS as Design Pattern Lib...
Agile + Ext JS + Omnigraffle<br />
Meeting Facilitation<br />High resolution wireframes remove Hand Waving + Leap of Faith<br />Constraints on Design<br />Wo...
Agile: Story Mental Model<br />
Agile: Story Dependency<br />
Agile: Story Dependency<br />
Agile + Ext JS + Omnigraffle<br />
Deliverables: Wireframes (Low-Res)<br />
Ext JS Wireframes<br />
Ext JS Wireframing<br />
25<br />Focus on conversations not documentation<br />February 2, 2011<br />
Maintaining shared understanding<br />Agile UX<br />Prototype driven analysis<br />Business, customer, and dev team stakeh...
Developers<br />Common language for discussion w/ designers<br />API, Docs, examples<br />Customers<br />Highly visual del...
Happy Coding!<br />
Upcoming SlideShare
Loading in...5
×

UXCampDC 2010 - Agile UX

1,224

Published on

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,224
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

UXCampDC 2010 - Agile UX

  1. 1. January 23, 2010<br />Agile + UX<br />
  2. 2. “ART becomes SCIENCE becomes ENGINEERING”<br />IDEAS become BEST PRACTICES become TOOLS [and DELIVERABLES]<br />Agile + UX<br />
  3. 3. 1991 - Virginia Tech <br />Engineering Fundamentals<br />1993 – 1999 Corcoran School of Art <br />Fine Arts/ New Media<br />1995 Sheridan Design<br />Public Art, murals, Community Art projects<br />1996 – 1999 Architecture<br />1999 – 2001 .COM<br />Multimedia & web application design<br />2001 – 2005 Pay.gov<br />UI design/ SDLC Process<br />2005 - CloverLeaf Consulting<br />UX/ Agile Process<br />2009 – Georgetown International Business (MBA)<br />2009 Three Pillar Global<br />Me (Pat Sheridan)<br />
  4. 4. Agile<br />Collocation of teams<br />(XP) Peer programming<br />User Stories<br />Iterations/ Sprints<br />Stories, Tasks, and Points<br />Backlog<br />Velocity/ Burndown<br />Retrospectives<br />UX<br />User centered design<br />Information architecture<br />Content strategy<br />Visual design<br />Design patterns<br />View components<br />Task flow/ interaction design<br />Process Maturity and Convergence<br />
  5. 5. Competition – Old Thinking<br />Collaboration – New Thinking<br />Product: Closed Source<br />Process: Project/Date Focused<br />Teams: <br />Segmented Skills/ Input<br />Date driven, “Done yet?”<br />hierarchical<br />Process: 50% Transparent<br />Design:<br />All up front (waterfall)<br />All at the end (lipstick) <br />Product: Open Source<br />Process: Business Value / Priority Focused<br />Teams:<br />Interdisciplinary<br />Scope driven sprints<br />Flat<br />Process: 100% Transparent<br />Design:<br />Integrated throughout<br />Collaboration makes for unbeatable Competition<br />
  6. 6. Understand tasks at the most granular level<br />Manage Risk and Complexity<br />Evaluate UI/UX choices as Options<br />Scope is Everything<br />
  7. 7. Envision Session<br />Design iterations ahead of Dev iterations<br />Importance of Backlog<br />Ongoing Feedback<br />Process<br />
  8. 8. Story List<br />Story Dependency<br />Mental Model<br />Wireframes<br />Deliverables<br />
  9. 9. RIA: Reaching the Next Plateau<br />
  10. 10. Toolset Maturity + Process Convergence<br />Process Maturity<br />Platform Maturity<br />Device Maturity<br />Data visualization<br />Grids, charts, graphs, maps<br />User Maturity – customization and control<br />‘User Directed Interfaces’ as opposed to ‘design for user’<br />RIA: Reaching the Next Plateau<br />
  11. 11. Changing frame of reference<br />
  12. 12. Communication Challenges<br />Web 2.0, 3.0, Drag-and-Drop, ZZZzzzzzz<br />Invalidated notions of finished states<br />Reference the way successful sites LOOK<br />Reference the way successful sites ACT<br />Mint.com<br />Anything Google<br />Anything Desktop, fat client experience<br />Changing frame of reference<br />
  13. 13. <ul><li>How people work:</li></ul>Determining Risk and Complexity<br />Lack of knowledge of ‘Big App’ development<br />Lack of pattern knowledge on the infrastructure side of RIA<br />Knowledge Gap – ‘Honest Mistakes’<br />Customers/Designers don’t know what is available in the toolbox<br />Serialized analysis/ design cycles<br />Too much customization<br />Consistency to a fault<br />Inconsistent business rules for a ‘consistent’ UI<br />Where Things go Wrong<br />
  14. 14. Working: Quicker Feedback/ Dev iterations<br />Designing<br />Focus on Interactions and re-use<br />Design Pattern Library<br />Design Component Library [Style Guide]<br />Developing<br />Custom Components<br />Aesthetics: Renderer/ Templates/ Themes<br />Squaring the Circle<br />
  15. 15. Modals/ Error<br />Form Validation<br />Search/ Find / Browse<br />Navigation vs. Action<br />Ext JS as Design Pattern Library<br />
  16. 16. Agile + Ext JS + Omnigraffle<br />
  17. 17. Meeting Facilitation<br />High resolution wireframes remove Hand Waving + Leap of Faith<br />Constraints on Design<br />Working ‘with’ or ‘against’ the Framework<br />Scope/LOE<br />Consistency<br />Agile + Ext JS + Omnigraffle<br />
  18. 18. Agile: Story Mental Model<br />
  19. 19. Agile: Story Dependency<br />
  20. 20. Agile: Story Dependency<br />
  21. 21. Agile + Ext JS + Omnigraffle<br />
  22. 22. Deliverables: Wireframes (Low-Res)<br />
  23. 23. Ext JS Wireframes<br />
  24. 24. Ext JS Wireframing<br />
  25. 25. 25<br />Focus on conversations not documentation<br />February 2, 2011<br />
  26. 26. Maintaining shared understanding<br />Agile UX<br />Prototype driven analysis<br />Business, customer, and dev team stakeholders <br />Text based ‘wireframes’<br />Ext JS Component architecture allows for meta-code descriptions<br />TPG Envision<br />Distributed Design<br />Location independent teams/ interdisciplinary skills/ skill levels<br />Process maturity, deliverables, infrastructure<br />Distributed Design<br />
  27. 27. Developers<br />Common language for discussion w/ designers<br />API, Docs, examples<br />Customers<br />Highly visual deliverables<br />80%/20% out of the box<br />UX/ Interaction Designers<br />Ext JS Designer<br />Ext JS example site == Design Pattern Library<br />Omnigraffle Stencil == Rapid Prototyping<br />Ext JS Designer!!<br />What’s in it for me?<br />
  28. 28. Happy Coding!<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×