Walmart Canada recently unveiled its new responsive design, the first enterprise ecommerce site in the country to make the switch.
Walmart.ca's Rick Neuman and Matt Ginsberg share with Get Elastic the details of their responsive revamp, including what drove the decision to go responsive, how their design process worked, the design and development challenges faced, and learnings from user and A/B testing.
The mobile-first movement often recommends beginning with a minimum viable experience for smartphones and building up. While this keeps a website simple and potentially lighter to load, for ecommerce, conversions and average order value are much higher on tablets than small screens.
Seeing a significant amount of tablet traffic, Walmart recognized the importance of providing its core customer -- moms -- quick and easy shopping from any room in the home, including the couch. The team adopted a touch-centric, “tablet first” approach, expanding its design up and down to fit desktop and smartphone breakpoints. (Head over to Walmart.ca and resize your window to see how the site responds at various breakpoints).
Walmart also wanted to maintain a single domain and code base, which is one of the benefits of choosing responsive over adaptive, yet not sacrifice performance, which is a risk of going responsive if performance tuning is not prioritized.
Built for performance
Knowing that every second of page load time affects customer satisfaction and conversions, performance testing was executed at every sprint (using Agile development) with a complete suite of stress tests, and Walmart was able to achieve a 35% improvement in performance through tuning and a modular architectural model with a variety of loading mechanisms.
Caching is a key component in website optimization. Walmart.ca delivers commerce in context, with up-to-the-moment and location-aware stock availability and pricing information, and delivery date estimates, which can change throughout the day. The number of queries this requires weighs down a page, so a system of intelligent queries are used and messages are broken into a series of components which are cached by business rules to keep important real-time information such as inventory changes as fresh as possible.
Another performance tactic Walmart uses is icon fonts rather than images. This enables faster load and also ensures icons look amazing and sharp, even at 1000% zoom.
Beginning with a one-week JAD (joint application development) session across functional departments, the project used the Agile methodology, which enabled them to launch quickly after only 16 2-week sprints, taking slightly less than one year from start to finish.
The team crunched its analytics to understand which screen and browser widths were most common across mobile, tablet and desktop, and opted for a fully-scaling grid between 320 and 1152 pixels (leaving the widescreen breakpoint for a later time). Using a 4/8/12 column system, pixel-by-pixel the site scales smoothly as more space comes available. They decided on 5 different page-level templates, with a 6th upcoming.
Design-wise, there wasn’t a wealth of enterprise-level examples to draw upon for inspiration (only 1 out of the top 100 retail sites is responsive to date). Most of the early responsive design adopters have been smaller ecommerce sites, and there were no set best practices for complex design elements out-of-the-gate.
The most challenging element for Walmart.ca was its global navigation, coming up with a simple system that scales up or down. The navigation was taken through several revisions, the team all learning responsive at the same time.
Rick and Matt describe the checkout process design as a “smooth process,” though the Store Finder with Google Maps integration was tougher.
The team decided to ditch their CMS’ template naming convention, which was biased toward traditional development, in favor of a more descriptive and fun hot-pepper inspired system (think jalapenos, poblanos and habaneros). The hotter the chili pepper, the more complex the template! The terms are now part of the team’s vocabulary, and the specific terminologies they use help reduce confusion and aid in problem solving. Everyone “gets it.”
What testing revealed
Walmart used a mix of pre-design, hands-on usability testing including paper-prototypes with post-design user tests (using moderated sessions throughout Canada) and on-site A/B testing, including an initial test of running both the responsive and non-responsive sites concurrently for about a week.
Results were very positive for the responsive design. Conversion’s up 20%, mobile orders up 98%.
On mobile, it’s common to show a smaller number of products on category and search pages, and let users toggle to display more. But Walmart found its sweet spot is displaying 60 products per page, which works well at different breakpoints – you can show 3, 4 or 6 products per row in grid view without leaving items hanging at the end. Showing a higher number of items also means one less tap users have to make. Bucking convention is not always a winning strategy, but extensive user testing proves it’s the right one for the responsive site.
The most surprising insight from user testing arose around presentation of product availability. Some products are available both in-store and online, others online-only, and others are temporarily sold out or unavailable at the user’s nearest store. Add to this size / color configuration, and it can become cloudy what’s truly available to buy now, especially from the “shelf” level, or category page.
In the original design, each thumbnail would have 1 of 2 possible buttons. Either a green “add to cart” button (for in stock products) or a grey “view details” button (for out of stock products); this was in addition to an explicit in stock / out of stock message. "We realized that users were missing the explicit message altogether and were clicking through on the grey buttons, still expecting the product would be in stock. By removing the grey button for out of stock products and just leaving the space blank, we made the difference clearer" says Ginsberg.
Special thanks to Rick and Matt from Walmart.ca. If you're interested in more posts on responsive design, we've got a whack of 'em here on Get Elastic, and check out our webinars Is Responsive Design Right For Your Business? (originally presented at the Shop.org Merchandising Workshop) and The Truth About Responsive Design.