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.

UX as a Team Sport

217 views

Published on

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

Published in: Internet
  • Be the first to comment

  • Be the first to like this

UX as a Team Sport

  1. 1. UX as a team sport // mbruck@etsy.com // @mayabruck
  2. 2. PROJECT HOURS Work Damage control :(
  3. 3. THE EPIC PROCESS FAIL
  4. 4. Collaboration
  5. 5. As designers, we don’t always control the project’s process
  6. 6. But we can choose how we work
  7. 7. FIVE COLLABORATIVE TECHNIQUES
  8. 8. Why is collaboration important?
  9. 9. Why is collaboration important? KNOWLEDGE
  10. 10. Why is collaboration important? DESIGN THINKING KNOWLEDGE
  11. 11. 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
  12. 12. …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
  13. 13. EMPATHY MAPPING TECHNIQUE #1
  14. 14. FEATURE FIRST
  15. 15. FEATURE FIRST PEOPLE FIRST
  16. 16. 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
  17. 17. Image from Gamestorming.
  18. 18. Image from “How to Use Persona Empathy Mapping” by Nikki Knox
  19. 19. Empathy maps ftw
  20. 20. 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
  21. 21. Review user profile 5 MIN
  22. 22. User profile overview $2456 ^ fake data
  23. 23. Introduce scenarios 5 MIN
  24. 24. 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
  25. 25. Do/think/feel 10 MIN
  26. 26. 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!
  27. 27. Share and summarize notes 20 MIN
  28. 28. EMPATHY MAPPING • Establishes people-first approach • Uncovers pain points and opportunities • Creates buy-in from team
  29. 29. RESEARCH DEBRIEF TECHNIQUE #2
  30. 30. DESIGNER DEVELOPERS PRODUCT MANAGER ETSY MANUFACTURING BUSINESS MANAGER MARKETING MANAGER
  31. 31. ETSY MANUFACTURING RESEARCH TEAM DESIGNER DEVELOPERS PRODUCT MANAGER BUSINESS MANAGER MARKETING MANAGER
  32. 32. Making research insights stick
  33. 33. 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
  34. 34. Read through transcripts 20 MIN
  35. 35. Write “how might we” statements 10 MIN
  36. 36. Share notes with team 10 MIN
  37. 37. RESEARCH DEBRIEF • Synthesize research and uncover key insights as a team • Reduce burden of documentation • Make research results sticky
  38. 38. SKETCH STUDIO TECHNIQUE #3
  39. 39. Include the full team
  40. 40. UX UI ENGINEER
  41. 41. Keep it focused
  42. 42. Come prepared
  43. 43. A Feature Brief establishes the sketch studio’s priorities
  44. 44. Sketch. Erase. Repeat.
  45. 45. Capture decisions
  46. 46. SKETCH STUDIO • Iterate & test ideas in real-time • Build a shared understanding • Create a sense of ownership
  47. 47. CRITIQUE, OFTEN TECHNIQUE #4
  48. 48. Team-wide critiques
  49. 49. Review your designs early and often with a broad team
  50. 50. “Wow, this design looks really nice. You obviously spent a lot of time on this. Unfortunately, we can’t build it.”
  51. 51. When the developer is involved in the process, they can warn about parts that are harder to implement.  BRIAN WALTERS, FRONT-END DEVELOPER, PIXO
  52. 52. Informal critiques
  53. 53. CRITIQUE, OFTEN • Get feedback from a broad audience • Make sure our designs can be built • Push ourselves to innovate
  54. 54. TWEAK CODE TECHNIQUE #5 IT’S OK! YOU CAN DO IT!
  55. 55. TWEAK ALL THE CODE!
  56. 56. I love when designers actively help implement their vision. LEONID GRINBERG, DEVE LOP E R, THE NEW YORK TIME S
  57. 57. The right tools 1
  58. 58. Version control 2
  59. 59. designer + developer = awesome
  60. 60. TWEAK CODE • Iterating a design in code can be hugely valuable • So. much. more. satisfying. • Creates a stronger relationship with developers
  61. 61. WORK IN PARALLEL PROCESS (BONUS!)
  62. 62. RESEARCH UX UI DEVELOPMENT QA
  63. 63. Communication PROBLEM #1
  64. 64. RESEARCH UX UI DEVELOPMENT QA
  65. 65. RESEARCH UX UI DEVELOPMENT QA
  66. 66. Iteration PROBLEM #2
  67. 67. RESEARCH UX UI DEVELOPMENT QA
  68. 68. RESEARCH UX UI DEVELOPMENT QA
  69. 69. Documentation. Ugh. PROBLEM #3
  70. 70. RESEARCH UX UI DEVELOPMENT QA
  71. 71. WORK IN PARALLEL • Encourages communication • Allows you to respond to project needs • Reduces burden of documentation
  72. 72. 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
  73. 73. TECHNOLOGY DOESN’T MAKE PRODUCTS. PEOPLE DO.
  74. 74. ALRIGHT, STOP COLLABORATE AND LISTEN
  75. 75. Whatever tool or method you use, let it be one that empowers your team and allows them to be true partners.
  76. 76. Thank you! // mbruck@etsy.com // @mayabruck

×