Dev-Centered UX (UX Week 2014)

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

@andersramsay | @uxweek | #agileux

About Me• UX Designer at Startups, Agencies, Multi-nationals • UX Coach/Consultant • Developer


Overview• Why a workshop on Dev-Centered UX? • Dev-Centered Practices • Dev-Centered Mindset • Q&A


Why a talk on Dev-Centered UX?


What’s Your Code Distance?


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.


Dev-Centered UXDesigning user experiences with an understanding of how software actually is made and how software developers think about software products.


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


This is not a “learn to code” workshop


Dev-Centered Practices PairingRefactoringPseudocode

Shoutouts: @aviflombaum, Chris Pine

bit.ly/alien-sandwich-workshop


http://bit.ly/alien-sandwich-workshop


Instructions http://bit.ly/alien-sandwich-workshop

• 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

http://bit.ly/alien-sandwich-workshop

http://gist.github.com


Let’s look at some sandwich-making instructions for aliens…

My Solution

http://localhost:8888/ux-week/my_solution.md


What did we just do?Wrote pseudo code Paired Refactored(?)


Pseudo code: A natural language logical description of what a computer program should do.


Make PBJ Sandwich

Understanding how the feature actually will work

through pseudo-code

UX Focus


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.

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

Cross-Functional Pairing: Iterating between design and coding.


Refactoring:Starting with a crappy first draft, then revising, refining, and making your ‘writing’ more clear and succinct.


Code Refactoring: Same functionality, better codeeg more readable, modular, maintainable !

UX Refactoring: Same outcome, better experienceeg a more usable UI, improved user flow

Refactoring Adding a Vehicle

Select up-front

Refactoring Adding a Vehicle

Add as you go


Refactoring Soapbox:Refactoring should be a continuous part of your practice, not a separate or special activity.


Bringing an (Agile) Dev Mindset to UX Design


–Chris Pine https://pine.fm/LearnToProgram

“A program is not built;it is grown”

https://pine.fm/LearnToProgram


The Strangling Vine StrategyGradually replace a large legacy system by “strangling” the old system, feature by feature.

(Metaphor coined by Martin Fowler: http://martinfowler.com/bliki/StranglerApplication.html)

http://martinfowler.com/bliki/StranglerApplication.html


Discreet Feature Strategy1. 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.

Sketch out a product vision…

[a mockup showing what the “finished” product might look like]

Design and build one key part of the system…

[detailed mockups speccing the ui for the first release]

1st release of broker dashboard

[screen cap of the first release of the broker dashboard]

1st release of customer detail

[screen cap of the first release of a customer detail view]


Team Project:“Personal Shopper”

Handout: http://bit.ly/personal-shopper-handout

http://bit.ly/personal-shopper-handout

@andersramsay | @uxweek | #agileuxDepartment 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?

“Personal Shopper” Vision Statement


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?


Activity Overview1. 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.


Finding Candidate Releases

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.

A simplified version of the “discreet feature” strategy


Let’s discuss some first release candidates…


My First Release candidate• List of current

discounts.

• Make some discounts exclusive to the app, to incentivize usage.


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.


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.


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.


Q&A

Thanks!@andersramsay | @uxweek | #agileux

Dev-Centered UX (UX Week 2014)

Documents

centered ux

personal shopper

integration points

simplified version

broker dashboard

team project

screen cap

code distance