Walmart is the biggest company in the United States in terms of revenue as per the Fortune 500 list of 2015. It is in the retail business with a chain of hypermarkets, grocery stores and discount department stores. The company also offers online retailing to its consumers. The company operates in several countries in the world.
The Canadian division of Walmart wanted to change the design of its website walmart.ca to responsive design. It was the first retail ecommerce company in Canada to have a responsive website. This case study describes the motivation behind going responsive, the design process undertaken, various challenges faced by Walmart in doing so and the learnings from this exercise .
What is a responsive website?
A responsive website is a website which provides easy reading and navigation across a variety of devices- desktops, mobile phones and tablets. Thus a responsive website renders itself optimally depending upon the size of the device for the ease of operation of the user. Since almost half of internet traffic is through mobile phones, responsive design has become quite important in the current scenario.
Why responsive website for retail ?
A survey found out that more and more consumers are using the tablet for online shopping- so it is imperative for online shoppers to design their websites optimally for the tablet.
Noting this trend, Walmart adopted the ‘tablet first’ approach- meaning the basic website is optimized for the tablet and it is then scaled up or down for the desktop or the mobile phone. For a website to be effective on the tablet, you require certain special features like larger navigation and add to cart buttons and finger friendly swiping.
Pros and cons of responsive website design
Responsive design works with one code for the website as against different codes for the tablet version or the mobile version of the same website. Hence changes to the site need be done only once through a common Content Management System( CMS). This ensures simplicity of website maintenance and all users can access the same content regardless of their device.
A single url also helps in SEO as all backlinks point to a single domain. Thus there are SEO benefits whether the website is accessed from a mobile, tablet or desktop.
Also there are cost benefits of developing and maintaining a single url rather than create different urls for different devices.
Further, people may think that a device- only website will give the best user experience in that specific device which will not have constraints to also match desktop experience and content and navigation design can be freely made to suit that device. But normally the users operate the mobile phones or tablets based upon their desktop experience. Hence how beneficial a device-only website is can be debatable.
On the flip side, the page loading in responsive websites is slower as compared to mobile- only sites. This may affect conversions, customer satisfaction and loyalty. The capital cost of designing complex responsive websites is higher. Also there could be constraints in fitting standard desktop designs to responsive designs due to size constraints of the device. There could also be the resistance to change from employees to adopting the responsive design paradigm as in this case design and development teams have to work very closely.
Walmart appointed a Joint application Development team comprising of employees across functional departments to design and develop the responsive website. Based upon extensive web analytics, the team finalised the screens and browser widths that were most common across devices and also created 5 page templates.
Speed of loading
Considering the criticality of loading speed, Walmart carried out extensive performance tests for page loading speeds with a variety of stress tests. They achieved 35% performance improvement in page loading speed by fine tuning and selecting optimum loading mechanisms.
A website is optimised by caching. Walmart designed several intelligent modular queries and cached them so that they could be recalled by business rules. So the commonly used queries for availability of stocks, pricing and deliveries improved performance and also gave near real- time data, a critical feature for an e-commerce site.
Walmart used icon fonts instead of images. This improved load speeds and also rendered sharp resolutions even at higher zooms.
Walmart’s design team was inexperienced in responsive design. This being a totally new area, the team learnt responsive design on the job. There was a lot of innovation too. They changed their CMS’ naming convention to a more descriptive one. A new lexicon was standardised and the team found it easy to communicate via the new vocabulary.
The team carried out extensive testing of the new responsive website. The testing methodology included:
- Pre design testing using paper prototypes
- Post design user tests throughout the country
- A/B testing: Both the responsive and the non-responsive sites were tested simultaneously and the results were compared. Results were in favour of the responsive design- conversions increased by 20% and mobile orders by 98%.
Using extensive web analytics, Walmart found that showing 60 products per page on the tablet was optimum. Convention had that small number of products were displayed on search and category pages on mobile devices. However, testing revealed that 60 products per page was quite optimum for users. Users can scroll down to have a look at the 60 search results.
The responsive website has emerged quite well in design, user experience and performance.
Have a look at the ‘add to cart’ screen. The screen looks quite simple and neat.
…..the check out screen.
…..the search results page.
…and the product description
The Walmart team kept the description to a minimum resulting in less clutter on the screen. If you want to have a look at the website, pick up you tablet, browse ‘walmart.ca‘ and experience the website for yourself. ( The screens will appear somewhat different than those shown above, as these screenshot are taken from a mobile phone.)
As said above, conversions and mobile orders for walmart.ca increased after Walmart changed to responsive design.
We learn from this case study that web analytics is very essential while taking decisions regarding website design. We also learn how a classic design process works starting from prototyping, development, testing and deployment.
Web Analytics is essential as it gives you insights on the performance of your website and also highlights the metrics that can help in the growth of your business. Thus, to get an in-depth understanding of Web Analytics, join our Web Analytics Certification Course.
Image courtesies : walmart.com