Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue

Usability vs Design – When Does One Trump the Other? AI (Alexander Interactive) and Saks Fifth Avenue

• 1.
  USABILITY & DESIGN WHENDOES ONE TRUMP THE OTHER? PRESENTED BY Josh Levine & Jordan Lustig April 5, 2012
• 3.
  DESIGN JOSHLEVINE CXO END-TO-END ECOMMERCE DESIGN & DEVELOPMENT Founded 2002, Independent • Manhattan • 50 Hands-On Employees • Transactional Expertise • IMA Top 10 Agency
• 4.
  UX JORDANLUSTIG DIRECTOR OF PRODUCT MANAGEMENT Omni-Channel Luxury Retailer • Launched Saks.com in 2000 • New York Based • 46 Stores in 22 States • Dedicated to our Customers
• 5.
  2 YEARS AGOTODAY
• 6.
  Usability So what isit?
• 7.
  WHAT IS IT? THEEASE OF USE OF A HUMAN-MADE OBJECT.
• 8.
  WHY SHOULD YOUCARE? ON THE WEB, IT IS NECESSARY FOR SURVIVAL. Copyright: Jakob Nielsen’s Alertbox
• 9.
  IF YOUR SITEHAS POOR USABILITY, PEOPLE LEAVE.
• 10.
  HOW DO WE CREATE USABILITY?
• 11.
  LEARNABLE. 1 On first encounter with an interface, it must be easy to accomplish basic tasks without needing to acquire new skill sets.
• 12.
  EFFICIENT. 2 Customers achieve maximum productivity in minimum amount of time. Performing tasks can be accomplished easily and quickly.
• 13.
  FINDABLE. 3 Locate what you are looking for, providing multiple ways of finding things.
• 14.
  MEMORABLE. 4 What is learned on the first encounter is easily applied to other areas/tasks within the site and easily retained for subsequent visits.
• 15.
  FORGIVING. 5 It is easy to recover. Errors don’t lead to a cascade of additional problems and wasted time.
• 16.
  Analytics WHAT User Testing Multivariate ARE THE Prototyping TOOLS? Wireframes Surveys
• 17.
  Design So what isit?
• 18.
  WHAT IS IT? ASET OF PRINCIPLES CONCERNED WITH THE NATURE AND APPRECIATION OF BEAUTY, ART, TASTE.
• 19.
  WHY SHOULD YOUCARE? CREATES AN EMOTIONAL CONNECTION
• 20.
  WHY SHOULD YOUCARE? AND TELLS A COMPELLING STORY.
• 21.
  HOW DO WE CREATEGREAT DESIGN?
• 22.
  Color The ELEMENTS Type Texture Imagery
• 23.
  Balance The Unity PRINCIPLES Contrast White Space Repetition
• 24.
  ULTIMATELY, GREAT DESIGNESTABLISHES Emotional Connection Brand Story Visual Organization Credibility Delight
• 25.
  ARE USABILITY AND DESIGN REALLYAT ODDS?
• 26.
  U The beauty of the Web lies in “ its function, not its form, and I would rather that my sites attract attention because they are widely useful and usable than because they are pretty.
• 27.
  U While a high-quality site is “ important, the majority of people today value usability more than good looks or fanciness.
• 28.
  D Look after the design and “ usability will look out for itself.
• 29.
  D Attractive things “ work better.
• 30.
  DIRECT FROM FLORIDA WEDNESDAY RINGSIDE AT ORLANDO 1:30 PM DESIGN USABILITY
• 31.
  Harmony Design and Usabilityare not separate entities. Truly compelling experiences consist of harmonious balance.
• 32.
  AESTHETICS USABILITY FORM FUNCTION BEAUTY UTILITY HOW IT LOOKS HOW IT WORKS JOY OF USE EASE OF USE
• 33.
  BIG GUYS ARECATCHING ON COMPANIES NOT NORMALLY ASSOCIATED WITH AESTHETICS, NO LONGER SACRIFICE FUNCTION FOR FORM.
• 34.
  Saks How we foundharmony.
• 35.
  CASE 1 NAVIGATION REDESIGN
• 37.
  BEFORE AFTER ** Note: Need to replace this footer with final, live version **
• 38.
  BEFORE DESIGN Define roles & ownership. Business requirements. Dig in to data and brand. Create KPI’s and testing strategy. HOW WE DURING DESIGN Sketch before wires. DID IT Multiple iterations. Get management buy-in. AFTER DESIGN Test. Share findings. Measure and refine.
• 39.
  BUSINESS GOALS &REQUIREMENTS Modernize design. Be more on brand. Maximize real estate. More flexibility. Fulfill long term strategies. Must integrate within existing site. ** Note: Need to replace this footer with final, live version **
• 43.
  ** Note: Needto replace this footer with final, live version **
• 44.
  ** Note: Needto replace this footer with final, live version **
• 45.
  DISPUTE IS INEVITABLE.AND HEALTHY. Stubborn IT folks Subjective executives The significant others Arrogant designers Grumpy product owners
• 46.
  CASE 2 CATEGORY LANDING PAGES
• 48.
  BUSINESS GOALS &REQUIREMENTS More flexibility for creative. Maximize real estate. Leverage opportunities with vendors. More editorialized content. Bring more emotion (too flat).
• 51.
  CASE 3 MOBILE CHECKOUT
• 53.
  MOBILE – CHECKOUT/ OLD (jordan, do you have a screenshot of Step 1?)
• 54.
  MOBILE – CHECKOUT/ NEW (Jordan, send me any updated screenshots)
• 55.
  So Who’s Doing It Right?
• 57.
  BUT MOST OFALL, DIFFERENTIATE
• 62.
  BEAUTIFUL ON THEINSIDE TOO CREATE A PLATFORM TO SHOWCASE YOUR PRODUCTS
• 69.
  Key Takeaways
• 70.
  FACE IT Usability isDesign. Design is having an effect on your customers whether you are consciously in control or not. Easy-to-use isn’t good enough. Design is what differentiates it.
• 71.
  PRACTICE IT Everything musthave a purpose. Don’t let design decisions interfere with key UX principles. KPI’s Clarify roles & responsibilities.
• 72.
  PROTECT IT Empathize –treat your co- workers as partners. Debate. Move on. Test.
• 73.
  PREACH IT Everyone needsto be a brand champion. Integrate into your culture. Style guides are crucial and constantly evolve.
• 74.
  Harmony Josh Levine [email protected] Jordan Lustig [email protected]