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.

Transcript

1. Some Things You Can’t Wireframe Wolf Becvar @wdbecvar Frontend2011
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
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 Experience
20. CRM UX Marketing Design Branding Dev Sales
22. •visual design •interaction design •information architecture •user research Isn’t this? YES
23. “How do I improve our customer experience?”
24. Credit: http://joshunfried.com/wp-content/uploads/2010/10/wallmart_facebook.jpg
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
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/
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
56. Credit: http://fortheloveofbikes.blogspot.com/
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
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%
84. Evaluated Support Conversations
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
95. Think aloud!
96. ?
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
103. Step3: Key Visual
108. Step4: Sitemap
110. Step5: Wireframing
111. Credit: http://www.dubberly.com/articles/interactions-the-experience-cycle.html
118. Step4: Design
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
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, Philosopher
136. ping me! twitter.com/wdbecvar TAKK. wolfbecvar.com hotgloo.com