Responsive Heroes at Scale

By Olawale Oladunni and Mini Kurhan. Creating images that work across multiple device breakpoints is difficult. As designers at @Walmartlabs, we’ve faced this challenge at an enormous scale. We learned that, beyond technical details, there are a host of factors that determine a successful outcome. We’ll share solutions that helped our teams adapt their current processes to execute quickly.

Transcript

1. Olawale Oladunni
   & Mini Kurhan
   source image www.flickr.com/photos/lord-jim/5315334550
   

   View Slide

2. Hello!
   Mini Kurhan
   Principal, User Experience
   Walmart.com
   @minikurhan
   Olawale Oladunni
   Principal, User Experience
   Walmart Grocery
   @doubleola
   

   View Slide

3. Walmart starts moving
   to Responsive Web
   Design in 2014
   

   View Slide

4. What’s a hero image?
   

   View Slide

5. Hero images
   are usually
   large promo
   images
   

   View Slide

6. photo +
   whole lotta text
   aspect
   ratio?
   so
   tiny!
   

   View Slide

7. How did we get started?
   photo credit: www.flickr.com/photos/ian_munroe/3598706185/
   

   View Slide

8. View Slide

9. View Slide

10. View Slide

11. View Slide

12. Large Device Width Small Device Width
    Medium Device Width
    

    View Slide

13. Large Device Width Small Device Width
    Medium Device Width
    @1× - Normal pixel density images
    @2× - Retina pixel density images
    3:1 2.4:1 2:1
    3:1
    2.4:1 2:1
    

    View Slide

14. Cross-functional team is onboard.
    photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
    

    View Slide

15. A few weeks later…
    

    View Slide

16. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
    

    View Slide

17. View Slide

18. Normal Pixel density @1× High Pixel density @2×
    Normal Pixel density @1×
    

    View Slide

19. 3:1
    2.4:1
    2:1
    

    View Slide

20. View Slide

21. Denver, CO
    San Jose , CA
    

    View Slide

22. 3 image breakpoints
    

    View Slide

23. 6 Images to support
    retina displays
    

    View Slide

24. 24 total images in
    a carousel with 4
    unique images
    

    View Slide

25. And if you have to 20 different markets.
    

    View Slide

26. 480 total images are needed
    

    View Slide

27. View Slide

28. Creation Upload
    Design workflow
    

    View Slide

29. Creation Asset Management Trafficking Publishing
    Actual Workflow
    

    View Slide

30. How can we minimize team effort and
    reduce number of high quality images
    needed, without sacrificing site
    performance on any device?
    

    View Slide

31. Use only retina images.
    Idea 1
    

    View Slide

32. Large Device Width Small Device Width
    Medium Device Width
    @1× - Normal pixel density images
    @2× - Retina pixel density images
    

    View Slide

33. WTfudge performance?
    

    View Slide

34. @1× resolution images
    @2× resolution images
    Dimensions: 1080 × 460 pixels
    JPEG quality: 80%
    File size: 155 kb
    Dimensions: 2160 × 920 pixels
    JPEG quality: 80%
    File size: 367kb
    

    View Slide

35. @1× resolution images
    @2× resolution images
    Dimensions: 1080 × 460 pixels
    JPEG quality: 80%
    File size: 155 kb
    Dimensions: 2160 × 920 pixels
    JPEG quality: 10%
    File size: 156 kb
    

    View Slide

36. @1× resolution images @2× resolution images
    Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels
    

    View Slide

37. View Slide

38. View Slide

39. Perceived quality
    photo credit: www.flickr.com/photos/mccun934/6220542849/
    

    View Slide

40. Reduce the number of
    breakpoints.
    Idea 2
    

    View Slide

41. Large Device Width Small Device Width
    Medium Device Width
    @2× - Retina pixel density images
    JPEG quality: 10%
    File size: 156kb
    JPEG quality: 80%
    File size: 219 kb
    JPEG quality: 10%
    File size: 155 kb
    

    View Slide

42. Large + Medium Device Width Small Device Width
    @2× - Retina pixel density images
    

    View Slide

43. Idea 3
    Standardize aspect ratios.
    

    View Slide

44. 3:1
    2.4:1
    2:1
    

    View Slide

45. Art Direction - One layout scaled down for smallest image breakpoint
    3:1
    3:1
    

    View Slide

46. Art Direction - Different layout for smallest image breakpoint (optional)
    3:1
    3:1
    

    View Slide

47. Before After
    3:1
    2.4:1
    2:1
    3:1
    2.4:1
    2:1
    3:1
    3:1
    @2× - Retina pixel density @2× - Retina pixel density
    @1× - Normal pixel density
    

    View Slide

48. 480
    images
    Before
    20 markets
    160
    images
    After
    20 markets
    

    View Slide

49. This time for real!
    photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
    

    View Slide

50. View Slide

51. photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg
    

    View Slide

52. Adaptive Desktop Separate mWeb
    

    View Slide

53. Adaptive Desktop Separate mWeb
    

    View Slide

54. Adaptive Fully Responsive Desktop
    ? ? ?
    

    View Slide

55. We’re going responsive
    in 4 months.
    

    View Slide

56. Jump right in.
    photo credit: www.flickr.com/photos/pmorgan/2829133525/
    

    View Slide

57. What is currently
    being done?
    

    View Slide

58. Home Page Department Page
    

    View Slide

59. Heros
    Banners
    Home Page Department Page
    

    View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg
    

    View Slide

65. View Slide

66. more than
    600 stories
    

    View Slide

67. How can we manage the smallest amount
    of files, minimize the workload for all the
    people involved, while on a short timeline?
    

    View Slide

68. My idea
    Just use one image.
    

    View Slide

69. Banners!
    

    View Slide

70. Crop
    Safe
    Crop
    Safe
    

    View Slide

71. Crop
    Safe
    Crop
    Safe
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. Seeing is believing.
    

    View Slide

77. Home Page (Breakpoint A)
    

    View Slide

78. Home Page (Breakpoint A)
    

    View Slide

79. Home Page (Breakpoint A)
    

    View Slide

80. Home Page (Breakpoint A)
    

    View Slide

81. Home Page (Breakpoint A)
    Department Page (Breakpoint A)
    

    View Slide

82. Home Page (Breakpoint A)
    Department Page (Breakpoint A)
    (Breakpoint D)
    (Breakpoint E)
    

    View Slide

83. View Slide

84. Seeing is believing.
    

    View Slide

85. View Slide

86. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. View Slide

91. Heroes!
    

    View Slide

92. 1. Vector 2. Guide Image 3. Sample Graphic
    

    View Slide

93. Safe
    Crop Crop
    

    View Slide

94. Safe
    Crop Crop
    

    View Slide

95. Safe
    Crop Crop
    

    View Slide

96. 5,500
    images
    Before
    2.25 breakpoints
    10,000
    images
    1:1 Desktop & mWeb
    3 breakpoints
    Desktop
    mWeb
    

    View Slide

97. 4,200
    images
    Responsive
    5 breakpoints
    Everywhere
    

    View Slide

98. View Slide

99. What we learned
    

    View Slide

100. It’s not only about
     the technology
     

     View Slide

101. The teams impacted by
     responsive design aren’t
     always obvious
     

     View Slide

102. It’s a partnership
     between UX and
     Creative
     

     View Slide

103. Validate ideas through
     prototyping
     

     View Slide

104. Scale is actually not
     about size
     

     View Slide

105. Thanks!
     Mini Kurhan
     Principal, User Experience
     Walmart.com
     @minikurhan
     Olawale Oladunni
     Principal, User Experience
     Walmart Grocery
     @doubleola
     

     View Slide