1. USABILITY & DESIGNWHEN DOES ONE TRUMP THE OTHER?PRESENTED BYJosh Levine & Jordan Lustig April 5, 2012

2. DESIGNJOSH LEVINE CXO END-TO-END ECOMMERCEDESIGN & DEVELOPMENTFounded 2002, Independent Manhattan 50 Hands-On Employees Transactional Expertise IMA Top 10 Agency 3. UXJORDAN LUSTIGDIRECTOR OF PRODUCT MANAGEMENTOmni-Channel Luxury Retailer Launched Saks.com in 2000 New York Based 46 Stores in 22 States Dedicated to our Customers 4. 2 YEARS AGO TODAY 5. UsabilitySo what is it? 6. WHAT IS IT?THE EASE OF USEOF A HUMAN-MADEOBJECT. 7. WHY SHOULD YOU CARE?ON THE WEB,IT IS NECESSARYFOR SURVIVAL. Copyright: Jakob Nielsens Alertbox 8. IF YOUR SITE HASPOOR USABILITY,PEOPLE LEAVE. 9. HOW DO WECREATEUSABILITY? 10. LEARNABLE.1 On rst encounter with an interface, it mustbe easy to accomplish basic tasks withoutneeding to acquire new skill sets. 11. EFFICIENT.2 Customers achieve maximum productivityin minimum amount of time. Performingtasks can be accomplished easily andquickly. 12. FINDABLE.3 Locate what you are looking for,providing multiple ways of ndingthings. 13. MEMORABLE.4 What is learned on the rst encounter iseasily applied to other areas/tasks withinthe site and easily retained for subsequentvisits. 14. FORGIVING.5 It is easy to recover. Errors dont lead toa cascade of additional problems andwasted time. 15. AnalyticsWHATUser TestingMultivariateARE THE Prototyping TOOLS? WireframesSurveys 16. DesignSo what is it? 17. WHAT IS IT?A SET OF PRINCIPLESCONCERNED WITHTHE NATURE ANDAPPRECIATION OFBEAUTY, ART, TASTE. 18. WHY SHOULD YOU CARE?CREATES ANEMOTIONALCONNECTION 19. WHY SHOULD YOU CARE?AND TELLS ACOMPELLINGSTORY. 20. HOW DO WECREATE GREATDESIGN? 21. Color TheELEMENTS Type Texture Imagery 22. BalanceThe UnityPRINCIPLES Contrast White Space Repetition 23. ULTIMATELY, GREAT DESIGN ESTABLISHESEmotional ConnectionBrand StoryVisual OrganizationCredibilityDelight 24. ARE USABILITYAND DESIGNREALLY AT ODDS? 25. UThe beauty of the Web lies in its function, not its form, andI would rather that my sitesattract attention because theyare widely useful and usablethan because they are pretty. 26. UWhile a high-quality site is important, the majority ofpeople today value usabilitymore than good looks orfanciness. 27. DLook after the design and usability will look out foritself. 28. DAttractive things work better. 29. DIRECT FROM FLORIDA WEDNESDAYRINGSIDE AT ORLANDO 1:30 PMDESIGNUSABILITY 30. HarmonyDesign and Usability are not separateentities. Truly compelling experiencesconsist of harmonious balance. 31. AESTHETICSUSABILITY FORMFUNCTION BEAUTYUTILITYHOW IT LOOKS HOW IT WORKSJOY OF USE EASE OF USE 32. BIG GUYS ARE CATCHING ONCOMPANIES NOTNORMALLY ASSOCIATEDWITH AESTHETICS,NO LONGER SACRIFICEFUNCTION FOR FORM. 33. SaksHow we found harmony. 34. CASE 1NAVIGATIONREDESIGN 35. BEFOREAFTER** Note: Need to replace this footer with nal, live version ** 36. BEFORE DESIGN Dene roles & ownership. Business requirements. Dig in to data and brand. Create KPIs and testing strategy.HOW WE DURING DESIGN Sketch before wires.DID IT Multiple iterations. Get management buy-in. AFTER DESIGN Test. Share ndings. Measure and rene. 37. BUSINESS GOALS & REQUIREMENTSModernize design.Be more on brand.Maximize real estate.More exibility.Fulll long term strategies.Must integrate within existing site.** Note: Need to replace this footer with nal, live version ** 38. ** Note: Need to replace this footer with nal, live version ** 39. ** Note: Need to replace this footer with nal, live version ** 40. DISPUTE IS INEVITABLE. AND HEALTHY.Stubborn IT folksSubjective executivesThe signicant othersArrogant designersGrumpy product owners 41. CASE 2CATEGORYLANDING PAGES 42. BUSINESS GOALS & REQUIREMENTSMore exibility for creative.Maximize real estate.Leverage opportunities with vendors.More editorialized content.Bring more emotion (too at). 43. CASE 3MOBILECHECKOUT 44. MOBILE CHECKOUT / OLD (jordan, do you have a screenshot of Step 1?) 45. MOBILE CHECKOUT / NEW (Jordan, send me any updated screenshots) 46. So WhosDoing ItRight? 47. BUT MOST OF ALL, DIFFERENTIATE 48. BEAUTIFUL ON THE INSIDE TOOCREATE A PLATFORMTO SHOWCASEYOUR PRODUCTS 49. KeyTakeaways 50. FACE ITUsability is Design.Design is having an eect onyour customers whether you areconsciously in control or not.Easy-to-use isnt good enough.Design is what dierentiates it. 51. PRACTICE ITEverything must have a purpose.Dont let design decisionsinterfere with key UX principles.KPIsClarify roles & responsibilities. 52. PROTECT ITEmpathize treat your co-workers as partners.Debate. Move on. Test. 53. PREACH ITEveryone needs to be a brandchampion.Integrate into your culture.Style guides are crucial andconstantly evolve. 54. HarmonyJosh Levine jl@alexanderinteractive.comJordan Lustig jordan_lustig@s5a.com