Some Things You Can't Wireframe

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 wolfbecvar.com

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 design• clear view of what needs to be designed• get clients involved in the planning process

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 customer touchpoints into your UI?

“every point in time the customer‘touches’ or connects with yourcompany throughout the entireproduct/service delivery; pre-,during and post-purchase.”- Touchpoint Experience (2004)

“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)

Touchpoints =Interactions

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

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 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

Touchpoints canmake or break agood experience.

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

Credit: http://www.shaanhaider.com/2011/09/windows-8s-blue-screen-of-death-is-new.html

Credits: http://businessﬁnancestore.com/blogs/marketingyourbusiness/ﬁles/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 withtheir hosts, gain access to distinctivespaces, and immerse themselves in theculture of their destinations...- airbnb.com

Credit: http://techcrunch.com/

Credit: http://www.airbnb.com

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 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

Map out acustomerjourney

Credit: http://fortheloveofbikes.blogspot.com/

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 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

Credit: http://files.thisisservicedesignthinking.com/tisdt_cujoca.pdf

Credit: http://creativeperch.com

http://www.hotgloo-v2.comCasestudy former website

“What’s thepurpose of our website?”

Research Concept Build Runheuristic analysiscontent analysis sitemap designbenchmark flowchart <code/> user testusability test wireframing

? Customer Journey

Identify the needs, the wants and the how to’s.

Benchmark

How are our competitorspresenting themselves? feature oriented very technical unemotional “boring” focus soly on the app

Analyzed Metrics

53% exit rate onour sign-up page.

Home........................... 45%Pricing overview.......... 53%Sign-up Step1.............. 23%Sign-up Step2.............. 5%Sign-up Step3.............. 5%Sign-up Step4.............. 22%

Evaluated Support Conversations

Conducted a Customer Satisfaction Survey

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

How often do you use HotGloo? 24% 15% 39% 10% 9% 3% Never Once a year Every 2-4 months Monthly Weekly Daily

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

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

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

simple reliable support listening to users productive easy access like the UI likeeasy to use inexpensive fast collaborativegood perfomrance fast support

feature XX feature XX feature XX feature XX feature XXfeature XX dislike feature XX feature XX feature XX feature XX login is too complicated

Think aloud!

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

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 feature XXfeature XX dislike feature XX feature XX feature XX feature XX login is too complicated

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 and fill it. Make your touch points count.

The secret Sauce?Credit: http://www.gallonjug.com/assets/images/secret_sauce.png

“The essential differencebetween an emotion andreason is that emotion leadsto action while reason leadsto conclusion.”- Donald Calne, Neurologist

Good UX meansthat everyonewins.

“A beholder mustcreate his ownexperience.”- John Dewey, Philosopher

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

http://blog.hotgloo.com	6445
http://www.frontend2011.com	295
http://www.conseilsmarketing.fr	211
http://www.scoop.it	31
http://www.conseilsmarketing.com	27
http://feeds.feedburner.com	25
http://dex.io	18
http://lanyrd.com	10
http://feeds2.feedburner.com	9
https://si0.twimg.com	9
http://paper.li	6
https://twimg0-a.akamaihd.net	5
http://translate.googleusercontent.com	5
http://www.m-e-e-t.com	3
http://us-w1.rockmelt.com	2
http://www.alphawavesandbeyond.com	1

Some Things You Can't Wireframe

by Wolf Becvar on Oct 13, 2011

Accessibility

Categories

Upload Details

Usage Rights

16 Embeds 7,102

Statistics

Some Things You Can’t Wireframe Presentation Transcript