ALBERTSONS

Smart add-to-cart

Boosting grocery sales and brand loyalty through growth design

The Opportunity Space

Our data showed that customers usually buy the same grocery items every time they shop, both online and in store. With that in mind, how might we design an omnichannel shopping experience that helps shoppers shop previously and frequently purchased items faster and easier? This smart feature was projected to increase cart size and loyalty. 

The Solution

I designed a feature that curates past purchases in a list format so that customers could add all items with one click of a button instead of adding them one item at a time to the cart. This growth design saves customers' time and efforts.

This new feature increases the add-to-cart speed and cart size per shopping trip and resulted in an estimated $30 million more in revenue annually.

Deliverables

Achievements:

Led the end-to-end redesign process, from initial concept to final implementation.

Crafted user-friendly flows and wireframes, ensuring intuitive navigation and minimal frictions.

Created new product cards to simplify selection/deselection effort

Conducted regular stakeholder reviews to align the design with business objectives and technical constraints.

Validated designs through multiple rounds of usability testings and in-depth customer interviews.

Collaborated closely with the analytics team to implement comprehensive A/B testing.

Developed a tagging strategy to capture key user interactions, enabling detailed funnel analysis and future optimization efforts.

My Role

UX/UI design, research, usability testing, A/B testing - Dev QA and enhancement

Metrics

Feature click-through-rate

Sales growth

Suggested grocery add-to-cart rate

Timeline

3 design sprints

2 development sprints

1 QA and enhancement sprint

My design process

Are we solving the right problem?

I created a customer empathy map to build a better understanding of customers who use our app to shop for their groceries at least twice a month. This helped me to discover opportunities for improvement. The map revealed user pain points and opportunities at the consideration and loyalty stages of the customer journey. Therefore, I paid special attention to these stages during the design process.

- Almost all segments of our customers who shop using the app have the same pain point - not having enough time

- They desire an easier and more personalized way to shop their regular essentials

- Finding items on the list that are on sale is one of the highest priorities

Understanding customers’ needs and pain points

"I wish there were an easy way to buy the things I always buy."

"I need minimum effort to take care of my regular meal needs."

How are we doing as a team?

Now that we understand the problem, the pain points, and our ideal users, as a team we need to align on some key parameters. I created a framework to outline the user journey, desired metrics, current technical limitations, and more opportunities. I socialized them with my manager and product managers to gain alignment. 

North star

Metrics

Technical limitations

Time to sketch, crazy eights!

Using Figma, I translated my sketches of different UI design for this feature into low-fidelity wireframes.

Then, I evolved them into mid then high fidelity based on feedback from design critique and alignment reviews with stakeholders including the engineers on technical constraints and level of efforts and content writers to ensure cohesive brand voice and clear communications. 

UX Flow

In addition to showing the wireframes, I created a UX flow map to show the end-to-end flow of customer in encountering this new feature in the app. This facilitated the conversations about dynamic content, algorithm, etc. which in turn contributed to my design rationale.

User testings provide confidence 

Issue 01

Are Checkboxes intuitive?

All preferred checkboxes over add-then-remove 

Solution 01

Using checkboxes to remove items from the list

The user testing validated that checkboxes were easy to understand and intuitive to use. Add-then-remove causes more hesitation to use ‘Add all’. Users would rather add one at a time. I came up with that UI pattern by researching other e-commerce apps.

Issue 02

Does the title “Your usuals, one tap away” make sense?

“Your usuals, one tap away” did not clearly indicate how it was different than other features in "Buy it Again".

Solution 02

Worked with content writer and product manager to fine tune the title to better differentiate it from "Buy it again" and make the intended action clearer. We aligned on "Quick Add".

It’s here

We got ourselves a feature that curates regular customers' frequently bought items in a list format.


Now, customers can easily glance through all the items quickly using the horizontal product cards that I redesigned. 

Customers can effortlessly deselect any items from the regular list.

With one main CTA, customers can add all the selected items to cart with one click.

Check out the next steps

We are not done yet. This is just the beginning of a life-changing feature for millions of people!

  • Place this valuable new feature in the Home page to increase discoverability and ease adoption. Right now, it is hidden in the second tab under "My List"

  • Do an AB test from the home page to see how easy it is to be discovered and how well the feature is working.

  • We can do better! To increase the success of this feature, the flow should be optimized by changing the experience into sheet.

  • Since this feature is potentially life changing, we need to spread this across other platforms. Design the same growth feature for web and tablet to achieve content and value parity for all main brands including Safeway, Vons, etc.

Time to reflect

I discovered that achieving parity between platforms can be particularly challenging, especially with dynamic content. There were times when we had to balance delivering nice-to-have features against the level of engineering effort required.

Breaking down the design project into smaller pieces allowed me to deliver in an agile manner, keeping pace with the engineering team’s momentum.

By exploring and creating UX flows for various scenarios and use cases, I enjoyed contributing to the design system by creating new UI components and their variants in different states and learned a great deal developing A/B tests.