uxcampdc 2010 - agile ux

January 23, 2010

Agile + UX

©COPYRIGHT 2009 Three Pillar Global, Inc., All Rights Reserved

“ART becomes SCIENCE becomes ENGINEERING”

IDEAS become BEST PRACTICES become TOOLS [and DELIVERABLES]

Agile + UX


• 1991 - Virginia Tech – Engineering Fundamentals

• 1993 – 1999 Corcoran School of Art – Fine Arts/ New Media

• 1995 Sheridan Design– Public Art, murals, Community

Art projects• 1996 – 1999 Architecture• 1999 – 2001 .COM

– Multimedia & web application design

• 2001 – 2005 Pay.gov – UI design/ SDLC Process

• 2005 - CloverLeaf Consulting– UX/ Agile Process

• 2009 – Georgetown International Business (MBA)

• 2009 Three Pillar Global

Me (Pat Sheridan)


Agile• Collocation of teams

– (XP) Peer programming• User Stories• Iterations/ Sprints• Stories, Tasks, and

Points• Backlog• Velocity/ Burndown• Retrospectives

UX• User centered design• Information

architecture• Content strategy• Visual design• Design patterns• View components• Task flow/ interaction

design

Process Maturity and Convergence


Competition – Old Thinking• Product: Closed

Source• Process: Project/Date

Focused• Teams:

– Segmented Skills/ Input– Date driven, “Done

yet?”– hierarchical

• Process: 50% Transparent

• Design:– All up front (waterfall)– All at the end (lipstick)

Collaboration – New Thinking• Product: Open Source• Process: Business

Value / Priority Focused

• Teams:– Interdisciplinary– Scope driven sprints– Flat

• Process: 100% Transparent

• Design:– Integrated throughout

Collaboration makes for unbeatable Competition


• Understand tasks at the most granular level

• Manage Risk and Complexity

• Evaluate UI/UX choices as Options

Scope is Everything


• Envision Session

• Design iterations ahead of Dev iterations

• Importance of Backlog

• Ongoing Feedback

Process


• Story List• Story Dependency• Mental Model• Wireframes

Deliverables


RIA: Reaching the Next Plateau


Toolset Maturity + Process Convergence

• Process Maturity• Platform Maturity• Device Maturity• Data visualization

– Grids, charts, graphs, maps• User Maturity – customization and

control– ‘User Directed Interfaces’ as opposed to

‘design for user’

RIA: Reaching the Next Plateau


Changing frame of reference


• Communication Challenges– Web 2.0, 3.0, Drag-and-Drop, ZZZzzzzzz– Invalidated notions of finished states

• Reference the way successful sites LOOK• Reference the way successful sites ACT

– Mint.com– Anything Google– Anything Desktop, fat client experience

Changing frame of reference


• How people work:– Determining Risk and Complexity– Lack of knowledge of ‘Big App’ development– Lack of pattern knowledge on the infrastructure side of

RIA• Knowledge Gap – ‘Honest Mistakes’

– Customers/Designers don’t know what is available in the toolbox

• Serialized analysis/ design cycles• Too much customization

• Consistency to a fault• Inconsistent business rules for a ‘consistent’ UI

Where Things go Wrong


• Working: Quicker Feedback/ Dev iterations

• Designing– Focus on Interactions and re-use– Design Pattern Library– Design Component Library [Style Guide]

• Developing– Custom Components– Aesthetics: Renderer/ Templates/ Themes

Squaring the Circle


• Modals/ Error• Form Validation• Search/ Find / Browse• Navigation vs. Action

Ext JS as Design Pattern Library


Agile + Ext JS + Omnigraffle


• Meeting Facilitation– High resolution wireframes remove Hand

Waving + Leap of Faith

• Constraints on Design– Working ‘with’ or ‘against’ the Framework– Scope/LOE

• Consistency



Agile: Story Mental Model


Agile: Story Dependency


Deliverables: Wireframes (Low-Res)


Ext JS Wireframes


Ext JS Wireframing


25

Focus on conversations not documentation

May 2, 2023


• Maintaining shared understanding• Agile UX

– Prototype driven analysis• Business, customer, and dev team stakeholders

– Text based ‘wireframes’• Ext JS Component architecture allows for meta-code

descriptions– TPG Envision

• Distributed Design– Location independent teams/ interdisciplinary skills/

skill levels– Process maturity, deliverables, infrastructure

Distributed Design


• Developers– Common language for discussion w/ designers– API, Docs, examples

• Customers– Highly visual deliverables– 80%/20% out of the box

• UX/ Interaction Designers– Ext JS Designer– Ext JS example site == Design Pattern Library– Omnigraffle Stencil == Rapid Prototyping– Ext JS Designer!!

What’s in it for me?


Happy Coding!