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.
How does the user first encounter and learn about this feature?
How does the user create the subscription and automated delivery?
How does the user edit a delivery including subscription items?
How does the user edit subscriptions?
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.
To understanding customer’s shopping habits
To understand pain points that might prevent them from using subscription services
To understand why people start or stop using the subscription service
To learn and get inspiration on mobile design guidelines (iOS/material design)
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?
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.
Why introducing at the end, instead of during the item selection process?
It’s more intuitive, straightforward, and less technical effort, to show how much benefits can subscription service bring to customers.
When user scrolls the page, the service promotion piece and the checkout button will be floated and always stay at the bottom of the screen.
Once user reaches the bottom of the screen, the promotion piece will disappear.
Users will see a detailed service introduction here.
Use colors to highlight the discount.
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.
Add items and view details.
Using a colorful tag to distinguish subscription orders with other normal 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.
Active users of using subscription service per month.
Successful rate of completing subscription orders per month.
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.
Feature user research on different user segmentations.
Conduct usability testing to evaluate proposed design.
UI clean-up to match the company design system.