A workshop I did at UX Week 2014

1. Dev-Centered UX
@andersramsay | @uxweek | #agileux

2. About Me
• UX Designer at Startups, Agencies, Multi-nationals
• UX Coach/Consultant
@andersramsay | @uxweek | #agileux
• Developer

3. Overview
• Why a workshop on Dev-Centered UX?
• Dev-Centered Practices
• Dev-Centered Mindset
@andersramsay | @uxweek | #agileux
• Q&A

4. Why a talk on Dev-Centered UX?
@andersramsay | @uxweek | #agileux

5. What’s Your Code
Distance?
@andersramsay | @uxweek | #agileux

6. Instructions
• Grab a stickie and a marker.
• Write your title, role, or however you’d
describe what you do, on the stickie.
• Come up and place your stickie where you
see yourself in terms of your code
distance.
@andersramsay | @uxweek | #agileux

7. Dev-Centered UX
Designing user experiences with an
understanding of how software actually is
made and how software developers think
about software products.
@andersramsay | @uxweek | #agileux

8. Some benefits of dev-centered UX
• More user-friendly design documents
• Smaller, faster iterations
• Better design coverage
• More alignment between practices
• Reduced confusion when adopting Agile/Lean methods
• Shared mental model of what it means to make
software
@andersramsay | @uxweek | #agileux

9. This is not a
“learn to code” workshop
@andersramsay | @uxweek | #agileux

10. Dev-Centered Practices
Pairing
Refactoring
Pseudocode
@andersramsay | @uxweek | #agileux

11. Shoutouts:
@aviflombaum, Chris Pine
bit.ly/alien-sandwich-workshop
@andersramsay | @uxweek | #agileux

12. Instructions
http://bit.ly/alien-sandwich-workshop
@andersramsay | @uxweek | #agileux
• Pair up
• Make sure you only have one writing implement (pen, laptop, tablet,
etc.) between the two of you.
• Together, write a list of written instructions explaining to an alien how
to make a peanut butter and jelly sandwich.
• The alien can read and recognize English and English grammar, but
may not understand what specific words mean.
• The alien will do exactly what your instructions say...no more, no less.
• Don’t worry about finishing. Just do what you can in the time allotted
• Optional: post solution to http://gist.github.com as a public gist

13. Let’s look at some
sandwich-making
instructions for aliens…
@andersramsay | @uxweek | #agileux
My Solution

14. What did we just do?
Wrote pseudo code
Paired
Refactored(?)
@andersramsay | @uxweek | #agileux

15. Pseudo code:
A natural language logical
description of what a
computer program should do.
@andersramsay | @uxweek | #agileux

16. Make PBJ Sandwich
Understanding how the
feature actually will work
through pseudo-code
@andersramsay | @uxweek | #agileux
UX Focus

19. Pairing:
Two people working on the
same thing at the same time,
creating a bubble of focus,
continually stimulating and
debugging one another’s ideas.
@andersramsay | @uxweek | #agileux

20. Developer Pairing: Working on the same
code at the same time.

21. Cross-Functional Pairing: Iterating between
design and coding.

22. Refactoring:
Starting with a crappy first
draft, then revising, refining,
and making your ‘writing’
more clear and succinct.
@andersramsay | @uxweek | #agileux

23. Code Refactoring:
Same functionality, better code
eg more readable, modular, maintainable
!
UX Refactoring:
Same outcome, better experience
eg a more usable UI, improved user flow
@andersramsay | @uxweek | #agileux

24. Refactoring Adding a Vehicle
Select up-front

25. Refactoring Adding a Vehicle
Add as you go

26. Refactoring Soapbox:
Refactoring should be a
continuous part of your
practice, not a separate or
special activity.
@andersramsay | @uxweek | #agileux

27. Bringing an (Agile) Dev
Mindset to UX Design
@andersramsay | @uxweek | #agileux

28. “A program
is not built;
it is grown”
–Chris Pine
https://pine.fm/LearnToProgram
@andersramsay | @uxweek | #agileux

30. The Strangling Vine Strategy
Gradually replace a large legacy
system by “strangling” the old
system, feature by feature.
(Metaphor coined by Martin Fowler: http://martinfowler.com/
bliki/StranglerApplication.html)
@andersramsay | @uxweek | #agileux

31. Discreet Feature Strategy
1. Barely sufficient research. (Do more JIT.)
2. Ask: Which sub-systems/features have the least
integration points? Which are likely to offer the most
value?
3. Consider multiple candidates. Which is the smallest,
least expensive, fastest to make?
4. There will often be no perfect candidate. Making a
choice and starting to build is just as important as
making the right choice.
@andersramsay | @uxweek | #agileux

33. Sketch out a product vision…
[a mockup showing what the “finished” product might look like]

34. Design and build one key part of the system…
[detailed mockups speccing the ui for the first release]

35. 1st release of broker dashboard
[screen cap of the first release of the broker dashboard]

36. 1st release of customer detail
[screen cap of the first release of a customer detail view]

37. Team Project:“Personal Shopper”
Handout: http://bit.ly/personal-shopper-handout
@andersramsay | @uxweek | #agileux

38. “Personal Shopper” Vision Statement
@andersramsay | @uxweek | #agileux
Department Store CEO
I see people milling about the department store,
seemingly lost. People will be in one part of the store, say
men’s wear, and now want to find shoes to match the suit
they’re looking at, but where is the shoe department?
Same thing with furniture, appliances, everything. People
want personal assistance. I want them to be able to
quickly get answers to questions about products in the
store. I want them to be assured that we can match or
beat any price in a competitor’s store. I want them to be
able to use coupons and offers. I want them to feel like
they’re being taken care of. So, what do we do next?
When we can we launch the personal shopper?

39. Team Project:“Personal Shopper”
Your Assignment:
What can we ship as a first
release?
What would offer the most value,
while being easiest to ship quickly?
@andersramsay | @uxweek | #agileux

40. Activity Overview
1. Divide into teams of 4-6
2. Work with the feature list to explore first release
candidates using a simplified version of
the“Discreet Feature” Strategy. (See handout.)
3. Use the product vision and personas (see
handout) as a reference.
4. Optional but recommended: sketch some UI ideas
for your release candidate.
@andersramsay | @uxweek | #agileux

41. Finding Candidate Releases
A simplified version of the “discreet feature” strategy
1. Write down each feature on an index card.
2. Place feature cards on the wall (or on a table.) Create general groupings as
appropriate, but don’t get too caught up in this.
3.Go through each card and ask:
Do we think this will this be valuable/desirable for users?
If yes, card moves up.
Do we think this will will have many integration points, be expensive to
build? If yes, card moves down.
4. Look at the top cards and explore possible candidates for a first release.
5. Optional but recommended: sketch out what the UX for your first release might
look like.
@andersramsay | @uxweek | #agileux

42. Let’s discuss some first
release candidates…
@andersramsay | @uxweek | #agileux

43. My First Release candidate
@andersramsay | @uxweek | #agileux
• List of current
discounts.
• Make some
discounts
exclusive to the
app, to incentivize
usage.

44. Additional Strategies
• Concierge: Be the software. Try manually simulating the UX.
• Fa$t Money: Try shipping one thing you think people will pay for.
• Fake Storefront: Try marketing the product as if already
completed and measure interest.
• Go Ugly Early: Try shipping with only a bare-bones UX.
• Pain Killer: Try removing one high-value, low-cost pain point.
• Wizard of Oz: Try manually simulating system output.
@andersramsay | @uxweek | #agileux

45. What’s the (UX) impact of
adopting a first release approach?
• A sketch-level version of the “final” product
becomes sufficient.
• Organically integrating work of developers into the
product design.
• Incremental focus on detail. (Less big design docs.)
• The evolving product (and resulting metrics) informs
the UX design.
@andersramsay | @uxweek | #agileux

46. Take-aways
• Understanding iterative and incremental
development, and the importance starting to build
as early as possible is more important than
knowing a particular first release strategy.
• Continuous and effective collaboration with
developers is more important than understanding
any specific dev-centered tools.
@andersramsay | @uxweek | #agileux

47. Q&A
@andersramsay | @uxweek | #agileux

48. Thanks!
@andersramsay | @uxweek | #agileux