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.

Designers & Developers. Collaborative Design Process

85 views

Published on

This talk was presented at App Design & Development Conference in Barcelona, 2017
--
The journey from a basic idea to a great product requires clear communication and close collaboration between design and development teams. In this talk we are discussing why and how engineers should be a part of the design process, how to create shared understanding and how to build a better design and development culture.

This is a story from a designer and a developer who worked together and built a product for people who really need it. It is a first-hand story about behind-the-scenes processes, results, and reflections about the design & development of a medical app which actually saves people’s lives.

We will walk you through our design process from ideation and brainstorming, research and user study to first prototype and iterations. We will talk about why and how engineers should be a part of this journey, how to create shared understanding about users, and how to create a product that makes someone's life better together.

Is it all about pixels, colors, lines of code, or is it about users?

Published in: Design
  • Be the first to comment

  • Be the first to like this

Designers & Developers. Collaborative Design Process

  1. 1. #addconf SOLVE ! #ADDconf
  2. 2. @vixentael Lead Developer at Stanfy @anatinge Lead Designer at Stanfy
  3. 3. super-simple app that helps my patients take drugs on time
  4. 4. forget about their pills! 50 % = medical non-adherence
  5. 5. 15%transplant patients who forget pills 🤒"loose their transplant and die
  6. 6. Non- collaborative process Why it doesn’t work PLAN for today
  7. 7. Non- collaborative process Why it doesn’t work Collaborative design process Why & how do it together PLAN for today
  8. 8. Non- collaborative process Why it doesn’t work Collaborative design process Why & how do it together Take aways Next steps for your team PLAN for today
  9. 9. Non- collaborative process
  10. 10. Non-collaborative process
  11. 11. Non-collaborative process
  12. 12. Non-collaborative process
  13. 13. Non-collaborative process
  14. 14. PROS of this approach
  15. 15. Everyone do the part they are the best in! 1.
  16. 16. Everyone do the part they are the best in! 1. 2. Start faster, move faster!
  17. 17. CONS of this approach
  18. 18. Designers’ ideas difficult to implement! 1.
  19. 19. Designers’ ideas difficult to implement! 1. 2. Designers unaware of technical possibilities that make solution better!
  20. 20. Designers’ ideas difficult to implement! 1. 2. Designers unaware of technical possibilities that make solution better! 3. Developers feels disengaged !
  21. 21. Collaborative design process
  22. 22. Research helps to understand people, their needs, motivations, context
  23. 23. Research enable us to design the right experience for Real people who will use your product
  24. 24. Goal and questions
  25. 25. Identify main reasons why transplant patients forget to take their medications?!
  26. 26. How patients lives are changed after the surgery?! 1. 2. What are the main challenges they face with after?! 3. What is the context?!
  27. 27. Goal and questions Plan and prepare
  28. 28. Goal and questions Plan and prepare Collect the data
  29. 29. Topics we discussed how life changed after surgery! life before the surgery!1. 2. habits around taking medications!3. computer and mobile habits!4. …
  30. 30. sell your product! ask about future behavior! ask leading questions! ask YES/NO questions! limit their imagination!
  31. 31. smile ! take notes! ask open-ended questions! get their story! shut up and listen!
  32. 32. 90% listening 10% TALKING
  33. 33. Invite your developers!
  34. 34. KEEP ENGINEERS ENGAGED!
  35. 35. What I heard What I saw What stood out TEN minutes One idea per sticker
  36. 36. Collaborative design
  37. 37. DEEP DIVE INSIDE DOMAIN AREA becausesometimesinterviews arenot enough!
  38. 38. Collaborative design
  39. 39. start in group
  40. 40. USER’S Mental Model
  41. 41. show process with usability tests! Sketch UI concepts Together
  42. 42. Collaborative design
  43. 43. Share ownership of the product!
  44. 44. SOLUTION
  45. 45. Transplant Hero is ABOUT transplant patients ONLY
  46. 46. Transplant Hero is your smart guide to the anti- rejection medicine.
  47. 47. Transplant Hero is the bright part of your post- transplant life.
  48. 48. HeRoes patients (because words are important)
  49. 49. Be ethical
  50. 50. Be a friend, not a doctor.
  51. 51. How might we?
  52. 52. Let’s play!
  53. 53. - Do people understand our product? -  Do they care? -  Can they figure out how to use it? - Which messages are most effective at explaining it? Validating prototype with users
  54. 54. avoid building unnecessary stuff
  55. 55. Take aways
  56. 56. Collaborative design
  57. 57. process! Be visual!
  58. 58. Move into one ROOm
  59. 59. create design+dev channel
  60. 60. Track every idea in a backlog
  61. 61. Make DEMOs TOGETHER!
  62. 62. Have fun at retro!
  63. 63. Encourage team to draw!
  64. 64. mixed media :)
  65. 65. Remote retro
  66. 66. Plasticine retro!
  67. 67. EAT YOUR OWN DOG FOOD
  68. 68. Work together! Share knowledge (one room / chat room, explore OSS components)!2. Make demos together and have fun retrospectives!3. Track every idea in backlog!4. Use your own product!5. 1. Conduct user studies together (research + analysis + development)!
  69. 69. Share with the team user’s feedback! Thank you for Transplant Hero. It has enabled my son to learn, at a young age, his meds and dose by sight and name, and how to adhere to his medication schedule. He is confidently on the path to a happy and normal childhood and life. Thank you!
  70. 70. @vixentael@anatinge QUESTIONS? #ADDconf

×