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
2. Hello! Mini Kurhan Principal, User Experience Walmart.com @minikurhan Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola
3. Walmart starts moving to Responsive Web Design in 2014
4. What’s a hero image?
5. Hero images are usually large promo images
6. photo + whole lotta text aspect ratio? so tiny!
7. How did we get started? photo credit: www.flickr.com/photos/ian_munroe/3598706185/
12. Large Device Width Small Device Width Medium Device Width
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
14. Cross-functional team is onboard. photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
15. A few weeks later…
16. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
18. Normal Pixel density @1× High Pixel density @2× Normal Pixel density @1×
19. 3:1 2.4:1 2:1
21. Denver, CO San Jose , CA
22. 3 image breakpoints
23. 6 Images to support retina displays
24. 24 total images in a carousel with 4 unique images
25. And if you have to 20 different markets.
26. 480 total images are needed
28. Creation Upload Design workflow
29. Creation Asset Management Trafficking Publishing Actual Workflow
30. How can we minimize team effort and reduce number of high quality images needed, without sacrificing site performance on any device?
31. Use only retina images. Idea 1
32. Large Device Width Small Device Width Medium Device Width @1× - Normal pixel density images @2× - Retina pixel density images
33. WTfudge performance?
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
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
36. @1× resolution images @2× resolution images Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels
39. Perceived quality photo credit: www.flickr.com/photos/mccun934/6220542849/
40. Reduce the number of breakpoints. Idea 2
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
42. Large + Medium Device Width Small Device Width @2× - Retina pixel density images
43. Idea 3 Standardize aspect ratios.
44. 3:1 2.4:1 2:1
45. Art Direction - One layout scaled down for smallest image breakpoint 3:1 3:1
46. Art Direction - Different layout for smallest image breakpoint (optional) 3:1 3:1
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
48. 480 images Before 20 markets 160 images After 20 markets
49. This time for real! photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
51. photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg
52. Adaptive Desktop Separate mWeb
53. Adaptive Desktop Separate mWeb
54. Adaptive Fully Responsive Desktop ? ? ?
55. We’re going responsive in 4 months.
56. Jump right in. photo credit: www.flickr.com/photos/pmorgan/2829133525/
57. What is currently being done?
58. Home Page Department Page
59. Heros Banners Home Page Department Page
64. photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg
66. more than 600 stories
67. How can we manage the smallest amount of files, minimize the workload for all the people involved, while on a short timeline?
68. My idea Just use one image.
69. Banners!
70. Crop Safe Crop Safe
71. Crop Safe Crop Safe
76. Seeing is believing.
77. Home Page (Breakpoint A)
78. Home Page (Breakpoint A)
79. Home Page (Breakpoint A)
80. Home Page (Breakpoint A)
81. Home Page (Breakpoint A) Department Page (Breakpoint A)
82. Home Page (Breakpoint A) Department Page (Breakpoint A) (Breakpoint D) (Breakpoint E)
84. Seeing is believing.
86. photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
91. Heroes!
92. 1. Vector 2. Guide Image 3. Sample Graphic
93. Safe Crop Crop
94. Safe Crop Crop
95. Safe Crop Crop
96. 5,500 images Before 2.25 breakpoints 10,000 images 1:1 Desktop & mWeb 3 breakpoints Desktop mWeb
97. 4,200 images Responsive 5 breakpoints Everywhere
99. What we learned
100. It’s not only about the technology
101. The teams impacted by responsive design aren’t always obvious
102. It’s a partnership between UX and Creative
103. Validate ideas through prototyping
104. Scale is actually not about size
105. Thanks! Mini Kurhan Principal, User Experience Walmart.com @minikurhan Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola