Grocery Subscription

The Prompt

The current outbreak of COVID-19 is causing turmoil throughout the country and undoubtedly puts additional stress on supply chains and grocery stores. HEB, a Texas based grocery company, wants to add a grocery subscription feature, which will allow users to get a discount on groceries if they sign up for weekly or every-other-week delivery of certain items.

Design Requirement

Time Spent

This is a 3 days design challenge. I spent 10% of time doing design research, 60% of time doing actual design work, and 30% of time documenting the design process.


User Interview

  • To understanding customer’s shopping habits

  • To understand pain points that might prevent them from using subscription services

Secondary research

  • To understand why people start or stop using the subscription service

  • To learn and get inspiration on mobile design guidelines (iOS/material design)

Research insights

1. Customers worried about the unclear costs

One biggest frustration of using subscription service is tracking the cost. Customers worry about forgetting to cancel the service and end up spending unnecessary money. 

Therefore, how might we provide enough control to customers to track and manage their subscription, so that they are more confident of keeping using the service? 

2. It's hard to decide what to subscribe to without a context

From the interview, I learned, users hesitate to start subscription service without knowing its benefits. And it's hard to list all frequent-buy items if they are not in a shopping mode, which potentially prevents them from signing up the subscription service. 

Therefore, how might we use context to motivate them to start using the subscription service?

Design Solutions


For users haven't started any subscription service

Introducing the subscription service on the homepage

  • Use machine learning to recommend customers what to subscribe to.

  • This notification is only for users who shopped multiple times, but are not using subscription service.

  • Clicking the banner will lead them to a landing page, which displays the recommended items, a CTA to start subscription order, explanation of how subscription works.

Introducing the subscription service during the checkout process

Why introducing at the end, instead of during the item selection process?


For users have started the subscription service

A comprehensive notification system to remind customers of their incoming orders

  • Displaying the most recent incoming delivery on the top of the homepage.

  • Using high contrast color to draw attention.

  • Click this notification will lead customers to view the order detail, where they can modify the order if needed.

Provides suggestions to avoid necessary spendings

  • Having an icon next to the items that on subscription list.

  • Using an icon to visually remind customers that this item is already in a subscription order.

  • Preventing customers from buying redundant items.

  • If a customer already have an incoming subscription delivery, they will receive a pop up notification if they starts shopping again.

  • If a customer is adding new items to an incoming subscription delivery, they won’t receive this notification.

Easily view the subscription orders

  • Add items and view details.

  • Using a colorful tag to distinguish subscription orders with other normal orders.

Easily modify the subscription orders

  • Users are able to cancel order in View Details page.

  • Clicking cancel order will trigger a confirmation modal to ask if they want to cancel order permanently.

Subscription Checkout Flow

UX Measurement

To measuring the overall performance:

  • Active users of using subscription service per month.

  • Successful rate of completing subscription orders per month.

To measuring the user behavior:

  • Clicking rate of adding items to the subscription order per user per month.

  • Clicking rate of canceling a subscription order per user per month.


  • Limited user interview data. For this design, I focused on millennial, since this people are more cares about safety and be a contributor to stop the pandemic. And they are more likely to stay at home and try the grocery delivery. However, this assumption need further validation.

  • Didn’t consider how this feature gonna affect the entire app flow.

  • Didn’t consider the scenario of having multiple different subscription orders.

  • Invented few new UI and interactions. Didn’t consider the technique feasibility.

Next Steps

  • Feature user research on different user segmentations.

  • Conduct usability testing to evaluate proposed design.

  • UI clean-up to match the company design system.