Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Dev-Centered UX (UX Week 2014)

A workshop I did at UX Week 2014

Dev-Centered UX (UX Week 2014)

  1. 1. Dev-Centered UX @andersramsay | @uxweek | #agileux
  2. 2. About Me • UX Designer at Startups, Agencies, Multi-nationals • UX Coach/Consultant @andersramsay | @uxweek | #agileux • Developer
  3. 3. Overview • Why a workshop on Dev-Centered UX? • Dev-Centered Practices • Dev-Centered Mindset @andersramsay | @uxweek | #agileux • Q&A
  4. 4. Why a talk on Dev-Centered UX? @andersramsay | @uxweek | #agileux
  5. 5. What’s Your Code Distance? @andersramsay | @uxweek | #agileux
  6. 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. 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. 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. 9. This is not a “learn to code” workshop @andersramsay | @uxweek | #agileux
  10. 10. Dev-Centered Practices Pairing Refactoring Pseudocode @andersramsay | @uxweek | #agileux
  11. 11. Shoutouts: @aviflombaum, Chris Pine bit.ly/alien-sandwich-workshop @andersramsay | @uxweek | #agileux
  12. 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. 13. Let’s look at some sandwich-making instructions for aliens… @andersramsay | @uxweek | #agileux My Solution
  14. 14. What did we just do? Wrote pseudo code Paired Refactored(?) @andersramsay | @uxweek | #agileux
  15. 15. Pseudo code: A natural language logical description of what a computer program should do. @andersramsay | @uxweek | #agileux
  16. 16. Make PBJ Sandwich Understanding how the feature actually will work through pseudo-code @andersramsay | @uxweek | #agileux UX Focus
  17. 17. 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
  18. 18. Developer Pairing: Working on the same code at the same time.
  19. 19. Cross-Functional Pairing: Iterating between design and coding.
  20. 20. Refactoring: Starting with a crappy first draft, then revising, refining, and making your ‘writing’ more clear and succinct. @andersramsay | @uxweek | #agileux
  21. 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. 22. Refactoring Adding a Vehicle Select up-front
  23. 23. Refactoring Adding a Vehicle Add as you go
  24. 24. Refactoring Soapbox: Refactoring should be a continuous part of your practice, not a separate or special activity. @andersramsay | @uxweek | #agileux
  25. 25. Bringing an (Agile) Dev Mindset to UX Design @andersramsay | @uxweek | #agileux
  26. 26. “A program is not built; it is grown” –Chris Pine https://pine.fm/LearnToProgram @andersramsay | @uxweek | #agileux
  27. 27. 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
  28. 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. 29. Sketch out a product vision… [a mockup showing what the “finished” product might look like]
  30. 30. Design and build one key part of the system… [detailed mockups speccing the ui for the first release]
  31. 31. 1st release of broker dashboard [screen cap of the first release of the broker dashboard]
  32. 32. 1st release of customer detail [screen cap of the first release of a customer detail view]
  33. 33. Team Project:“Personal Shopper” Handout: http://bit.ly/personal-shopper-handout @andersramsay | @uxweek | #agileux
  34. 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 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?
  35. 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. 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 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
  37. 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 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
  38. 38. Let’s discuss some first release candidates… @andersramsay | @uxweek | #agileux
  39. 39. My First Release candidate @andersramsay | @uxweek | #agileux • List of current discounts. • Make some discounts exclusive to the app, to incentivize usage.
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. Q&A @andersramsay | @uxweek | #agileux
  44. 44. Thanks! @andersramsay | @uxweek | #agileux

×