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