Home > UX and Prototyping > Walmart website redesign teardown
One of America’s largest retailers, Walmart, gets a new UI with its website redesign. Here’s our teardown of what’s new for shoppers

One of America’s largest retailers, Walmart, gets a new UI with its website redesign. Here’s our teardown of what’s new for shoppers

Website redesigns are very in this season. With Reddit recently undergoing a transformation of its own, a trend seems to have emerged. This time it’s one of America’s biggest retailers getting a makeover, Walmart.

TechCrunch reported back in early April that a redesigned Walmart website was on the way which aimed to be more personalized in hope of creating a better experience for their customers.

Aside from bringing more personalization to the online shopping experience, Walmart’s partnership with clothing retailer Lord & Taylor signifies a new focus on fashion.

Marc Lore, the Present and CEO of Walmart said that the redesign “creates a cleaner and more modern digital shopping experience. It is a dramatic step change for us”. But is it a dramatic step change for users? Let’s find out in this rundown of the Walmart redesign.


Create your own website redesigns in Justinmind. Download free

Download free


walmart-redesign-website-redesign-new-look

Credit: Walmart.com

A new hamburger menu

Walmart’s redesign has a new hamburger menu. Before, on the old website, there was a hamburger menu which was clearly labeled with the copy “Departments”.

With this website redesign, Walmart has decided to forego the helpful copywriting and gone straight for the traditional 3 bar menu. A risky move, perhaps. But will it pay off?

Obviously, with a redesign of this magnitude, you would expect Walmart to have carried out a ton of website usability testing. However, time and time again, tests have shown the hamburger performs better when it is clearly labeled. That is to say, it receives more clicks.

Maybe in the era of mobile device ubiquity, the hamburger no longer needs the text as users become more familiar with what the menu is.

Not craving the hamburger menu? Try these awesome alternatives.

New and improved icon design

Icons have a major role in web design and this website redesign is no different. There are new icons for the shopping cart, store locator, and menu icon. Their placement in the UI is more prominent, too.

The redesigned icons offer more clarity for the user. The old design didn’t have bad icons, per se. It’s just that they could be improved and this time Walmart took the right amount of care and attention.

Although, in a growing trend with this redesign, these icons are not labeled. With so many people relying on Walmart for their consumer needs, time will tell whether or not these icons are intuitive for the large swathes of users. Zoltán Gócza wrote that icons don’t necessarily boost usability when he stated:

“Icons are hard to memorize and often highly inefficient. The Microsoft Outlook toolbar is a good example: the former icon-only toolbar had poor usability and changing the icons and their position didn’t help much. What did help was the introduction of text labels next to the icons.”

It makes sense. A user is able to understand an icon only based on previous experience. If newer users or even less experienced users go to Walmart’s new website, will their experience suffer? The “Walmart” text has also been removed from the homepage logo. Without text on the brand’s icon, will users know what website they’re on?

Since these particular icons better represent and denote Walmart’s services, perhaps users were able to derive their meaning from the aesthetic alone, without the need for accompanying text.

Personalized UI elements

CEO Marc Lore writes that this redesign is all about function and that the majority of the homepage will be personalized in some way or another.

For example, there is a new section that showcases top-selling items in a customer’s location. Marc brags to users in the press release with “did you know that air mattresses recently trended in Dallas?”

While this feature seems interesting on the surface, it begs the question: what benefit do users get knowing what items are popular in their city? Is this personalization for the sake of personalization? Maybe.

But, aside from this gimmick, there are services such as Online Grocery, order status and Easy Reorder, which allows customers to easily rebuy the items they buy most in stores and online. A useful and welcome change and the sort of personalization that is focused on improving the life of the user.

Focus on fashion and home

With the new Lord & Taylor partnership, Walmart aims to focus more on fashion and home. TechCrunch writes that these categories are seeing sizeable growth online.

The layout for the home decoration section looks similar to what you might find on the Ikea website with clearly labeled sections and a inspiration page. The new website will understand what categories users like and leverage new, seasonal and trending items to reach interested customers.

walmart-website-redesign-ux-design-searching

Less UI clutter, more focused search

The placement of the search bar hasn’t changed much. It’s simply been positioned right to the very top of the UI, with no padding and so takes center stage.

The UI is stripped back and the visual hierarchy has been enhanced. With this UI, everything feels less cluttered. On the old website, users were bombarded with imagery, offers and links aplenty.

By removing these elements and using a hero image with the search having more focus, users will be able to easy find what they’re looking for without needless distractions. This will save them time in the long run and provide a better user experience.

Improved typography and visual hierarchy

The old website used varying font sizes in myriad colors, all looking to grab your attention for a click. It was busy, messy and a little overkill.

Now the colors are muted and understated and less in your face. It feels like the UI is gently whispering into your ear instead of shouting down your throat. With fewer elements on the page and better typographic choices – goodbye to the caps lock and exclamation points – our attention is focused and the design is less threatening.

The addition of more white space lets the website breathe and relax, whereas before, it felt as though Walmart was cramming every offer, notification and product on the page.

The jury is still out whether a more minimalist approach will work out in the long run for Walmart but the change is a breath of fresh air.

Using interactive prototypes to create better website redesigns

No doubt Walmart iterated their design many times before settling on the final version. It’s standard practice. Interactive prototyping in Justinmind lets you create as many screens as you want, so you can spend time creatively exploring different avenues during the web design process until you reach a winning design.

To ensure a successful redesign, start prototyping. WIth prototyping, you can try out different interactions, test out a new feature and get creative with all the UI elements of your design. Then you have the chance to test your creations out on real people to get real results.

Why not get started with your first wireframe?

Conclusion

Redesigns are always tough and you’re never 100% certain how effective your design will be until it goes live and is used by your customers. In May, Walmart will do the big reveal and then we’ll see whether this redesign will be a winner or not.

 

download_free

Steven is the web editor at Justinmind

6 comments

Your email address will not be published. Required fields are marked *

  • You call that a redesign? Seems like plagiarism to me; that or Walmart secretly bought shopstyle.com lolz they look almost identical!

  • I want my “old” Walmart site back! The current re-do is absolutely dreadful …. I can’t find anything I am looking for and in order to come upon the choice that I am able to find I have had to go through so many hoops that I don’t want it anymore. Is it possible to have a choice between the old and the new site? PLEASE!!

  • new design has a empty border all around, and looks like they were making an app instead of a website and quit halfway through

  • Type too small. Navigation looks broken. Way to big emphasis on lifestyle photography for a store full of crap. Page is way too long. Walmart should be about getting in and out, not a place I trust for ‘inspirational shopping’. Get over yourselves and stop trying to elevate a brand that works for what it is—one-stop shop for cheap stuff.
    Looks like the creative leadership missed the boat BIG on this and let a group of amateurs take a go at it. Hope their numbers aren’t reflecting this disaster or heads will role (hopefully from the top-down).

Download Free