Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Heroes at Scale

Mini Kurhan
September 25, 2015

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.

Mini Kurhan

September 25, 2015
Tweet

Other Decks in Design

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