Walmart Savings Spotter

A non-linear design project that came together by going beyond the requirements.
Role: UX Designer
Duration: 9 weeks
Activities: Visual / Interaction Design, Competitive Analysis and Design Studio
Tools used: Sketch, Zeplin, Invision and UserTesting.com

Project overview

I joined Walmart at an exciting time when it was in the middle of a visual transformation. As a UX Design intern for the summer, my role was to transform the look-and-feel of Walmart Savings Spotter.

Savings Spotter is a browser application that lets the user compare prices and is available for download in the Chrome web store. This widget helps online shoppers in comparison shopping and in discovering deals on Walmart, that too without having to leave the page that they are on. For example, if a user is viewing a product on Amazon, the application would notify the user if that product is available on Walmart.com at a lower price. The application also shows a pop-up banner in case a faster shipping or pickup option is available for the product.

Discovering the why

Have you been in a situation where the product requirements were solidified in advance and you felt you had a straightforward task at hand? I thought the same when I came across the requirements for Savings Spotter - redesign the existing product and make it visually consistent with the rest of the website. Made perfect sense!

However, as I framed the requirement in a user's perspective, I noticed a missing piece in the puzzle.

I soon found myself wondering - Why would the users need another price comparison application?
They could definitely use other widgets that specialize in price comparision and offer a range of deals.

Competitive analysis

I conducted a competitive analysis following the steps explained by Kazden in his Medium article. The competitors that I chose were Honey, Amazon Assistant and Camelizer.

The users identified the best and worst features of Honey and Amazon:

What works?

  • Honey - Reliability of Honey in surfacing best deals
  • Amazon - Wishlist feature of AmazonPersonalization in the product

What doesn't work?

  • Amazon Assistant - feels like a malware when it pops-up without context. The negative feelings regarding Amazon was around how intrusive the extension felt when it showed pop-up banners even when the user was casually surfing the web.

Need for user research

To dig deeper, I decided to go through the chrome web store user reviews of all three extensions. It was a quick-and-dirty way to gather what perception did the users have about these products before I conducted actual user research. The users identified the reliability of Honey to surface deals and the wishlist feature of Amazon to be the main reason for their delight while using these two extensions. The Walmart Savings Spotter had many positive reviews but the users identified that the tool did not work always work. Moreover, the negative feelings regarding Amazon was around how intrusive the extension felt when it showed up pop-up banners even when the user was surfing the web generally.

I was puzzled to learn that only a handful of Walmart’s online shoppers had the widget installed in their browser, whereas they were heavy users of similar products - namely Honey and Amazon Assistant. The internal UX documentation from two years ago also featured these two extensions and I realized that the product was built using only the competitive analysis. The voice of the users was missing in the product.

Gathering the voice of users

Based on the initial insights, and by collaborating with a UX Researcher on my team, I conducted a lightweight user research to hear from the shoppers about their thoughts on the comparison shopping extensions and identify behavior patterns around the usage.

Users like to be reminded about deals on their frequently bought items, but if there are too many notifications, they stopped paying attention to the alerts.

The insights from the research were converted to tangible design decisions, like the pop-up should surface when the user is clearly trying to shop and Walmart has a better deal on the product.

Meanwhile, the project was moving in an agile format, and time and engineering resources were a constraint. We wanted to ship a new version of Savings Spotter along with the urgent technology fixes in the next release.

To make the best use of the quick release cycles, I decided to complete the project in two phases:

Phase 1: Visual uplift and UX improvements to the existing features

Phase 2: Crafting a product and feature vision grounded in user research

Phase 1: Visual design and UX improvements

The main concerns with this design was that the visual elements look dated and do not align with the new design pattern of Walmart. However, I realized that only a visual update won't work. The application is confusing with multiple call-to-actions and the cognitive load to the user is high.

The product needed a purposeful set of features that plays to the strength of Walmart - low cost, and high store availability. I created wireframes to show features that would be a delight for the user.

Personalization takes the centerstage with the tailored recommendations and ability to log in to account.

The Stores page went through a major design change and UX improvements.

Once I had finalized the layouts, I started converting the design to high-fidelity mockups in Sketch. The box went through multiple iterations to incorporate the current features in a new design system.

The distance to the store and the store timings were added and highlighted as it were the most relevant details for a user while considering a visit to the store. The map view was removed as it was misleading for the users, the image didn’t have any map specific functionalities and just served as a link to the larger map.

But, the current set of features weren't adding much value for the existing users and would soon be deprecated. Thus, I wasn't satisfied with the product in implementation. And that’s how the phase 2 of my design process started.

Phase 2: Crafting a future vision of the product

I had a conversation with my manager about what I could do to get a buy-in from the stakeholders like the Product and Engineering teams for a future version of the product features. Her recommendation was to organize a design studio. The inspiration for the design studio came from the Lean UX book and its chapter on Collaborative Design.

The ideal features of the product were brainstormed in a collaborative design studio that I organized and facilitated.

I reached out to the product’s cross-functional partners and some potential collaborators. There was an equal representation from all the organisation verticals - Product, Engineering and Design - with a total of 9 (in-person + remote) participants in the design studio.

The emerging themes from the design studio were:

  • Personalization in the product
  • Adding login capability to the product to access saved preferences
  • Deals on frequently bought items being highlighted to the user
  • Contextual interactions
  • Focus on the end-to-end customer journey

Next steps

With the design studio ending, I was almost at the end of my summer internship with only a few days remaining. I had completed my deliverables and went above and beyond to conduct a user study in collaboration with a UX Researcher and facilitate a design studio. But before I left, I wanted to leave actionable inputs for the future vision for the product. The idea for the future product was planted through the design studio itself and the team, including the Engineering and PM, was excited to work on building new features. Before the design handoff, I created mockups as a representative design of the future versions of the product and included an implementation roadmap for each feature.

Reflection

What I learnt while working on this challenging project with some amazing team members:

  • Understanding the why behind business requirements and user needs and role of design in connecting both
  • Partnering closely with product managers, researchers, engineering and marketing
  • Getting buy-in with collaborative workshops and presenting to stakeholders