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.

Wireframe and prototyping google Campus talk by Zoe Guiraudon

679 views

Published on

Learn about the basic of Wireframing and Prototyping through the Design Process

Published in: Design
  • Be the first to comment

Wireframe and prototyping google Campus talk by Zoe Guiraudon

  1. 1. @zoe_guiraudon INTRO TO WIREFRAMING AND PROTOTYPING GENERAL ASSAMBLY @ GOOGLE CAMPUS
  2. 2. @zoe_guiraudon
  3. 3. @zoe_guiraudon WHAT WILL YOU LEARN TODAY INTRO TO UX WIREFRAMING PROTOTYPING
  4. 4. @zoe_guiraudon WHO THE HELL IS SHE? Zoe Guiraudon www.zoeguiraudon.com UX Designer at 100 Shapes TA at General Assembly
  5. 5. @zoe_guiraudon MY UX JOURNEY Finished Uni Yay! Continue Working In Social Media Found out about GA Al lot of ups and downs but it was all worth it! My GA Experience I Need a career change!!! Teaching at GA 100 Shapes ITV Project
  6. 6. @zoe_guiraudon INTRO TO USER EXPERIENCE DESIGN WHAT IS USER EXPERIENCE?
  7. 7. WHAT IS USER EXPERIENCE? WE INTERACT WITH PRODUCTS, BOTH DIGITAL AND PHYSICAL. WE TRY TO ACCOMPLISH GOALS WHEN USING THESE PRODUCTS. THIS LEADS US TO HAVING A USER EXPERIENCE.
  8. 8. WHAT IS USER EXPERIENCE? JESSE JAMES GARRET “Experience design is the design of anything independent of medium, or across media, with human experience as an explicit outcome and human engagement as an explicit goal.”
  9. 9. WHAT IS USER EXPERIENCE? DONALD NORMAN “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”
  10. 10. WHAT IS USER EXPERIENCE? THERE ARE SOME PRODUCTS THAT WE USE DAILY THAT ARE POORLY DESIGNED AND OFTEN PROVIDE POOR EXPERIENCES.
  11. 11. CLASS TITLE TODAY’S CLASSWHAT IS USER EXPERIENCE? EVERYDAY UX
  12. 12. WHAT IS USER EXPERIENCE? HAVE A THINK - WHAT WAS THE EXPERIENCE LIKE COMING TO THIS TALK? • Transport • Restaurants/coffee shops • Architecture • Sign posting • Did you use any apps to guide you here?
  13. 13. WHAT IS USER EXPERIENCE? CAN YOU THINK OF ANY EXAMPLES OF GOOD OR BAD EXPERIENCES?
  14. 14. UX COMES FROM PSYCHOLOGY Thinking Feeling Instinct
  15. 15. UX COMES FROM PSYCHOLOGY
  16. 16. INTRO TO USER EXPERIENCE DESIGN HOW DO WE “DESIGN” THE USER EXPERIENCE?
  17. 17. DESIGNING THE USER EXPERIENCE WHAT MOST PEOPLE THINK UX IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
  18. 18. DESIGNING THE USER EXPERIENCE WHAT UX ACTUALLY IS Field research Face to face interviewing Creation and administering of tests Gathering, organising, and presenting statistics Documentation of personas and findings Product design Feature writing Requirement writing Graphic arts Interaction design Information Architecture Usability Prototyping Interface layout Interface design Visual design Taxonomy creation Terminology creation Copy writing Presentation and speaking Working tightly with programmers Brainstorm coordination Company culture evangelism Communication to stakeholders helloerik.com/ux-is-not-ui
  19. 19. DESIGNING THE USER EXPERIENCE THE FIELD OF USER EXPERIENCE IS CONCERNED WITH IDENTIFYING A REAL-WORLD PROBLEM AND USING DESIGN TO ATTEMPT TO SOLVE IT.
  20. 20. DESIGNING THE USER EXPERIENCE USER EXPERIENCE IS SUBJECTIVE; WE DESIGN FOR THE NEEDS OF SPECIFIC TYPES OF USER
  21. 21. DESIGNING THE USER EXPERIENCE Jesse James Garrett, 2000 Strategy Scope Structure Skeleton Surface
  22. 22. INTRO TO USER EXPERIENCE DESIGN WHY IS UX SO IMPORTANT?
  23. 23. WHY IS UX SO IMPORTANT? AVOID FEATURITIS Kathy Sierra, Creating Passionate Users, 2006 Number of features Userhappiness “Nice, but I wish it did more…” “So glad they added this!” “Cool!” “I rule!” “Guess I’d better read the manual” “Where the f*** did they put that?!” “Now I can’t even do the ONE SIMPLE THING I bought this for.” “I suck at this.” Happy user peak RAWR!
  24. 24. MASLOW’S HIERARCHY OF NEEDS
  25. 25. USER EXPERIENCE HIERARCHY OF NEEDS Aarron Walter, Designing for Emotion 2011 Easy to learn to perform basic tasks Basic features that meet user needs Service and functional reliability Fun, joy and delight
  26. 26. WHO PRACTICES UX DESIGN? Squad Product owner UX’er Tester Business Analyst Developers Front-end developer CROSS-DISCIPLINE TEAMS Squad Product owner UX’er Tester Business Analyst Developers Front-end developer Squad Product owner UX’er Tester Business Analyst Developers Front-end developer
  27. 27. @zoe_guiraudon WHERE DO WIREFRAMING AND PROTOTYPING FIT IN THE PROCESS?
  28. 28. @zoe_guiraudon Research Insights PrototypeIdeation Discover
 Business Analysis Brand Analysis Competitive Analysis Technical Research User Survey User Interview Usability Testing Define
 Affinity Map User Flows User Journeys Personas Feature Prioritisation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype
  29. 29. @zoe_guiraudon PrototypeIdeation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype Design TestLearn Iteration Process
  30. 30. @zoe_guiraudon WIREFRAMING
  31. 31. @zoe_guiraudon !
  32. 32. @zoe_guiraudon 1 - ALWAY START WITH PAPER! IDEAS ARE CHEAP, BUILDING THING IS EXPENSIVE.
  33. 33. @zoe_guiraudon CAN YOU DRAW A… Triangle Circle Cross Rectangle
  34. 34. @zoe_guiraudon LET’S PLAY A GAME… CALLED UXIONARY
  35. 35. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  36. 36. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  37. 37. @zoe_guiraudon PAPER SKETCHES • Every idea needs user interface translation • Good to get the basic concept and interaction down. • Sketching always comes before wireframing • Sketching helps you brainstorm ideas with clients • Sketches can be basic and Still communicate wonderfully
  38. 38. @zoe_guiraudon 2 - WIREFRAMES UP THE FIDELITY
  39. 39. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  40. 40. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  41. 41. @zoe_guiraudon WIREFRAMES • Grayscale or monochrome • Good to test interactions • Good to test usability • More tangible • If well done it should make the next step a “breeze”
  42. 42. @zoe_guiraudon 3 - MOCKUPS UP UP THE FIDELITY
  43. 43. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  44. 44. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  45. 45. @zoe_guiraudon MOCKUPS • This is where you get the visual design and branding in • Great to communicate with stakeholders • Good to get design feedback • Additional piece of insight when testing: Look & Feel
  46. 46. @zoe_guiraudon TO RECAP http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
  47. 47. @zoe_guiraudon THE TOOLS I use… Sketch
  48. 48. @zoe_guiraudon THE TOOLS But people also use… Omnigraffle Illustrator InDesign Photoshop Affinity Designer
  49. 49. @zoe_guiraudon PROTOTYPING
  50. 50. @zoe_guiraudon “IF A PICTURE IS WORTH 1,000 WORDS, A PROTOTYPE IS WORTH 1,000 MEETINGS.” WHY… - Tom & David Kelly IDEO
  51. 51. @zoe_guiraudon PrototypeIdeation Design
 Design Studio Sketching Paper Prototype Usability Testing Iterations Wireframing Test, iterate, Validate Deliver
 Digital Prototype Usability Testing Iterations Wireframing Test, Iterate, Validate Functional Prototype REMEMBER THIS?
  52. 52. @zoe_guiraudon Design TestLearn Iteration Process AND THIS?
  53. 53. @zoe_guiraudon REMEMBER… UX is not only about the look but also about the human interaction.
  54. 54. •To explore and refine •To communicate and test ‣ Functionality ‣ Flow ‣ Interaction ‣ Animations ‣ Usability WHY IS PROTOTYPING IMPORTANT?
  55. 55. PROTOTYPES ARE ALL ABOUT THE USER. WE TEST THE USABILITY OF OUR DESIGNS.
  56. 56. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  57. 57. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  58. 58. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  59. 59. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  60. 60. • Learnability - How easy is it for users to accomplish basic tasks the first time they encounter the design? • Efficiency - Once users have learned the design, how quickly can they perform tasks? • Memorability - When users return to the design after a period of not using it, how easily can they reestablish proficiency? • Error Management - How many errors do users make, how severe are these errors, and how easily can they recover from the errors? • Satisfaction - How pleasant is it to use the design? PRINCIPLES OF USABILITY
  61. 61. @zoe_guiraudon LEMErrS
  62. 62. USABILITY TESTING CAN YOU THINK OF ANY SITES OR APPS WHERE USABILITY TESTING HASN’T BEEN THOROUGH?
  63. 63. @zoe_guiraudon WHAT ARE DIFFERENT TYPES OF PROTOTYPES?
  64. 64. @zoe_guiraudon REMEMBER THIS? http://uxmovement.com/wireframes/why-its-important-to-sketch-before-you-wireframe/ Sketch Wireframes Mockup CodeIdea Getting a basic concept. Refining the concept further. Creating visual graphic & content. Developing it in the web browser.
  65. 65. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype
  66. 66. @zoe_guiraudon REMEMBER THIS? Sketch Wireframes Mockup Code Paper Prototype Digital / Clickable Prototype Digital / Clickable Prototype Functional Prototype Iteration Iteration Iteration
  67. 67. @zoe_guiraudon IS PROTOTYPE AN MVP*? * MINIMUM VIABLE PRODUCT
  68. 68. @zoe_guiraudon WHAT IS THE MVP OF… A CAR?
  69. 69. @zoe_guiraudon WHAT IS THE MVP OF… IS IT A WHEEL?
  70. 70. @zoe_guiraudon WHAT IS THE MVP OF… NO
  71. 71. @zoe_guiraudon AN MVP IS THE PROTOTYPE THAT WILL HELP YOUR USER TO ACHIEVE THEIR GOAL.
  72. 72. @zoe_guiraudon THE TOOLS I use… Marvel Invision POP
  73. 73. @zoe_guiraudon THE TOOLS But people also use… Axure proto.io Flinto UXPin
  74. 74. @zoe_guiraudon 100 SHAPES http://www.100shapes.com/ hello@100shapes.com +44-203-7738175 CONTACT US:
  75. 75. @zoe_guiraudon GENERAL ASSEMBLY IF YOU ARE INTERESTED IN STUDYING UX UPCOMING COURSES: Part Time - 10 weeks: July 26th - September 29th Part Time - 1 week intensive: August 8th - August 13th Full Time - UXDI: August 1st - October 7th
  76. 76. @zoe_guiraudon THANK YOU! Q&A ZOE GUIRAUDON www.zoeguiraudon.com @zoe_guiraudon

×