Role: UX / UI Designer Skills: User Experience, Wireframing, Competitive Analysis Time: 2022

What’s the opportunity?

The opportunity is a $60 million dollar mistake that occurred with the change from one design system to another. A year ago, customers had the ability to add protection plans which were prominently displayed. Today, the protection plans are hidden under a buggy system that favors a sticky panel to favor ads, both under the item image, and under the buy-box.

What’s the challenge?

After a move in design systems from Blue+ to Glass in 2022, Walmart experienced an unexpected downturn in its protections conversions. Previously, the Protections business was a solid, dependable bottom-line driver that allowed customer to protect their items, from the smallest $20 purchases, to the most expensive tech tools.

Once I started diving deeper into the task, I noticed a mounting amount of constraints.

Constraint 1- The protections module fell below the fold

Pictured above - the Item Page with the protections module (highlighted in green) in 2021, vs the Item Page in 2022 on the right.

Due to the change in width, the protections module fell sharply below the fold. To make matters even worse, there was an engineering bug that covered the protections module as soon as the user would scroll to the bottom of the page to access more information, by the mini floating buy box. (As demonstrated in the screengrab).

It was imperative to have the protections module displayed prominently, clearly, because our Cart team created a new page dedicated to upselling complimentary items in a page that would envelop the experience.

The protections modules would still be displayed on this new page, but our analytics showed a significant decrease in conversion, thus putting the pressure on the module within the Item Page to perform.

Constraint 3- The design pattern our team was proposing wasn’t approved by the design system guidelines

Due to the business stakeholder objectives, I was exploring options for protections that excluded the null state, meaning, get rid of the “No thank you” option for protections. After looking at our competitors, I saw that places like Amazon and Best Buy were leveraging the checkbox components as radio buttons. This was a difficult negotiation as this pattern breaks guidelines from our design systems and accessibility teams.

Constraint 2- If the customer added item to cart without choosing protections, a “Post Add To Cart (PAC) screen would pop up

Iterations, explorations, negotiations

After meeting with over a dozen various teams from business, engineering, Item Page, Cart, Post Add To Cart, even Auto, I was able to ideate on what the improved protections module could look like.

Explorations were created for mobile, mWeb, dWeb, for Walmart products (hosted by Allstate), Apple products (AppleCare+ focused), and home service offerings provided by Angi.

A note on the process

One of the most challenging (but fulfilling) aspects of working with financial products is that they sit at the core of all screens within Walmart. Whether I am working on the Item Page screens, the Cart, the Order Detail page, or any other screen, it’s really interesting to see the “ripples” of my work. If a customer adds a product on the Item Page, how will the screens 2, 3, 4 steps down be affected?

The process for iteration was to get critique and feedback from the internal team, design leadership, business leadership, engineering, accessibility, and a dozen deign focused teams (Item Page, ODP, Search, Cart, Thank You, and so on).

The most interesting part of the process was leaving no stone un-turned. I designed iterations with lifestyle images, check-boxes, radio buttons, side sheets, modals, drop-downs, and more. All of the pieces had to play well with each other, not only in the short-term, but also long term, system-wide fix. Truly interesting work!

Some iterations below—

The new look

The solution that was the most all-encompassing, was to bring the Add-Ons module into the Buy Box and allow customers to add various plans with the checkbox feature.

This solution answered for a variety of challenges:

1. It’s above the fold

2. It’s short in height and doesn’t compete with other elements

3. The module displays multiple protections plans (important for business split)

4. The module accommodates for future non-Walmart plans such as AppleCare+

Impact

The designs are now in production for more than 50% of the population and will allow customers to :

1. Add a protections plan that suits their needs the most (lower tier, higher tear plan)

2. See the protections module above the fold, with a clear enhancement

My business partners were energized and excited over the re-design and are watching the analytics closely. The early results show:

1. Significant improvement in Web, iOS, and Android ranging from 5% to 36% on various platforms.

Next steps

After monitoring the growth, it’s important to look at the full, end-to-end, holistic process of allowing Walmart customers to add insurance plans, including post-purchase. The next step is to connect the in-store purchases with digital add-ons, by allowing customers to enter the Add-Ons Hub.

Solution (continued)

Checkboxes here act like radio buttons, and Walmart customers can choose the exact plan that benefits their goals the best. This UI pattern allowed us not to only be considerate of Walmart Protection Plan offerings but also other plans such as Apple, or NordicTrack in the future. The module itself would fit into the buy-box without taking a significant amount of space, but still allowing customers to clearly view it, and interact with it.

I also designed various modals for Desktop, mWeb, and mobile which would dynamically appear if the customer didn’t interact with the module. The modal outperformed a different test, showing significant conversion on Desktop, mWeb, and Mobile.