Major grocery retailer goes responsive thanks to pattern-based design approach
In 2014, we were asked to help Walmart transition to responsive design. We started with the smaller Walmart Grocery site, built a pattern library, and converted the site to responsive design in three months. We finished a week ahead of schedule due to our responsive design sprint approach.
After that project, Walmart asked us to help with the main Walmart.com site starting with the complex cart and checkout process.
Walmart had recently redesigned so any responsive plans that required a full redesign were non-starters. But Walmart wasn’t looking for a quick, responsive retrofit either. They wanted to do a responsive redesign the right way, which is why they hired us to assist their team.
Fortunately, we have a lot of experience with what we call responsive conversions—taking a working fixed-width design and making it responsive. The key is to break the site into small design patterns and make those patterns responsive.
After we broke the designs down into constituent patterns, we built an agile sprint schedule. Responsive design sprints are powerful tools for finding the best design quickly through rapid iteration.
Like many of our projects, our responsibilities included more than the design. During our time working with Walmart Labs, we built a single-page application based on CanJS and implemented designs in Walmart’s Node.js backend system.
One of the best parts of working with Walmart was the ability to work closely with their UX team. We worked as a cohesive team with constant communication in Slack throughout the day. One of the Walmart designers embedded in our team.
It was one of the best projects we’ve ever worked on. We’re proud of how Walmart’s new responsive sites turned out.