Post on 17-Feb-2017
Olawale Oladunni & Mini Kurhan
source image www.flickr.com/photos/lord-jim/5315334550
Hello!Mini Kurhan Principal, User Experience Walmart.com @minikurhan
Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola
Walmart starts moving to Responsive Web
Design in 2014
What’s a hero image?
Hero images are usually
large promo images
photo + whole lotta text
aspect ratio?
so tiny!
How did we get started?
photo credit: www.flickr.com/photos/ian_munroe/3598706185/
Large Device Width Small Device Width Medium Device Width
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
Cross-functional team is onboard.
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
A few weeks later…
photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
Normal Pixel density @1× High Pixel density @2×Normal Pixel density @1×
3:1
2.4:1
2:1
Denver, COSan Jose , CA
3 image breakpoints
6 Images to support retina displays
24 total images in a carousel with 4 unique images
And if you have to 20 different markets.
480 total images are needed
Creation Upload
Design workflow
Creation Asset Management Trafficking Publishing
Actual Workflow
How can we minimize team effort and reduce number of high quality images
needed, without sacrificing site performance on any device?
Use only retina images.
Idea 1
Large Device Width Small Device Width Medium Device Width
@1× - Normal pixel density images
@2× - Retina pixel density images
WTfudge performance?
@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
@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
@1× resolution images @2× resolution images
Dimensions: 1080 × 460 pixels Dimensions: 1080 × 460 pixels
Perceived quality
photo credit: www.flickr.com/photos/mccun934/6220542849/
Reduce the number of breakpoints.
Idea 2
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
Large + Medium Device Width Small Device Width
@2× - Retina pixel density images
Idea 3Standardize aspect ratios.
3:1
2.4:1
2:1
Art Direction - One layout scaled down for smallest image breakpoint
3:1
3:1
Art Direction - Different layout for smallest image breakpoint (optional)
3:1
3:1
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
480 images
Before
20 markets
160 images
After
20 markets
This time for real!
photo credit:http://www.fourcornersalliancegroup.com/wp-content/uploads/2014/11/happy-team.jpg
photo credit: allthingsd.com/files/2013/03/WalmartHQ.jpg
Adaptive Desktop Separate mWeb
Adaptive Desktop Separate mWeb
Adaptive Fully Responsive Desktop
? ? ?
We’re going responsive in 4 months.
Jump right in.
photo credit: www.flickr.com/photos/pmorgan/2829133525/
What is currently being done?
Home Page Department Page
Heros
Banners
Home Page Department Page
photo credit: cdn.evbuc.com/eventlogos/130112857/clueless659.jpg
more than 600 stories
How can we manage the smallest amount of files, minimize the workload for all the people involved, while on a short timeline?
My ideaJust use one image.
Banners!
CropSafeCropSafe
CropSafeCropSafe
Seeing is believing.
Home Page (Breakpoint A)
Home Page (Breakpoint A)
Home Page (Breakpoint A)
Home Page (Breakpoint A)
Home Page (Breakpoint A)
Department Page (Breakpoint A)
Home Page (Breakpoint A)
Department Page (Breakpoint A)
(Breakpoint D)
(Breakpoint E)
Seeing is believing.
photo credit: vignette3.wikia.nocookie.net/p__/images/5/5d/Home_alone_macaulay_culkin_kevin_mccallister_boy_fear_shout_fright_346_1600x1200.jpg
Heroes!
1. Vector 2. Guide Image 3. Sample Graphic
SafeCrop Crop
SafeCrop Crop
SafeCrop Crop
5,500 images
Before
2.25 breakpoints
10,000 images
1:1 Desktop & mWeb
3 breakpoints
Desktop
mWeb
4,200 images
Responsive
5 breakpoints
Everywhere
What we learned
It’s not only about the technology
The teams impacted by responsive design aren’t
always obvious
It’s a partnership between UX and
Creative
Validate ideas through prototyping
Scale is actually not about size
Thanks!Mini Kurhan Principal, User Experience Walmart.com @minikurhan
Olawale Oladunni Principal, User Experience Walmart Grocery @doubleola