Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

UX for startups

916 Aufrufe

Veröffentlicht am

Sample of the UX course for Master Degree at ECE Paris

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

UX for startups

  1. 1. A QUICK INTRODUCTION TO USER EXPERIENCE FOR STARTUPS
  2. 2. NOT ONLY WIREFRAMES
  3. 3. VIABILITY DESIREABILITY FEASIBILITY WHAT DO PEOPLE DESIRE? WHAT IS TECHNICALLY FEASIBILE? WHAT CAN BE FINANCIALLY VIABLE? INNOVATION START HERE [BUSINESS] [PEOPLE] [TECH] DESIGN ENGINEERING BUSINESS
  4. 4. VISUAL DESIGN SERVICE DESIGN INDUSTRIAL DESIGN USABILITY BRANDING INTERACTION DESIGN UX RESEARCH EXPERIENCE STRATEGY SYSTEM DESIGN DESIGN DISCIPLINES FOR IOT INFORMATION ARCHITECTURE
  5. 5. USER EXPERIENCE UX CUSTOMER EXPERIENCE CX UX CXResponses from user of product & services Competency at product & service level Responses at ALL touch points with a company Competency at corporate level
  6. 6. EXPERIENCE IS EMOTION & HOW IT FEELS LIKE
  7. 7. ‣ THE CONSISTENCY BETWEEN YOUR STARTUP STORY & YOUR PRODUCT & YOUR IDENTITY [VALUES, MISSION, MEAN] & [CHINESE PORTRAIT] T H E K E Y T O A S U C C E S S F U L E X P E R I E N C E ‣ CUSTOMER CARE & EMPATHY
  8. 8. BUILD TRUST
  9. 9. ASSUME PEOPLE’S ATTENTION TO YOUR SERVICE IS LOW
  10. 10. THE RIGHT INFORMATION AND CTA at the right place at the right time
  11. 11. PEOPLE HUMANS INDIVIDUALS DESIGN STARTS WITH
  12. 12. 80% OF DECISIONS ARE MADE WHEN FILTERED THROUGH EMOTIONS L E A R N A B O U T H U M A N B E H A V I O U R NEOCORTEX LIMBIC BRAIN REPTILIAN BRAIN RATIONAL EMOTIONS INSTINCT
  13. 13. source: Netway 95% unconscious brain activities 5% conscious brain activities
  14. 14. S T O R Y A R C F O R C O N V E R S I O N source: Netway Reason Action Emotion
  15. 15. VISCERAL BEHAVIORAL REFLECTIVE WHAT IT MAKES YOU FEEL WHAT IT HELPS YOU DO WHAT IT SAYS ABOUT YOU 3 L E V E L O F P E R C E P T I O N S AESTHETIC FUNCTION PRIDE source: Don Norman
  16. 16. HOW DO YOU DESIGN FOR AN UKNOWN FUTURE
  17. 17. THINK MAKE CHECK UNDERSTAND DEFINE DIVERGE DECIDE PROTOTYPE VALIDATE DESIGN SPRINT LEAN UX MESURE BUILD LEARN
  18. 18. S HOW DESIGN FEELS uncertainty / patterns / insights clarity / focus research concept prototype design
  19. 19. DESIGN NEW BEHAVIORS
  20. 20. UNDERSTAND 01
  21. 21. WHAT DO PEOPLE NEED? CAN THEY USE IT? USABILITY TEST ETHNOGRAPHY & INTERVIEW H O W T O P E O P L E W I T H U X
  22. 22. • GET A COMMON UNDERSTANDING • CAPTURE THE COMPLEXITY • Being visual means to help the brain to understand things faster • Visualizations are interactive tools that will be used, not only appreciated B E V I S U A L
  23. 23. T H E C O N T E X T: S T A K E H O L D E R M A P
  24. 24. STAKEHOLDER MAP direct stakholders indirect stakholders core target group RELATIONSHIP MAP VENN DIAGRAM
  25. 25. other cyclists bikers passer- by drivers customer support Repairer other VELIB users Repairer YOU CAN ALSO DO • PLACES MAP • DEVICES MAP EXAMPLE OF FRENCH BIKE SHARING STOCKHOLDER MAP
  26. 26. EMPATHIZE PUTTING YOURSELF IN ANOTHER PERSON'S SHOES
  27. 27. A T T I T U D E WHAT PEOPLE SAY THEY DO WHAT THEY ACTUALLY DO B E H A V I O U R
  28. 28. GET INSIGHTS
  29. 29. OBSERVE, INTERACT, IMMERSE ETHNOGRAPHY
  30. 30. source: adaptive path
  31. 31. CONTEXTUAL INTERVIEWS
  32. 32. ASK PEOPLE TO WRITE A DAILY DIARY OR FILM THEMSELVES
  33. 33. P R E P A R E F O R F I E L D W O R K WHAT DO YOU ALREADY KNOW? WHAT DO YOU WANT TO KNOW? Which hypotheses do you want to test? Which insight are you missing?
  34. 34. SATISFIED UNSATISFIED EMOTIONSCALEWHY’S PHASESINTHE EXPERIENCE INTERVIEWEE AND CONTEXT OF THE INTERVIEW Ask the user or employee to describer his or her current experience. First, ask what the different steps are and then detail the user experience. Ask, for the most positive and the most negative experiences, how the user or employee felt and what he or she thought. Get to the bottom of the underlying reasons. Don’t hesitate to ask follow-up questions « TELL ME YOUR PAST EXPERIENCE WHEN YOU USED IT STEP BY STEP »
  35. 35. Q U E S T I O N S D U R I N G T H E I N T E R V I E W HOW DID YOU FEEL WHEN…….. ? WHAT SEEMS TO BE THE TROUBLE? WHY? WHY? WHY? WHAT CONCERNS YOU THE MOST ABOUT……………..? WHAT IS HOLDING YOU BACK FROM…………………? WHAT SEEMS TO BE YOUR MAIN OBSTACLE TO………………?
  36. 36. DON’T ASK WOULD YOU USE IT? ASK QUESTION ABOUT THE PAST Q U E S T I O N S D U R I N G T H E I N T E R V I E W
  37. 37. Wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
  38. 38. EXAMPLE OF CONTEXTUAL JOURNEY MAP
  39. 39. INVITE STAKEHOLDERS TO REVIEW THE JOURNEY ADD THEIR QUOTES & DEFINING WORDS IDENTIFY PAINFUL MOMENTS [POST-ITS] [STICKERS]
  40. 40. S U R V E Y S TELLS YOU PEOPLE’S OPINION Q U A N T I T A T I V E R E S E A R C H
  41. 41. ADWORDS, TRENDS MOBILE RESEARCH STUDY GOOGLE ANALYTICS MIXPANEL A N A L Y T I C S OBSERVE USERS BEHAVIOR Q U A N T I T A T I V E R E S E A R C H
  42. 42. INTERPRETATION LOOKING FOR THE AHA MOMENTS
  43. 43. WHICH PROBLEM WE NEED TO FOCUS ON FIRST? EXAMPLE OF NEEDS REPORT
  44. 44. CAUSE DIAGRAM PROBLEM DIAGNOSTIC direct causes underlying causes core problem contributing factors
  45. 45. DEFINE 02
  46. 46. THE PERSONA
  47. 47. PHYSICAL SPACE SOCIAL INFLUENCE EMOTIONAL RELATIONSHIP HABITS LEARNING / TECH SAVY ECONOMIC UTILITY PRACTICAL UTILITY UNDERSTAND FACTORS THAT INFLUENCE USAGES
  48. 48. A FREE ONLINE TOOL FOR YOUR PERSONAS XTENSIO
  49. 49. MAILCHIMP PERSONAS
  50. 50. AIRBNB PERSONAS
  51. 51. E X P E R I E N C E M A P
  52. 52. T H E M A P A N A T O M Y Touchpoint = Any point of contact between People and your service • TIMELINE • STAKEHOLDERS • EVENTS OR ACTIVITIES • PHASES • RELATED INFORMATION • TOUCHPOINTS • CHANNELS • DEVICES • PLACES • EMPATHY • RELATIVE HIGHS AND LOWS • PAIN POINTS AND/OR OPPORTUNITIES` • BACKOFFICE BEHAVIOR 1 PERSONA PER STAKEHOLDER
  53. 53. EMPATHIZE AT EACH STEPS source: adaptive path ZOOM ON EXPERIENCE
  54. 54. A C Q U I S I T I O N S T A N D A R D S
  55. 55. B 2 B S O F T W A R E P U R C H A S E
  56. 56. FOCUS LESS ON HOW PRETTY IT IS, MORE ON HOW VALUABLE IT IS IT’S A LIVING TOOL FOR YOUR TEAM PUT IT ON YOUR OFFICE WALLS REFINE IT WHEN YOU GET INSIGHTS
  57. 57. ONLINE TOOLS MURAL.LY REALTIMEBOARD (FREE)
  58. 58. source: Airbnb
  59. 59. DIVERGE 03
  60. 60. W H A T I S I D E A T I O N A 1hour workshop with your team where you generate many possible solutions to your problem • Generating maximum innovation potential in a short amount of time • Incorporate different perspectives • Build excitement W H Y
  61. 61. GATHER INSPIRATION WITH PINTEREST
  62. 62. PRODUCT HUNT
  63. 63. • Defer judgement. • Encourage wild ideas. • Build on the ideas of others. • Stay focused on the topic. • One conversation at a time. • Be visual. • Go for quantity. Start with « what if… » I D E A T I O N R U L E S
  64. 64. Create your own cards Bring 3D artifacts like LEGOS, or other toys SOURCE: FUTURICE
  65. 65. DECIDE 04
  66. 66. PROTOTYPE 05
  67. 67. SITEMAPS
  68. 68. TASK FLOW
  69. 69. WIREFRAME SKETCHING
  70. 70. WIREFRAME SKETCHING
  71. 71. WIREFRAME SKETCHING
  72. 72. WIREFRAME SKETCHING
  73. 73. IDEOEXAMPLE OF APP PROTOTYPE https://vimeo.com/13377903
  74. 74. HTTPS://WWW.GLIFFY.COM/FLOWCHART FOR YOUR APP
  75. 75. HTTPS://MARVELAPP.COM/STATIC/ASSETS/DOWNLOADS/DEVICES.PDF PRINTABLE TEMPLATE FOR WIREFRAME SKETCHING
  76. 76. HTTPS://MARVELAPP.COMWEB, MOBILE, WATCH
  77. 77. S P E C T R U M O F F I D E L I T Y • Your audience must understand it : employ their language • Simulate the crucial parts of the experience first • Choose the right level of detail, finishing and perfection.
  78. 78. T O O L S F O R A P P W I R E F R A M I N G Free online tools for non-designers ‣ Gliffy ‣ Mockflow ‣ Marvel (INTERACTIVE) Advanced desktop softwares ‣ Sketch app (UX/UI) ‣ Axure RP Pro ‣ Adobe Indesign ‣ Adobe Fireworks
  79. 79. T O O L S F O R G R A P H I C S On your laptop ‣ Apple keynote ‣ Powerpoint Free online tools for non-designers • realtimeboard.com • easy.ly • Icons: ‣ Thenounproject (edit icons with Gimp, Inkscape) ‣ Freepik • Creative Commons Images: ‣ Pexels ‣ Morguefile Advanced tools ‣ Inkscape [free] ‣ Gimp [free] ‣ Adobe illustrator ‣ Adobe Indesign
  80. 80. VALIDATE 06
  81. 81. PROVE IMPROVE FROM ADAPTIVE PATH
  82. 82. U S A B I L I T Y T E S T I N G ENABLES YOU TO KNOW: CAN THEY USE IT?
  83. 83. • Which part of the user journey do you want to test • WHAT do you want to know? Prepare tasks and scenarios • HOW do you want to execute the element for the test? • PROPS Which additional items do you need? laptop, tablet, camera, dictaphone.. BRING YOUR OWN! • WHO will be the tester? Which role do you need to execute the test? • WHO will be the Test Admin? PREPARE YOUR USABILITY TEST
  84. 84. • PRESENT YOURSELF What’s your job? • Don’t tell your company name if you want to test your brand awareness • Ask the tester to constantly think aloud, and be honest • GIVE INSTRUCTIONS with an accurate context Ex: « You are (persona 1) in a (place) at (hour) and are looking for (specific need), tell me what do you do… • ASK QUESTIONS on why she did something you don’t expected USABILITY TEST PROTOCOLE
  85. 85. DON’T JUSTIFY YOUR DESIGN ASK QUESTIONS, LISTEN AND DON’T ANSWER If the tester is curious, debate about it after the test LISTEN, TAKE NOTES You can print your screens and annotate on it
  86. 86. PROBLEMS YOU CAN FIND WITH JUST A FEW TEST PARTICIPANT PROBLEMS YOU NEED TO FOCUS ON DO IT WITH 5 PEOPLE No big report, email the whole team about your key learnings You can sort feedbacks in a tool like Trello, Slack, or Github
  87. 87. UXPIN TOOLKIT
  88. 88. http://peek.usertesting.com/
  89. 89. THINK MAKE CHECK UNDERSTAND DEFINE DIVERGE DECIDE PROTOTYPE VALIDATE DESIGN SPRINT LEAN UX MESURE BUILD LEARN
  90. 90. H U M A N I Z E Y O U R P R O D U C T
  91. 91. T O N E I N I N T E R A C T I O N S , V I S U A L & C O P Y W R I T I N G What kind of humor? English cup of tea Burlesque Hyperbolic Parodic Satirical Juvenile Ironic
  92. 92. E M O T I O N I N M I C R O - I N T E R A C T I O N S
  93. 93. noemie.prin@gmail.com @noemieprin BIG UX ISSUE? CONTACT ME

×