presented live at FITC's Spotlight UX event on Sept 17th, 2016 in Toronto Canada. Presenter: Maya Bruck Senior Product Designer, Etsy Brooklyn, USA More info at http://fitc.ca/presentation/ux-team-sport/ Save 10% on any FITC event with discount code 'slideshare'. Overview As a UX designer, you are the de facto champion of the people who use your product — heck, the word “user” is part of your title. And to create the best product experience for your users, you need to get everyone on your team thinking like UX designers too. Because the more people on your team who understand UX principles and empathize with the user’s needs, the more effective your product will be. And the more you understand the other disciplines you work with and bring them into your process, the smarter and faster you’ll be able to design. Objective We’ll cover collaborative techniques to involve your team (from stakeholders to developers) in the UX process, and learn how collaboration can build a culture of ownership, trust, and empathy on your team. Target Audience UI/UX designers, product designers, front-end developers Things Audience Members Will Learn Why collaboration is da bomb How to reduce the burden of documentation so you can work faster and more efficiently How to empower stakeholders and developers to make informed product decisions Techniques to better understand strategic/technical limitations and opportunities

1. UX as a
team sport
// mbruck@etsy.com // @mayabruck

6. PROJECT HOURS
Work
Damage
control
:(

7. THE EPIC
PROCESS FAIL

8. Collaboration

9. As designers, we don’t always
control the project’s process

10. But we can choose how we work

11. FIVE
COLLABORATIVE
TECHNIQUES

12. Why is
collaboration
important?

13. Why is
collaboration
important?
KNOWLEDGE

14. Why is
collaboration
important?
DESIGN THINKING
KNOWLEDGE

15. Being involved from the beginning gives me a
greater sense of ownership over a project. I'm not
just implementing a drawing someone hands
me, I'm helping real people solve real problems…
MAT T WON DR A , SENIOR DE VE LOPER, APARTMENT THERAPY

16. …This not only makes me happier in my work, it
also motivates me to make sure every detail is
done just right.
MAT T WON DR A , SENIOR DE VE LOPER, APARTMENT THERAPY

17. EMPATHY MAPPING
TECHNIQUE #1

19. FEATURE FIRST

20. FEATURE FIRST
PEOPLE FIRST

21. Getting teammates with different backgrounds
together was incredibly valuable. We surfaced far
more insights and arrived at more robust
prototype ideas together than any of us could
have done by ourselves
BRYAN RA HIJA , SENIO R P RODUCT MARKETING MANAG ER, ETSY

22. Image from Gamestorming.

23. Image from “How to Use Persona Empathy Mapping” by Nikki Knox

24. Empathy maps ftw

25. 5 min Intro
5 min Review user profile
5 min Introduce scenarios
10 min Individually write sticky notes for do/think/feel
15 min Share notes with team
5 min Thematically group findings
15 min Present back to larger group
EMPATHY MAPPING AGENDA

26. Review user profile
5 MIN

27. User profile overview
$2456
^ fake data

28. Introduce scenarios
5 MIN

29. 29
EMPATHY MAP SCENARIO 1
Robbi sells her original paintings on Etsy. After a strong year of sales, she
decides to create a line of tote bags with her art. She places an order with
a local screenprinter and has to list 5 different totes in her store.
69

30. Do/think/feel
10 MIN

31. REGISTERING FOR SPOTLIGHT UX
DO
FEEL
THINK
• See email from FITC
• Look at conference website
• Read speaker abstracts and bios
• Ask manager for budget
• Get company credit card from office manager
• Purchase ticket
• Add event to Google calendar
• How much are tickets?
• Can I convince my manager to let me go?
• Will the speakers be relevant to me?
• Ok, this looks right up my alley
• Nervous. Hate asking manager for budget
• Relieved, conversation was easy
• Excited! Purchased my ticket!

32. Share and summarize notes
20 MIN

34. EMPATHY
MAPPING
• Establishes people-first approach
• Uncovers pain points and opportunities
• Creates buy-in from team

35. RESEARCH DEBRIEF
TECHNIQUE #2

37. DESIGNER
DEVELOPERS
PRODUCT
MANAGER
ETSY MANUFACTURING
BUSINESS
MANAGER
MARKETING
MANAGER

38. ETSY MANUFACTURING
RESEARCH TEAM
DESIGNER
DEVELOPERS
PRODUCT
MANAGER
BUSINESS
MANAGER
MARKETING
MANAGER

41. Making research insights stick

42. 5 min Intro
20 min Read through transcripts
10 min Write “how might we” statements
10 min Share notes with team
5 min Thematically group findings
10 min Discuss and decide on top priorities
RESEARCH DEBRIEF AGENDA

43. Read through transcripts
20 MIN

44. Write “how might we”
statements
10 MIN

46. Share notes with team
10 MIN

48. RESEARCH
DEBRIEF
• Synthesize research and uncover
key insights as a team
• Reduce burden of documentation
• Make research results sticky

50. SKETCH STUDIO
TECHNIQUE #3

52. Include the full team

53. UX
UI ENGINEER

54. Keep it focused

55. Come prepared

57. A Feature Brief establishes the sketch
studio’s priorities

58. Sketch. Erase. Repeat.

62. Capture decisions

64. SKETCH
STUDIO
• Iterate & test ideas in real-time
• Build a shared understanding
• Create a sense of ownership

65. CRITIQUE, OFTEN
TECHNIQUE #4

66. Team-wide critiques

67. Review your designs early and often
with a broad team

68. “Wow, this design looks really
nice. You obviously spent a lot
of time on this. Unfortunately,
we can’t build it.”

69. When the developer is involved in the process, they
can warn about parts that are harder to implement.
BRIAN WALTERS, FRONT-END DEVELOPER, PIXO

70. Informal critiques

72. CRITIQUE,
OFTEN
• Get feedback from a broad audience
• Make sure our designs can be built
• Push ourselves to innovate

73. TWEAK CODE
TECHNIQUE #5
IT’S OK! YOU CAN DO IT!

74. TWEAK ALL
THE CODE!

77. I love when designers actively help implement
their vision.
LEONID GRINBERG, DEVE LOP E R, THE NEW YORK TIME S

79. The right tools
1

82. Version control
2

84. designer + developer = awesome

85. TWEAK
CODE
• Iterating a design in code can be
hugely valuable
• So. much. more. satisfying.
• Creates a stronger relationship
with developers

86. WORK IN PARALLEL
PROCESS (BONUS!)

88. RESEARCH
UX
UI
DEVELOPMENT
QA

89. Communication
PROBLEM #1

90. RESEARCH
UX
UI
DEVELOPMENT
QA

91. RESEARCH
UX
UI
DEVELOPMENT
QA

92. Iteration
PROBLEM #2

93. RESEARCH
UX
UI
DEVELOPMENT
QA

94. RESEARCH
UX
UI
DEVELOPMENT
QA

95. Documentation. Ugh.
PROBLEM #3

96. RESEARCH
UX
UI
DEVELOPMENT
QA

98. WORK IN
PARALLEL
• Encourages communication
• Allows you to respond to project needs
• Reduces burden of documentation

99. A delightful end experience is the fruit of thoughtful
UX, elegant UI, smooth front-end, reliable back-end,
and many caregivers throughout the making process
KUAN LU O, PROD UCT DE SI G NER, COCKROACH

100. TECHNOLOGY DOESN’T
MAKE PRODUCTS.
PEOPLE DO.

101. ALRIGHT, STOP
COLLABORATE AND LISTEN

102. Whatever tool or method you
use, let it be one that empowers
your team and allows them to
be true partners.

103. Thank you!
// mbruck@etsy.com // @mayabruck