dev-centered ux (ux week 2014)

Download Dev-Centered UX (UX Week 2014)

Post on 10-Nov-2014




5 download

Embed Size (px)


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. Whats Your Code Distance? @andersramsay | @uxweek | #agileux
  • 6. Instructions Grab a stickie and a marker. Write your title, role, or however youd 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 @andersramsay | @uxweek | #agileux
  • 12. Instructions @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 more, no less. Dont worry about finishing. Just do what you can in the time allotted Optional: post solution to as a public gist
  • 13. Lets 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
  • 17. Pairing: Two people working on the same thing at the same time, creating a bubble of focus, continually stimulating and debugging one anothers ideas. @andersramsay | @uxweek | #agileux
  • 18. Developer Pairing: Working on the same code at the same time.
  • 19. Cross-Functional Pairing: Iterating between design and coding.
  • 20. Refactoring: Starting with a crappy first draft, then revising, refining, and making your writing more clear and succinct. @andersramsay | @uxweek | #agileux
  • 21. 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
  • 22. Refactoring Adding a Vehicle Select up-front
  • 23. Refactoring Adding a Vehicle Add as you go
  • 24. Refactoring Soapbox: Refactoring should be a continuous part of your practice, not a separate or special activity. @andersramsay | @uxweek | #agileux
  • 25. Bringing an (Agile) Dev Mindset to UX Design @andersramsay | @uxweek | #agileux
  • 26. A program is not built; it is grown Chris Pine @andersramsay | @uxweek | #agileux
  • 27. The Strangling Vine Strategy Gradually replace a large legacy system by strangling the old system, feature by feature. (Metaphor coined by Martin Fowler: bliki/StranglerApplication.html) @andersramsay | @uxweek | #agileux
  • 28. 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
  • 29. Sketch out a product vision [a mockup showing what the finished product might look like]
  • 30. Design and build one key part of the system [detailed mockups speccing the ui for the first release]
  • 31. 1st release of broker dashboard [screen cap of the first release of the broker dashboard]
  • 32. 1st release of customer detail [screen cap of the first release of a customer detail view]
  • 33. Team Project:Personal Shopper Handout: @andersramsay | @uxweek | #agileux
  • 34. 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 mens wear, and now want to find shoes to match the suit theyre 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 competitors store. I want them to be able to use coupons and offers. I want them to feel like theyre being taken care of. So, what do we do next? When we can we launch the personal shopper?
  • 35. 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
  • 36. 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 theDiscreet 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
  • 37. 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 dont ge


View more >