Presented at the April NYC Agile Experience Design Meetup http://www.meetup.com/Agile-Experience-Design/events/173376062/ For many non-technical members on a project team, what developers do tends to be a black box. You decide as a team what to build, and maybe create some wireframes or sketches and then they go off and do...something. Maybe you have a general idea of what's involved in building software, but unless you actually are a developer, that's usually about it. In this session, we'll take a non-developer view of techniques commonly associated with Agile software development, such as pair programming, refactoring, test-driven development and continuous integration, and show how understanding these concepts can offer riches in terms of improved collaboration and communication between designers and developers.

1. Agile Dev Practices
From a UX Perspective
@andersramsay • @agileuxmeetup • #agileux

2. @andersramsay • @agileuxmeetup • #agileux
Why a talk on Agile
Dev Practices?

3. @andersramsay • @agileuxmeetup • #agileux
@andersramsay • @agileuxmeetup • #agileux

4. @andersramsay • @agileuxmeetup • #agileux

5. @andersramsay • @agileuxmeetup • #agileux
Pseudo Code
Test-Driven Development
Pair Programming
Refactoring/Technical Debt
Continuous Integration

6. @andersramsay • @agileuxmeetup • #agileux
Shoutout:
@aviflombaum at @flatironschool
bit.ly/alien-sandwich-workshop
@andersramsay • @agileuxmeetup • #agileux

7. @andersramsay • @agileuxmeetup • #agileux
Let’s look at some alien sandwich
instructions…

8. @andersramsay • @agileuxmeetup • #agileux
Writing Pseudo Code

9. @andersramsay • @agileuxmeetup • #agileux
Pseudocode is a natural language
description of what a computer
program should do.

10. @andersramsay • @agileuxmeetup • #agileux
Make Sandwich

11. My Alien Sandwich
Instructions…
https://gist.github.com/andersr/11004954

12. A more practical example
https://gist.github.com/andersr/10471560

13. @andersramsay • @agileuxmeetup • #agileux
Some Benefits of Pseudo Code
A logic-based approach to writing user flows.
A coder/designer communication bridge.
Improved design coverage.

14. @andersramsay • @agileuxmeetup • #agileux
Pair Programming

15. @andersramsay • @agileuxmeetup • #agileux
@andersramsay • @agileuxmeetup • #agileux

16. @andersramsay • @agileuxmeetup • #agileux
Pair Programming is just as
much about being persuasive,
being a good listener, and letting
go of ego, as it is about coding.

17. @andersramsay • @agileuxmeetup • #agileux
Pairing and Pair
Programming
Cross-Functional Pairing: More about “What should we
build?”
Pair Programming: More about “How do we build it?”
Writing Pseudo Code can enable pairing with a developer,
particularly on writing tests and TDD.

18. @andersramsay • @agileuxmeetup • #agileux
Test-Driven
Development

19. @andersramsay • @agileuxmeetup • #agileux
Test-Driven Development:
Testing code, not users.

20. @andersramsay • @agileuxmeetup • #agileux
Cut two slices of bread and place on the plate
1. Grasp the Knife in a cutting grasp and hold it out above the
table.
2. Grasp the bread-loaf and place it on the table, such that it is
directly below the knife.
….
Test-Driven Development:
Replacing traditional specs with
“executable specs,” i.e. specs that talk
back at you.

21. @andersramsay • @agileuxmeetup • #agileux
Oops, you didn’t grasp the bread-loaf.
Sorry, you’re not holding the knife
in a cutting grasp.

22. @andersramsay • @agileuxmeetup • #agileux
Benefits of understanding TDD
An opportunity to write fewer traditional specs and more
executable or test-driven specs.
Can help reduce churn, improve design coverage, and
design/dev communication.
Likely to encourage developers to adopt TDD in general.

23. @andersramsay • @agileuxmeetup • #agileux
Refactoring and
Technical Debt

24. Coding is “just” writing
Every coder will write different
code, with better coders being
more succinct, eloquent, etc.
Good coding is re-coding.
Coding software means writing
for two audiences: binary aliens
and analog humans.

25. @andersramsay • @agileuxmeetup • #agileux
–Kent Beck
“Make it Work.
Make it Good.
Make it Fast.”

26. @andersramsay • @agileuxmeetup • #agileux
Make it Work…
Ship early/often, holding off on better/
faster code (incurring technical debt)
only once you know you’ve built
something valuable.

27. @andersramsay • @agileuxmeetup • #agileux
Make it Good. Make it Fast…
Refactor, Pay Down Technical Debt:
Find ways to say the same thing in fewer or
clearer words, improving scalability,
maintainability, reuse, stability, speed, etc.

28. @andersramsay • @agileuxmeetup • #agileux
Continuous
Integration

29. @andersramsay • @agileuxmeetup • #agileux
Coding a large system is like
having many novelists all writing
the same novel at the same time.

30. @andersramsay • @agileuxmeetup • #agileux
Traditional
Integration

31. @andersramsay • @agileuxmeetup • #agileux
Continuous Integration…and knowledge sharing.

32. @andersramsay • @agileuxmeetup • #agileux
Continuous Integration from
a UX Perspective
“Continuous” is the game-changer.
Writing pseudo code, pairing, integrating your work
through TDD, and other practices (eg Live Style Guides),
are all ways to maintain a continuous working
relationship with developers.

33. @andersramsay • @agileuxmeetup • #agileux
Thanks!