Walmart Savings Spotter

A Chrome browser extension for deals discovery, doesn't matter where you are shopping.
Role: UX Designer
Duration: 9 weeks (Summer of 2018)
Activities: Interaction design, Competitive Analysis and Design Studio
Tools: Sketch, Zeplin, Invision and UserTesting.com


The goal of the project is to improve the user experience of the Walmart Savings Spotter widget and align it with the recently updated design system of Walmart eCommerce.

I joined Walmart at an exciting time when it was in the middle of a UX transformation. The website itself had undergone a significant visual makeover and a product redesign, at the heart of which was a clean and minimalist UI along with newly introduced personalization elements.
As a UX Designer intern for the summer, my role was to transform the look-and-feel of Walmart Savings Spotter.

Team Members: I was the lead UX Designer in the project, partnering with a team of a Product Manager and two Software Engineers.
Deliverables assigned: UI update to align with the new design system, Improvement of UX in current features.
Contribution above and beyond the deliverables: Collaborating with UX Research, Design Studio
Outcome: Redesign of the Walmart Savings Spotter and creating product vision grounded in user research.

The Savings Spotter is a browser add-on (widget) that users can install via the Google Chrome web store. This widget would help online shoppers in comparison shopping and in discovering deals on Walmart, that too without having to leave the page that they were on. For example, if a user is viewing a product on Amazon, the widget would notify the user if that product is available on Walmart.com at a lower price. The widget also show a pop-up banner in case a faster shipping or pickup option is available for the product.

Gathering Initial Insights

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 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.

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.

User Research

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.

Tangible impact that the research could lead to: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. For example, the interactions should happen only when there is an advantage to the user i.e. the pop-up shows up when the user is clearly trying to shop and Walmart has a better deal on the product.

Competitive Analysis

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

The UX Research and the Competitive Analysis formed a strong evidence around the need for redefining the product features.
Meanwhile, the project was moving in a agile format, and we wanted to ship the new version of the product along with the technology fixes in the next release. Time was a constraint, and to make the best use of the quick release cycles, I decided to complete the UX redesign in two phases:
Phase 1: Visual uplift and UX improvements to the existing feature
Phase 2: Crafting a product and feature vision grounded in user research

Phase 1: UX and Visual Design

The main concerns with this design are that there are multiple call-to-actions and subsequently the cognitive load to the user is high. Moreover, the visual elements look dated and do not align with the new design pattern of Walmart.

After identifying the issues, I started iterating on the possible design arrangements that could alleviate some of the pains that the users might be facing. To do this, I created several wireframes and got feedback to improve upon the designs. Some of the iterations are as below.

Once I had made the decisions for the layout through the wireframes, I started designing the ‘box’ in Sketch. The box went through multiple iterations to accommodate the current features in a new design system. The Stores page went through a major design change and UX improvements.

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.

The other tabs like Rollbacks also went through the iterative design process and the final version for the box looked like the snapshots above. But I was left wondering that whether these features made sense for the user. The user research and the competitive analysis pointed otherwise.

Thus, I was not satisfied with the redesigned product and I wanted to do more. And that’s how the phase 2 of my design process started.

Phase 2: Design Studio

I had a conversation with my mentor about what could I do to improve upon the product features and how do I get a buy in from the stakeholders like the PM and Engineering. My mentor suggested that I could organize a design studio, which is a collaborative design process involving different cross-functional team members working on the same product.

The inspiration for the design studio came from the Lean UX book and its chapter on Collaborative Design.

The further features of the product were brainstormed in a collaborative design studio that I organized and helped facilitate.

I reached out to all the verticals related to the product and its potential collaborators. There was an equal representation from all the organisation verticals - Product, Engineering and Design - with a total of nine people attending the design studio.

The design studio was a two-hour event. First, I briefed the participants about the current product, the hypothesis behind the redesign and the constraints. Thereafter, the participants brainstormed the solutions individually and presented it to the larger group. After the individual brainstorming round, I reorganized the larger group into teams of 3 with a vertical being represented in each group. I was also participating in the brainstorming, and thus, was member of one of the smaller teams as a designer.

Once the smaller teams had brainstormed and iterated on their proposals, they presented the idea to the larger group for discussion and critique. This round was the most beneficial in getting the conversation to a stage where we were talking about specific features of the product and working on its implementation details. During this round, I was taking notes on the proposed solutions from each team, which I later compiled to conclude the design studio with emerging themes and feature recommendations.

After the design studio, I put together the findings in a report that was shared with all the participants and the design organisation.

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

Conclusion

With the design studio ending, I was almost 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 low-fidelity mockups as a representative design of the future versions of the product and included implementation roadmap for each feature.

Reflection

What I learnt during my intership experience were:

  • Getting buy-in from multiple stakeholders
  • Partnership with Engineering and PM
  • Identifying the business and user requirements and its role in design