Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Some Things You Can’t Wireframe

9d637636e345671d163451647ec9bd49?s=47 Wolf Becvar
October 18, 2011

Some Things You Can’t Wireframe

This talk is not about wireframes, although it's not guaranteed you won't have to see some. This talk is about how to identify and create customer touchpoints throughout your service. Wolf will lay out different approaches on how to incorporate your communication concept into your app or website, discuss best-practice examples and provide insights from the latest application redesign he was going through. You should walk away from this talk with a flair for transforming your visitors into customers and a better understanding of the magic behind turning a like into love.


Wolf Becvar

October 18, 2011


  1. Some Things You Can’t Wireframe Wolf Becvar @wdbecvar Frontend2011

  2. None
  3. Credit: http://3.bp.blogspot.com/_5Usp1g7Jb2Q/TVMadeM7LrI/AAAAAAAAAAY/9-nqfXZk1Sw/s1600/darth-vader-on-vacation.jpg

  4. Credit: http://fc08.deviantart.net/fs71/f/2009/350/5/5/Darth_Vader_loved_too_by_Peagabassi.png

  5. Credit: http://www.wallchan.com/images/wallpapers/1136-darth-vader-guinness-wallpaper-wallchan-1680x1050.jpg

  6. Credit: http://www.imgbase.info/images/safe-wallpapers/miscellaneous/funny/15559_funny_darth_vader.jpg

  7. Designing for experience by identifying customer touchpoints

  8. HI.twitter.com/wdbecvar wolfbecvar.com #touchpoints use the hashtag Wolf Becvar

  9. None
  10. Don’t get me wrong ...

  11. I wireframes

  12. • get a clear picture • focus on each page’s

    purpose • no distraction through clutter of color or design • clear view of what needs to be designed • get clients involved in the planning process Wireframes help us ...
  13. Wireframes are just one part of the equation.

  14. 2. Why touchpoints are crucial? 3. How to identify touchpoints?

    4. How to translate customer touchpoints into your UI? 1. What are customer touchpoints?
  15. 1. What are customer touchpoints? 2. Why touchpoints are crucial?

    3. How to identify touchpoints? 4. How to translate customer touchpoints into your UI?
  16. “every point in time the customer ‘touches’ or connects with

    your company throughout the entire product/service delivery; pre-, during and post-purchase.” - Touchpoint Experience (2004)
  17. “every point of contact—online and off; each communication, human resource,

    branding, marketing and sales process initiative creates touchpoints. The quality of touchpoint experiences drives perceptions, actions and relationships.” - Touchpoint Metrics (2003)
  18. Touchpoints = Interactions

  19. Credit: http://incentmedia.files.wordpress.com/2009/10/customer-touch-points.gif Customer Service Social Media Channels Interactive Marketing Digital

  20. CRM UX Marketing Design Branding Dev Sales

  21. None
  22. •visual design •interaction design •information architecture •user research Isn’t this?

  23. “How do I improve our customer experience?”

  24. Credit: http://joshunfried.com/wp-content/uploads/2010/10/wallmart_facebook.jpg

  25. None
  26. None
  27. None
  28. None
  29. "Design is a funny word. Some people think design means

    how it looks. But of course, if you dig deeper, it's really how it works ...To design something really well, you have to get it. You have to really grok what it's all about. It takes a passionate commitment to really thoroughly understand something, chew it up, not just quickly swallow it. Most people don't take the time to do that." - Steve Jobs / Wired magazine, 1994
  30. 1. What are customer touchpoints? 2. Why touchpoints are crucial?

    3. How to identify touchpoints? 4. How to translate customer touchpoints into your UI?
  31. Touchpoints can make or break a good experience.

  32. WinErr: 001 Windows loaded - System in danger WinErr: 002

    No Error - Yet WinErr: 003 Dynamic linking error - Your mistake is now i WinErr: 004 Erroneous error - Nothing is wrong WinErr: 005 Multitasking attempted - System confused WinErr: 006 Malicious error - Desqview found on drive WinErr: 007 System price error - Inadequate money spent o WinErr: 008 Broken window - Watch out for glass fragments WinErr: 009 Horrible bug encountered - God knows what has WinErr: 00A Promotional literature overflow - Mailbox ful WinErr: 00B Inadequate disk space - Free at least 50MB WinErr: 00C Memory hog error - More RAM needed. More! Mor WinErr: 00D Window closed - Do not look outside WinErr: 00E Window open - Do not look inside WinErr: 00F Unexplained error - Please tell us how this h WinErr: 010 Reserved for future mistakes by our developer WinErr: 011 Window open - Do not look outside WinErr: 012 Window closed - Do not look insided
  33. Credit: http://www.shaanhaider.com/2011/09/windows-8s-blue-screen-of-death-is-new.html

  34. Credits: http://businessfinancestore.com/blogs/marketingyourbusiness/files/2011/08/Bad_Customer_Service.jpg

  35. None
  36. Credit: http://www.airbnb.com

  37. We connect people who have space to spare with those

    who are looking for a place to stay. Guests can build real connections with their hosts, gain access to distinctive spaces, and immerse themselves in the culture of their destinations... - airbnb.com
  38. Credit: http://techcrunch.com/

  39. None
  40. Credit: http://www.airbnb.com

  41. Credit: http://www.airbnb.com

  42. Credit: http://www.airbnb.com

  43. Credit: http://www.airbnb.com

  44. Credit: http://www.airbnb.com

  45. Credit: http://www.airbnb.com

  46. Credit: http://www.airbnb.com

  47. 1. What are customer touchpoints? 2. Why touchpoints are crucial?

    3. How to identify touchpoints? 4. How to translate customer touchpoints into your UI?
  48. Touchpoints evolve from user insights

  49. The customer experience process starts at the moment the customer

    becomes aware of your company.
  50. becomes aware that product/ service/ solution exist does preliminary research

    of product/ services gets buy- in to purchase solution does detailed research of solutions short-lists solution demos or downloads trial version decides to purchase product identifies a problem becomes aware of the product makes contact with the company Sales Funnel
  51. Map out a customer journey

  52. None
  53. None
  54. None
  55. None
  56. Credit: http://fortheloveofbikes.blogspot.com/

  57. None
  58. Credit: http://www.knog.com.au/

  59. Credit: http://www.knog.com.au/

  60. Credit: http://www.knog.com.au/

  61. Credit: http://www.knog.com.au/

  62. Credit: http://www.knog.com.au/

  63. Credit: http://experiencematters.files.wordpress.com/2009/03/legowheel.png

  64. •Hears about it from friends or sees it in friends’

    home •Sees it on web, on TV or in magazine •House remodel/build •Broken TV •Super Bowl •Wedding gift (life event gift) •Digital switchover in 2009 •The “Joneses” got one •Children want a TV (hand me down) •Buy DVD or other high tech gear •How much? (Can I afford it?) •Is it worth it? •Is it an improvement? •Is it cool? •What will my friends think? •Status quo – satisfied with TV •Not tech aware or interested •Ask friends for advice •Visit stores, ask sales people questions •Read web sites, blogs, magazines for reviews and to gain understanding of domain •Understand impact on other CE components •Learn jargon, brands •Look for sales •Make the best choice/not a bad choice •Get the best deal •Satisfy my needs •Trump my neighbors/friends •Latest and greatest •Get up to speed •Know enough to not get duped by sales person •What is the best? •What can I get for my budget? •Is it future proof? •Will it fit in my room/apt? •Who can I trust? (Brand, Store, Sales Person) •Does/will it work with my game console, DVD player? •Are there hidden costs/things I will need to buy? •Will it last? •Will it go on sale soon? When will prices drop? •Do I have enough information? •Can I get HDTV? •What’s important? •Is it easy to use? •Honest, unbiased reviews •Too much to learn •No time to do the necessary research •Analysis paralysis: Too many choices & options ACTIVITIES MOTIVATIONS QUESTIONS BARRIERS •Go to retailer •Talk to sales person •Compare side by side •Compare warranties •Consider extended warranty •Consider installation service •See different model on sale •Get out quickly as kids acting up in store •Sale going on •Sports event coming up •New hot model released •Sales person recommended •Do I want it? •How do I get it home? •Is it in stock? •On sale? •Should I buy the service warranty? •Do I need this? •Should I buy this? •How much are taxes, shipping and handling costs? •Do my old components, cables, etc work with the new TV? •Don’t have desired model in stock •Unhelpful/ignorant sales person •Buyer’s remorse (may revert back to last stage) •Lingo and acronyms too confusing to make a decision •Open box/packaging •Look for/read directions •Confirm all parts are present (e.g. remote) •Plug in/power TV •Connect components •Test system (e.g. movie, broadcast) •Adjust TV settings •Set up mounting hardware •Place on wall/stand •Hire professional installer if not doing oneself •Program remote •Educate family, friends on use •Call customer service •Complete/submit warranty information •Get it finished fast (Busy, excited to see it work) •Relish unboxing (but not make it challenging) •Avoid frustration •Don’t hurt back lifting it •Check out the new HD broadcast/DVD •Brag to friends •Is it damaged? (Inspect packaging, TV. Power on before placement) •Do I need help to set up/install TV? •Do I need the directions? •Do I have every thing I need? •How do I change the settings? •How do I get the TV paired with the universal remote? •What do I do with my old TV? Remote? Disposal versus recycle •What do all these inputs/outputs go to? •What to do with old furniture? •Move old TV to another room and connect it up. Buy other components to go with it. •Too complicated to set up/pair with other components •Can’t just plug in and watch TV •Too many directions; instruction booklet is too thick •No time for an involved set up AWARENESS RESEARCH PURCHASE OOBE Credit: http://blogs.hbr.org/cs/2010/11/using_customer_journey_maps_to.html
  65. Credit: http://files.thisisservicedesignthinking.com/tisdt_cujoca.pdf

  66. Credit: http://creativeperch.com

  67. 1. What are customer touchpoints? 2. Why touchpoints are crucial?

    3. How to identify touchpoints? 4. How to translate customer touchpoints into your UI?
  68. Casestudy http://www.hotgloo-v2.com former website

  69. “What’s the purpose of our website?”

  70. Research Concept Build heuristic analysis content analysis benchmark usability test

    user test sitemap flowchart wireframing design <code/> Run
  71. ? Customer Journey

  72. None
  73. None
  74. Identify the needs, the wants and the how to’s.

  75. Benchmark

  76. How are our competitors presenting themselves? very technical feature oriented

    focus soly on the app unemotional “boring”
  77. Analyzed Metrics

  78. 53%

  79. 53% exit rate on our sign-up page.

  80. Home........................... 45% Pricing overview.......... 53% Sign-up Step1.............. 23% Sign-up Step2..............

    5% Sign-up Step3.............. 5% Sign-up Step4.............. 22%
  81. None
  82. None
  83. None
  84. Evaluated Support Conversations

  85. None
  86. Conducted a Customer Satisfaction Survey

  87. 9% 10% 49% 31% How long have you been using

    HotGloo? Less than 1 month 1 to 6 months 6 months to 1 year More than 1 year
  88. 9% 39% 24% 15% 10% 3% How often do you

    use HotGloo? Never Once a year Every 2-4 months Monthly Weekly Daily
  89. 9% 17% 16% 1% 5% 42% 10% How did you

    come accross HotGloo? Recommended by friends Recommended on a blog Saw Demo Conference Searchengine Social-media channels Banner-Ad Others
  90. 5% 10% 19% 17% 2% 18% 11% 17% Why did

    you choose HotGloo? Quality Price Design Customer support First use experience Accessability Collaboration Others simple to use effective interactive responsive collaborative
  91. Video Tutorials HotGloo Vimeo Channel FAQs/Help section HotGloo Customer Forum

    Email Support 0 % 25 % 50 % 75 % 100 % What do you think about the help section? Didn’t even know Not used yet Not helpful Helpful Very Helpful
  92. like simple productive like the UI easy access listening to

    users fast easy to use inexpensive collaborative good perfomrance fast support reliable support
  93. dislike login is too complicated feature XX feature XX feature

    XX feature XX feature XX feature XX feature XX feature XX feature XX feature XX
  94. None
  95. Think aloud!

  96. ?

  97. None
  98. tour sign up sign in help contact pricing landing page

    copy key visual call to action IA support system mailing facebook blog APP twitter customer forum tutorials news letter Usability website channels
  99. Step1: Strategy

  100. Credit: http://books.verg.es/img/elements_of_ux_5planes.jpg

  101. Step2: Theme

  102. None
  103. Step3: Key Visual

  104. None
  105. None
  106. None
  107. None
  108. Step4: Sitemap

  109. None
  110. Step5: Wireframing

  111. Credit: http://www.dubberly.com/articles/interactions-the-experience-cycle.html

  112. None
  113. None
  114. None
  115. None
  116. None
  117. None
  118. Step4: Design

  119. None
  120. None
  121. None
  122. None
  123. None
  124. dislike login is too complicated feature XX feature XX feature

    XX feature XX feature XX feature XX feature XX feature XX feature XX feature XX
  125. None
  126. None
  127. None
  128. Ok, but what about the M in sMart? page visits

    sign ups *3 *2
  129. Wrap up Identify the needs, the wants, and the how

    to’s. Find the key sources, and platforms. Look for the gap and fill it. Make your touch points count.
  130. Credit: http://www.gallonjug.com/assets/images/secret_sauce.png The secret Sauce?

  131. L KE I

  132. L VE O

  133. “The essential difference between an emotion and reason is that

    emotion leads to action while reason leads to conclusion.” - Donald Calne, Neurologist
  134. Good UX means that everyone wins.

  135. “A beholder must create his own experience.” - John Dewey,

  136. ping me! twitter.com/wdbecvar TAKK. wolfbecvar.com hotgloo.com