The document discusses building connections between UX designers and developers. It notes that differing goals and work styles can lead to friction but that bringing harmony is important for success. It explores various "teams in the wild" and personas for designers and developers. Techniques are presented for deconstructing adversarial relationships such as understanding constraints, listening, and collaborating throughout the design process. The document advocates for techniques like timeboxing prototyping, co-presenting to leadership, and code reviews to facilitate partnership between the roles.

1. #UXPA2016
www.uxpa2016.org
Adversarial to Harmonious
Building the Developer / UX Connection
Nick Tucker
@ncktckr
Laura Faulkner, PhD
@ laurafaulkner

2. Ever worked on a project where
Design and Development blended
like oil and water?

3. Being stuck in a storming phase
isn’t good for you, your product,
and ultimately your users.

4. Differing goals, work styles,
personalities, and pressures
lead to messy results, slow
deliveries, and frustration

5. Bringing harmony to your team is
important to your success and
your sanity.

6. Bridging the gap from adversarial to
harmonious is possible...
+ Teamwork
techniques
Personal
connection

7. Think about your best or most
positive experience working with
one or more developers.
What made it positive?
What made it productive or
enjoyable, or both?
Why do you think it
worked well?

8. Specialized skillsets and cross-
team cultures can put up walls
between designers and
developers.

9. Teams in the wild
Unicorn. One person team that does it all—and pretty well.
Horse. Jack-of-all-trades, master of none or one—the results show it.
Over-the-wall. Design + Dev working as an assembly line.
Integrators. Design + Dev collaborate, but it’s back-and-forth and
everyone stays in their corner.
Partnership. Design + Dev are in it together, from the beginning.

10. Designer personas
Visual only. Master of Illustrator, meticulous aesthetic detail, no or
limited exposure to implementation.
Tech savvy. Understands how designs will “translate” to code, foresees
constraints, .
Prototyper. Knows their way around markup, builds prototypes, speaks
“code” to developers.

11. Developer personas
Backend. Works on underlying functionality of product, no or limited UI
exposure.
Frontend frameworker. Great at Legos, builds UI with frameworks,
limited ability to make custom controls and experiences.
Frontend master. Solid grasp on UX, can bring a new and unique UI
to life from the ground up.
Full stack. Hybrid backend and frontend skills, in the unique position to
make end-to-end UX shine.

12. Deconstruct adversarial
relationships from experiences.

13. What causes friction?

14. Differing priorities for Design and
Dev teams.
Timelines and budget constraints.

15. Miscommunications and
terminology.

16. Opposing philosophies.
Divergent goals.

17. In moments of stress, we all
become 5-year-olds.

18. What does everyone want?

19. Make customers happy so they
love our product.

20. Build something cool, interesting,
innovative—something we can
be proud of.

21. How can we begin?

22. Build relationships, handle
differences of opinion, and learn
to speak geek to be heard!

23. Keep a running list of terms.
Terms buy you respect.
“Fun” references buy you rapport.

24. Ask, “What is a…” at least every
other day.
Support your geeks to share their
"beautiful information” and "beautiful code."

25. Diffuse ourselves.
Try this:
Picture your inner 5-year-old

26. Take the time to understand
constraints.

27. Defend development needs and
goals.

28. What do designers and
developers bring to the table?
What do UXers see that
devs may not?
What do devs see that
UXers may not?
What do you bring to the table?

29. What do we need to
do as teams?

30. Learn how to convince,
collaborate, and co-create.

31. Get connected. Talk early and
often.

32. Listen. Understand everyone’s
goals.

33. Play the accordion. Define your
expand / contract phases.

34. Explore together. Pair up and
prototype.

35. Bring developers in at the
beginning.

36. Seek constant feedback to get
later buy-in.

37. Be prepared to describe impact.

38. Use data and metrics.

39. Practice a graceful acceptance of
give and take.

40. Tools and techniques to stay
efficient and deliver the best
experience as partners.

41. Timebox prototyping
Don’t get paralyzed looking for perfection.
Set your boundaries ahead of time.

42. Tie-break in the wild
Use A/B testing to choose the best experience.
Works when engineering is cheap and UR is the long-pole.

43. Test UX with real code
Partner w/ dev to “stress test” designs.
Helps cover more variations, keeping everyone aligned.
Easy to repeat tests as design evolves.

44. Co-present to peers and leadership
Win together.
Quickly cuts to “what’s important”.
Everyone wants to look good.

45. Frontend code review
Side-by-side look at what’s been built.
Praise and polish together.

46. E2E walkthru sessions
Finishing touches before customers see it.

47. What will you do come
Monday morning?

48. 1. Pick a few techniques we talked about
today that you want to try.
2. Describe the project or people you’ll try
them with.
3. What actions will you take and when?
Make your plan of action

49. #UXPA2016
www.uxpa2016.org
Session Survey: www.uxpa2016.org/sessionsurvey?sessionid=344
Conference Survey: www.uxpa2016.org/survey
nick tucker
@ncktckr
laura faulkner phd
@laurafaulkner
Enjoy the session? We’d love your feedback!