Your SlideShare is downloading. ×
11     20            Some Things   nd  te            You Can’t Wireframe   onFr                 Wolf Becvar @wdbecvar
Credit: http://3.bp.blogspot.com/_5Usp1g7Jb2Q/TVMadeM7LrI/AAAAAAAAAAY/9-nqfXZk1Sw/s1600/darth-vader-on-vacation.jpg
Credit: http://fc08.deviantart.net/fs71/f/2009/350/5/5/Darth_Vader_loved_too_by_Peagabassi.png
Credit: http://www.wallchan.com/images/wallpapers/1136-darth-vader-guinness-wallpaper-wallchan-1680x1050.jpg
Credit: http://www.imgbase.info/images/safe-wallpapers/miscellaneous/funny/15559_funny_darth_vader.jpg
Designing for experience byidentifying customer touchpoints
#touchpoints                   Wolf Becvaruse the hashtagHI.               twitter.com/wdbecvar                  wolfbecva...
Don’t get me wrong ...
I   wireframes
Wireframes help us ...• get a clear picture• focus on each page’s purpose• no distraction through clutter of color or desi...
Wireframes arejust one part of the equation.
1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate custome...
1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate custome...
“every point in time the customer‘touches’ or connects with yourcompany throughout the entireproduct/service delivery; pre...
“every point of contact—online and off;each communication, human resource,branding, marketing and sales processinitiative ...
Touchpoints     =Interactions
Interactive           MarketingCustomer                                                       Social Service              ...
UXDesign                               Dev                                       CRMSales         Branding        Marketing
•visual design•interaction design•information architecture•user research   YES           Isn’t this?
“How do Iimprove our  customerexperience?”
Credit: http://joshunfried.com/wp-content/uploads/2010/10/wallmart_facebook.jpg
"Design is a funny word. Some people thinkdesign means how it looks. But of course,if you dig deeper, its really how itwor...
1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate custome...
Touchpoints canmake or break agood experience.
WinErr:   001   Windows loaded - System in dangerWinErr:   002   No Error - YetWinErr:   003   Dynamic linking error - You...
Credit: http://www.shaanhaider.com/2011/09/windows-8s-blue-screen-of-death-is-new.html
Credits: http://businessfinancestore.com/blogs/marketingyourbusiness/files/2011/08/Bad_Customer_Service.jpg
Credit: http://www.airbnb.com
We connect people who have space to sparewith those who are looking for a place tostay. Guests can build real connections ...
Credit: http://techcrunch.com/
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
Credit: http://www.airbnb.com
1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate custome...
Touchpointsevolve fromuser insights
The customer experienceprocess starts at themoment the customerbecomes aware of yourcompany.
Sales Funnel          becomes aware of the product                                                makes contact with the c...
Map out acustomerjourney
Credit: http://fortheloveofbikes.blogspot.com/
Credit: http://www.knog.com.au/
Credit: http://www.knog.com.au/
Credit: http://www.knog.com.au/
Credit: http://www.knog.com.au/
Credit: http://www.knog.com.au/
Credit: http://experiencematters.files.wordpress.com/2009/03/legowheel.png
ACTIVITIES      •Hears about it from friends or sees it in friends’ home                • Sees it on web, on TV or in maga...
Credit: http://files.thisisservicedesignthinking.com/tisdt_cujoca.pdf
Credit: http://creativeperch.com
1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate custome...
http://www.hotgloo-v2.comCasestudy        former website
“What’s thepurpose of our  website?”
Research Concept Build Runheuristic analysiscontent analysis     sitemap       designbenchmark            flowchart     <c...
?    Customer Journey
Identify the needs, the wants      and the how to’s.
Benchmark
How are our competitorspresenting themselves?                                 feature oriented very technical             ...
Analyzed Metrics
53%
53% exit rate onour sign-up page.
Home........................... 45%Pricing overview.......... 53%Sign-up Step1.............. 23%Sign-up Step2................
Evaluated Support  Conversations
Conducted a Customer Satisfaction Survey
How long have you been using HotGloo?             31%                                  49%               9%               ...
How often do you use HotGloo?               24%       15%                     39%              10%                      9%...
How did you come accross HotGloo?                      10%                 9%            17%                     42%      ...
Why did you choose HotGloo?                        5%                  10%           17%simple to use  effective interacti...
What do you think about the help section?        Video Tutorials HotGloo Vimeo Channel      FAQs/Help sectionHotGloo Custo...
simple         reliable support        listening to users                    productive                                   ...
feature XX           feature XX  feature XX                      feature XX                                              f...
Think aloud!
?
sign up landing                    page  tour                       call                              to                  ...
Step1: Strategy
Credit: http://books.verg.es/img/elements_of_ux_5planes.jpg
Step2: Theme
Step3: Key Visual
Step4: Sitemap
Step5: Wireframing
Credit: http://www.dubberly.com/articles/interactions-the-experience-cycle.html
Step4: Design
feature XX           feature XX  feature XX                      feature XX                                              f...
Ok, but what aboutthe M in sMart?        page        visits       *2         sign         ups         *3
Wrap upIdentify the needs, the wants, and the how to’s.    Find the key sources, and platforms.         Look for the gap a...
The secret Sauce?Credit: http://www.gallonjug.com/assets/images/secret_sauce.png
LIKE
LOVE
“The essential differencebetween an emotion andreason is that emotion leadsto action while reason leadsto conclusion.”- Do...
Good UX meansthat everyonewins.
“A beholder mustcreate his ownexperience.”- John Dewey, Philosopher
TAKK.                       ping me!    wolfbecvar.com    twitter.com/wdbecvar    hotgloo.com
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Some Things You Can't Wireframe
Upcoming SlideShare
Loading in...5
×

Some Things You Can't Wireframe

43,726

Published on

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.

Published in: Design, Technology, Business
1 Comment
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
43,726
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Transcript of "Some Things You Can't Wireframe "

  1. 1. 11 20 Some Things nd te You Can’t Wireframe  onFr Wolf Becvar @wdbecvar
  2. 2. Credit: http://3.bp.blogspot.com/_5Usp1g7Jb2Q/TVMadeM7LrI/AAAAAAAAAAY/9-nqfXZk1Sw/s1600/darth-vader-on-vacation.jpg
  3. 3. Credit: http://fc08.deviantart.net/fs71/f/2009/350/5/5/Darth_Vader_loved_too_by_Peagabassi.png
  4. 4. Credit: http://www.wallchan.com/images/wallpapers/1136-darth-vader-guinness-wallpaper-wallchan-1680x1050.jpg
  5. 5. Credit: http://www.imgbase.info/images/safe-wallpapers/miscellaneous/funny/15559_funny_darth_vader.jpg
  6. 6. Designing for experience byidentifying customer touchpoints
  7. 7. #touchpoints Wolf Becvaruse the hashtagHI. twitter.com/wdbecvar wolfbecvar.com
  8. 8. Don’t get me wrong ...
  9. 9. I wireframes
  10. 10. Wireframes help us ...• 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
  11. 11. Wireframes arejust one part of the equation.
  12. 12. 1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate customer touchpoints into your UI?
  13. 13. 1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate customer touchpoints into your UI?
  14. 14. “every point in time the customer‘touches’ or connects with yourcompany throughout the entireproduct/service delivery; pre-,during and post-purchase.”- Touchpoint Experience (2004)
  15. 15. “every point of contact—online and off;each communication, human resource,branding, marketing and sales processinitiative creates touchpoints. The qualityof touchpoint experiences drivesperceptions, actions and relationships.”- Touchpoint Metrics (2003)
  16. 16. Touchpoints =Interactions
  17. 17. Interactive MarketingCustomer Social Service Media Channels Digital Experience Credit: http://incentmedia.files.wordpress.com/2009/10/customer-touch-points.gif
  18. 18. UXDesign Dev CRMSales Branding Marketing
  19. 19. •visual design•interaction design•information architecture•user research YES Isn’t this?
  20. 20. “How do Iimprove our customerexperience?”
  21. 21. Credit: http://joshunfried.com/wp-content/uploads/2010/10/wallmart_facebook.jpg
  22. 22. "Design is a funny word. Some people thinkdesign means how it looks. But of course,if you dig deeper, its really how itworks ...To design something really well,you have to get it. You have to really grokwhat its all about. It takes a passionatecommitment to really thoroughlyunderstand something, chew it up, not justquickly swallow it. Most people dont takethe time to do that."- Steve Jobs / Wired magazine, 1994
  23. 23. 1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate customer touchpoints into your UI?
  24. 24. Touchpoints canmake or break agood experience.
  25. 25. WinErr: 001 Windows loaded - System in dangerWinErr: 002 No Error - YetWinErr: 003 Dynamic linking error - Your mistake is now iWinErr: 004 Erroneous error - Nothing is wrongWinErr: 005 Multitasking attempted - System confusedWinErr: 006 Malicious error - Desqview found on driveWinErr: 007 System price error - Inadequate money spent oWinErr: 008 Broken window - Watch out for glass fragmentsWinErr: 009 Horrible bug encountered - God knows what hasWinErr: 00A Promotional literature overflow - Mailbox fulWinErr: 00B Inadequate disk space - Free at least 50MBWinErr: 00C Memory hog error - More RAM needed. More! MorWinErr: 00D Window closed - Do not look outsideWinErr: 00E Window open - Do not look insideWinErr: 00F Unexplained error - Please tell us how this hWinErr: 010 Reserved for future mistakes by our developerWinErr: 011 Window open - Do not look outsideWinErr: 012 Window closed - Do not look insided
  26. 26. Credit: http://www.shaanhaider.com/2011/09/windows-8s-blue-screen-of-death-is-new.html
  27. 27. Credits: http://businessfinancestore.com/blogs/marketingyourbusiness/files/2011/08/Bad_Customer_Service.jpg
  28. 28. Credit: http://www.airbnb.com
  29. 29. We connect people who have space to sparewith those who are looking for a place tostay. Guests can build real connections withtheir hosts, gain access to distinctivespaces, and immerse themselves in theculture of their destinations...- airbnb.com
  30. 30. Credit: http://techcrunch.com/
  31. 31. Credit: http://www.airbnb.com
  32. 32. Credit: http://www.airbnb.com
  33. 33. Credit: http://www.airbnb.com
  34. 34. Credit: http://www.airbnb.com
  35. 35. Credit: http://www.airbnb.com
  36. 36. Credit: http://www.airbnb.com
  37. 37. Credit: http://www.airbnb.com
  38. 38. 1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate customer touchpoints into your UI?
  39. 39. Touchpointsevolve fromuser insights
  40. 40. The customer experienceprocess starts at themoment the customerbecomes aware of yourcompany.
  41. 41. Sales Funnel becomes aware of the product makes contact with the company becomes does does demos or decides toidentifies aware that preliminary gets buy- detailed short-lists product/ research of in to research downloads purchase a solution service/ product/ purchase of trial problem product solution services solution solutions version exist
  42. 42. Map out acustomerjourney
  43. 43. Credit: http://fortheloveofbikes.blogspot.com/
  44. 44. Credit: http://www.knog.com.au/
  45. 45. Credit: http://www.knog.com.au/
  46. 46. Credit: http://www.knog.com.au/
  47. 47. Credit: http://www.knog.com.au/
  48. 48. Credit: http://www.knog.com.au/
  49. 49. Credit: http://experiencematters.files.wordpress.com/2009/03/legowheel.png
  50. 50. ACTIVITIES •Hears about it from friends or sees it in friends’ home • Sees it on web, on TV or in magazine •Ask friends for advice •Visit stores, ask sales people questions •Go to retailer •Talk to sales person •Open box/packaging •Look for/read directions •Read web sites, blogs, magazines for reviews and to •Compare side by side •Confirm all parts are present (e.g. remote) gain understanding of domain •Compare warranties •Plug in/power TV •Understand impact on other CE components •Consider extended warranty •Connect components •Learn jargon, brands •Consider installation service •Test system (e.g. movie, broadcast) •Look for sales •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 MOTIVATIONS •House remodel/build •Make the best choice/not a bad choice •See different model on sale •Get it finished fast (Busy, excited to see it work) •Broken TV •Get the best deal •Get out quickly as kids acting up in store • Relish unboxing (but not make it challenging) •Super Bowl •Satisfy my needs •Sale going on •Avoid frustration •Wedding gift (life event gift) •Trump my neighbors/friends •Sports event coming up •Don’t hurt back lifting it •Digital switchover in 2009 •Latest and greatest •New hot model released •Check out the new HD broadcast/DVD •The “Joneses” got one •Get up to speed •Sales person recommended •Brag to friends •Children want a TV (hand me down) •Know enough to not get duped by sales person •Buy DVD or other high tech gear AWARENESS RESEARCH PURCHASE OOBE QUESTIONS •How much? (Can I afford it?) •What is the best? •Do I want it? •Is it damaged? (Inspect packaging, TV. Power on •What can I get for my budget? •How do I get it home? before placement) •Is it worth it? •Is it future proof? •Is it in stock? •Do I need help to set up/install TV? •Is it an improvement? •Will it fit in my room/apt? •On sale? •Do I need the directions? •Is it cool? •Who can I trust? (Brand, Store, Sales Person) •Should I buy the service warranty? •Do I have every thing I need? •What will my friends think? •Does/will it work with my game console, DVD player? •Do I need this? •How do I change the settings? •Are there hidden costs/things I will need to buy? •Should I buy this? •How do I get the TV paired with the universal remote? •Will it last? •How much are taxes, shipping and handling costs? •What do I do with my old TV? Remote? Disposal versus recycle •Will it go on sale soon? When will prices drop? •Do my old components, cables, etc work with the new TV? •What do all these inputs/outputs go to? •Do I have enough information? •Can I get HDTV? •What’s important? •Is it easy to use?BARRIERS •Status quo – satisfied with TV •Honest, unbiased reviews •Don’t have desired model in stock •What to do with old furniture? •Not tech aware or interested •Too much to learn •Unhelpful/ignorant sales person •Move old TV to another room and connect it up. Buy •No time to do the necessary research •Buyer’s remorse (may revert back to last stage) other components to go with it. •Analysis paralysis: Too many choices & options •Lingo and acronyms too confusing to make a decision •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 Credit: http://blogs.hbr.org/cs/2010/11/using_customer_journey_maps_to.html
  51. 51. Credit: http://files.thisisservicedesignthinking.com/tisdt_cujoca.pdf
  52. 52. Credit: http://creativeperch.com
  53. 53. 1. What are customer touchpoints?2. Why touchpoints are crucial?3. How to identify touchpoints?4. How to translate customer touchpoints into your UI?
  54. 54. http://www.hotgloo-v2.comCasestudy former website
  55. 55. “What’s thepurpose of our website?”
  56. 56. Research Concept Build Runheuristic analysiscontent analysis sitemap designbenchmark flowchart <code/> user testusability test wireframing
  57. 57. ? Customer Journey
  58. 58. Identify the needs, the wants and the how to’s.
  59. 59. Benchmark
  60. 60. How are our competitorspresenting themselves? feature oriented very technical unemotional “boring” focus soly on the app
  61. 61. Analyzed Metrics
  62. 62. 53%
  63. 63. 53% exit rate onour sign-up page.
  64. 64. Home........................... 45%Pricing overview.......... 53%Sign-up Step1.............. 23%Sign-up Step2.............. 5%Sign-up Step3.............. 5%Sign-up Step4.............. 22%
  65. 65. Evaluated Support Conversations
  66. 66. Conducted a Customer Satisfaction Survey
  67. 67. How long have you been using HotGloo? 31% 49% 9% 10% Less than 1 month 1 to 6 months 6 months to 1 year More than 1 year
  68. 68. How often do you use HotGloo? 24% 15% 39% 10% 9% 3% Never Once a year Every 2-4 months Monthly Weekly Daily
  69. 69. How did you come accross HotGloo? 10% 9% 17% 42% 16% 5% 1% Recommended by friends Recommended on a blog Saw Demo Conference Searchengine Social-media channels Banner-Ad Others
  70. 70. Why did you choose HotGloo? 5% 10% 17%simple to use effective interactive 19% 11% responsivecollaborative 18% 17% 2% Quality Price Design Customer support First use experience Accessability Collaboration Others
  71. 71. What do you think about the help section? Video Tutorials HotGloo Vimeo Channel FAQs/Help sectionHotGloo Customer Forum Email Support 0 % 25 % 50 % 75 % 100 % Didn’t even know Not used yet Not helpful Helpful Very Helpful
  72. 72. simple reliable support listening to users productive easy access like the UI likeeasy to use inexpensive fast collaborativegood perfomrance fast support
  73. 73. feature XX feature XX feature XX feature XX feature XXfeature XX dislike feature XX feature XX feature XX feature XX login is too complicated
  74. 74. Think aloud!
  75. 75. ?
  76. 76. sign up landing page tour call to copy action websitesign in key Usability visual IA help contact pricing news twitter letter facebook tutorials system mailing channels blog APP support customer forum
  77. 77. Step1: Strategy
  78. 78. Credit: http://books.verg.es/img/elements_of_ux_5planes.jpg
  79. 79. Step2: Theme
  80. 80. Step3: Key Visual
  81. 81. Step4: Sitemap
  82. 82. Step5: Wireframing
  83. 83. Credit: http://www.dubberly.com/articles/interactions-the-experience-cycle.html
  84. 84. Step4: Design
  85. 85. feature XX feature XX feature XX feature XX feature XXfeature XX dislike feature XX feature XX feature XX feature XX login is too complicated
  86. 86. Ok, but what aboutthe M in sMart? page visits *2 sign ups *3
  87. 87. Wrap upIdentify 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.
  88. 88. The secret Sauce?Credit: http://www.gallonjug.com/assets/images/secret_sauce.png
  89. 89. LIKE
  90. 90. LOVE
  91. 91. “The essential differencebetween an emotion andreason is that emotion leadsto action while reason leadsto conclusion.”- Donald Calne, Neurologist
  92. 92. Good UX meansthat everyonewins.
  93. 93. “A beholder mustcreate his ownexperience.”- John Dewey, Philosopher
  94. 94. TAKK. ping me! wolfbecvar.com twitter.com/wdbecvar hotgloo.com

×