I recently presented at the Internet Retailer Web Design Conference (IRWD) down in Orlando (Feb 13). The topic was "How to achieve harmony between usability and design". Special thanks to Jordan Lustig, from Saks Fifth Avenue, for joining me up on stage. We had a great time. Thank you all for joining us!

1. USABILITY & DESIGN
WHEN DOES ONE TRUMP THE OTHER?
PRESENTED BY
Josh Levine & Jordan Lustig
April 5, 2012

3. DESIGN
JOSH LEVINE
CXO
END-TO-END ECOMMERCE
DESIGN & DEVELOPMENT
Founded 2002, Independent
•
Manhattan
•
50 Hands-On Employees
•
Transactional Expertise
•
IMA Top 10 Agency

4. UX
JORDAN LUSTIG
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 AGO TODAY

6. Usability
So what is it?

7. WHAT IS IT?
THE EASE OF USE
OF A HUMAN-MADE
OBJECT.

8. WHY SHOULD YOU CARE?
ON THE WEB,
IT IS NECESSARY
FOR SURVIVAL.
Copyright: Jakob Nielsen’s Alertbox

9. IF YOUR SITE HAS
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 is it?

18. WHAT IS IT?
A SET OF PRINCIPLES
CONCERNED WITH
THE NATURE AND
APPRECIATION OF
BEAUTY, ART, TASTE.

19. WHY SHOULD YOU CARE?
CREATES AN
EMOTIONAL
CONNECTION

20. WHY SHOULD YOU CARE?
AND TELLS A
COMPELLING
STORY.

21. HOW DO WE
CREATE GREAT
DESIGN?

22. Color
The
ELEMENTS
Type
Texture
Imagery

23. Balance
The
Unity
PRINCIPLES Contrast
White Space
Repetition

24. ULTIMATELY, GREAT DESIGN ESTABLISHES
Emotional Connection
Brand Story
Visual Organization
Credibility
Delight

25. ARE USABILITY
AND DESIGN
REALLY AT 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 Usability are 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 ARE CATCHING ON
COMPANIES NOT
NORMALLY ASSOCIATED
WITH AESTHETICS,
NO LONGER SACRIFICE
FUNCTION FOR FORM.

34. Saks
How we found harmony.

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: Need to replace this footer with final, live version **

44. ** Note: Need to 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 OF ALL, DIFFERENTIATE

62. BEAUTIFUL ON THE INSIDE TOO
CREATE A PLATFORM
TO SHOWCASE
YOUR PRODUCTS

69. Key
Takeaways

70. FACE IT
Usability is Design.
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 must have 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 needs to be a brand
champion.
Integrate into your culture.
Style guides are crucial and
constantly evolve.

74. Harmony
Josh Levine jl@alexanderinteractive.com
Jordan Lustig jordan_lustig@s5a.com