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 full-size slide

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

    View full-size slide

  3. Walmart starts moving
    to Responsive Web
    Design in 2014

    View full-size slide

  4. What’s a hero image?

    View full-size slide

  5. Hero images
    are usually
    large promo
    images

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. Large Device Width Small Device Width
    Medium Device Width

    View full-size slide

  9. 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 full-size slide

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

    View full-size slide

  11. A few weeks later…

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. Denver, CO
    San Jose , CA

    View full-size slide

  15. 3 image breakpoints

    View full-size slide

  16. 6 Images to support
    retina displays

    View full-size slide

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

    View full-size slide

  18. And if you have to 20 different markets.

    View full-size slide

  19. 480 total images are needed

    View full-size slide

  20. Creation Upload
    Design workflow

    View full-size slide

  21. Creation Asset Management Trafficking Publishing
    Actual Workflow

    View full-size slide

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

    View full-size slide

  23. Use only retina images.
    Idea 1

    View full-size slide

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

    View full-size slide

  25. WTfudge performance?

    View full-size slide

  26. @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 full-size slide

  27. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

  30. Reduce the number of
    breakpoints.
    Idea 2

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

  33. Idea 3
    Standardize aspect ratios.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. Adaptive Desktop Separate mWeb

    View full-size slide

  41. Adaptive Desktop Separate mWeb

    View full-size slide

  42. Adaptive Fully Responsive Desktop
    ? ? ?

    View full-size slide

  43. We’re going responsive
    in 4 months.

    View full-size slide

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

    View full-size slide

  45. What is currently
    being done?

    View full-size slide

  46. Home Page Department Page

    View full-size slide

  47. Heros
    Banners
    Home Page Department Page

    View full-size slide

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

    View full-size slide

  49. more than
    600 stories

    View full-size slide

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

    View full-size slide

  51. My idea
    Just use one image.

    View full-size slide

  52. Crop
    Safe
    Crop
    Safe

    View full-size slide

  53. Crop
    Safe
    Crop
    Safe

    View full-size slide

  54. Seeing is believing.

    View full-size slide

  55. Home Page (Breakpoint A)

    View full-size slide

  56. Home Page (Breakpoint A)

    View full-size slide

  57. Home Page (Breakpoint A)

    View full-size slide

  58. Home Page (Breakpoint A)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. Seeing is believing.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  64. Safe
    Crop Crop

    View full-size slide

  65. Safe
    Crop Crop

    View full-size slide

  66. Safe
    Crop Crop

    View full-size slide

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

    View full-size slide

  68. 4,200
    images
    Responsive
    5 breakpoints
    Everywhere

    View full-size slide

  69. What we learned

    View full-size slide

  70. It’s not only about
    the technology

    View full-size slide

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

    View full-size slide

  72. It’s a partnership
    between UX and
    Creative

    View full-size slide

  73. Validate ideas through
    prototyping

    View full-size slide

  74. Scale is actually not
    about size

    View full-size slide

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

    View full-size slide