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 Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu

117 views

Published on

UX Days 2019 - Journée des Conférences du vendredi 21 juin 2019 - Conférence de Nicolas Duval et Dawid Woldu : Evolution of design systems. Closing the gap between design and production.

Published in: Design
  • Be the first to comment

  • Be the first to like this

UX Days 2019 by Flupa - Conférence : Nicolas Duval et Dawid Woldu

  1. 1. Closing the gap between ideas and reality Nicolas Duval Lead Designer Dawid Woldu Designer
  2. 2. Nicolas Duval Lead Designer Dawid Woldu Designer
  3. 3. Design System
  4. 4. Design System
  5. 5. ❝ You’re doing machine learning at human speed. Romain Serres Data Scientist
  6. 6. Design?
  7. 7. Build ASAP Learn ASAP
  8. 8. Build ASAP Learn ASAP
  9. 9. Reality...
  10. 10. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping Usability tests Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  11. 11. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  12. 12. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  13. 13. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  14. 14. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  15. 15. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  16. 16. Close the gap
  17. 17. Closethegap
  18. 18. How?
  19. 19. Start with the basics ❝ What is the right border radius for our buttons? ❝
  20. 20. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  21. 21. Define experience patterns ❝ How do we convey success to the user? ❝
  22. 22. Add more details to get more passengers 50% Add your profile photo Add a ride comment Add extra information Add stopovers +25% +10% +10% +5% SkipImprove your ride 12:30 LET’S DO IT Congratulations! Your ride has been published. Publish Passengers prefered option. Yes, sure ! You approve each booking request yourself. No, thanks Automatically approve bookings ? Offer a ride blablacar.fr Passengers now book and pay online.NEW Want it approved? We'll notify you of the driver's reply by email and SMS before Today - 13:30. Drivers like to put a face to a name. Add your photo Driver: Mary P Paris » Lyon Sun 30 Oct - 08:00 You’ll be charged £10 if they approve. Request sent to driver Ok 4 I entered the wrong phone number The account ju*********t@gmail.com is not mine, link my phone number to account carolyn@gmail.com The account ju*********t@gmail.com is or was mine +33 536755386 is linked to another account (ju*******t@gmail.com) Number already used 10:40 100%
  23. 23. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  24. 24. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  25. 25. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  26. 26. Help teams decide ❝Should we send an email to let the user know? ❝
  27. 27. -25% emails
  28. 28. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  29. 29. Data analysis Flow analysis User feedback User testing User scenario Discovery Definition Development Delivery Delivery Measure User stories Jobs to be done Design principles How might we Brainstorm Hypotheses Card sorting Benchmark Sketching Wireframing Prototyping Guerilla testing Validate hypotheses Finalise designs High fidelity prototyping User testings Writing specs Front end dev QA Look at numbers Look at users feedback (For real)
  30. 30. Get design even closer to development ❝Are we testing a real scenario? ❝
  31. 31. Discovery Definition Development Delivery Delivery Measure (For real)
  32. 32. Discovery Definition Development Delivery Measure
  33. 33. Delivery Delivery (for real)
  34. 34. Real Thing
  35. 35. Blueprint
  36. 36. Hi Fidelity Prototyping
  37. 37. Absurd Fidelity Prototyping
  38. 38. ❝ Look! It’s like a real thing! Cool huh? - Designer
  39. 39. Smart Stopovers Example
  40. 40. Driver publishes A to B
  41. 41. Passenger searches for C to B
  42. 42. We create a stopover
  43. 43. No one knows who chose that place.
  44. 44.
  45. 45. ¯_(ツ)_/¯
  46. 46. ❝ Please imagine that it’s actually working - Test Moderator
  47. 47. We hit the wall
  48. 48. DEMO
  49. 49. Lorem Ipsum Real world data Production data
  50. 50. ?
  51. 51. DEMO
  52. 52. Let’s close the gap between our ideas and reality. Build. Learn. Standardise & Share knowledge.
  53. 53. Thanks!
  54. 54. 👯 We’re hiring!
  55. 55. Readings The future of design systems Design Better by Invision The full stack design system Intercom https://algorithms.design Tools origami.design framer.com modulz.app draftbit.com

×