Walmart eCommerce: Responsive Images at Scale
My Role: Direction, UX Designer, Liaison between the UX and Creative Teams
Walmart was undergoing a five-breakpoint responsive web redesign—expanding their two-breakpoint adaptive desktop site and retiring their mobile mWeb site. I was tasked with was figuring out how to make the graphics responsive.
With a background in both Creative and UX, I understood the difficulties of making graphics work on multiple screen sizes. Often times responsive pages will change the aspect ratio of image containers between breakpoints, and the scale of the image may need to change to retain the most important visual details, both of which require multiple graphics to support. This means it will take more time to create files and can be difficult to design for, since photography assets don’t always work with different aspect ratios and the original design may not adapt easily to aspect ratio changes.
Creating multiple assets not only affects the volume of work being created, it also affects a wide range of personnel—
designers, writers, photographers and retouchers creating the files, and also merchandisers, marketers and the people uploading all the content onto the site. Any increase in workload and file management would mean an ongoing increased cost to the business.
The current Walmart websites had Hero and Banner graphics on the Home and Category pages, though the content was not able to be shared between pages due to the different aspect ratios of the page designs. And to top that off, not all the content was supported on mWeb. In order to get 1:1 parity of content across devices to support a responsive site, a large amount of new content would need to be created. I wanted to minimize the impact on the teams, and I came up with a system for creating one graphic that would work between pages, and across 5 breakpoints. Not only did this avoid a spike in files needed for future content, it actually reduced the number of files the team was currently creating.
I began by experimenting on our new responsive grid with vector files in Sketch, adding in guide images to see how real graphics would transform, and made sample graphics to see how content would really look...
I used the idea of title safe—keeping important elements in the center and cropping the sides so the image could be used between multiple pages and fill the widths of all breakpoints. I tested font sizes and styles to ensure readability across breakpoints, with responsive UI elements layered on top.
The workload of all teams was reduced—templates made design faster, and fewer files to maintain helped everyone.
