The personalized grocery shopping experience that connects you to trusted neighborhood stores
Client: Shopper.Run
Duration: 6 months
Team: Anubhav (UI), Dinesh (UI), Andrew (Copy), Mili (Brand), Diana (Brand Research)
I led the product design team comprising one researcher, one brand designer, and two UI designers into delivering the product scope, design prototypes and finalized content strategy to evangelize ideas, gain alignment and gain buy‐in from founders and investors.
Currently (January 2022), the first phase is in production and expected to launch in April‘22.
The Challenge
When the pandemic first hit the United States in 2020, majority of independent grocery stores nationwide lacked the technology, marketing and fulfillment infrastructure to compete online and ended up losing their loyal customers to big box retailers. Consumers with a strong buy-local mentality were now running into a pandemic reality: It simply wasn’t convenient to shop locally from home. As months went by and the number of coronavirus cases remained high, shoppers continued to stock up from Walmart, Target and Amazon in record amounts.
As much as shoppers missed visiting their favorite neighborhood stores, it proved too hard to break away from the convenience of shopping online and getting instant deliveries. There isn’t any alternative that's almost or just as convenient to shift the focus back to neighborhood shopping and bring back the power to the local businesses.
Initial Insights
Three members of the founding team living in and around NYC were champions of “Shop Local” but had to switch to an online grocery service like Amazon, Walmart, Instacart and Shipt during the pandemic. We did multiple Zoom calls to go over actual shopping experience with all of these apps and intently observed their thoughts and emotions while they narrated the conveniences they appreciate, the connections they miss and the pain points they are really frustrated with.
As an outcome of this discovery process, there were some core friction points identified for this platform to solve:
They remain committed to support the local community
The pandemic has made people appreciate locally sourced food and the people who make that available, more than ever before. Given the option, they will prefer to shop online at their local grocers versus big box retailers to support small business owners, connect with real people and feel part of the local community.
A personal connection and experience for them, is as important online as it’s offline
Customers wish to experience a similar level of “personalized” service they get when they visit the store where the friendly butcher or baker know them and their preferences. They are willing to trust these stores with more personal data in exchange of a much more personal experience than they get from big box retailers.
They are worried about quality and safety of food
When people were forced to move all their grocery shopping online almost overnight during the pandemic, it was very frustrating to find staple items out of stock, and not being able to get the right substitutes. Another pet peeve reported was the quality of fruits, vegetables and meat which users primarily related to not being able to effectively share preferences or communicate with their shoppers.
It’s not just about someone picking up the basics—it’s about having someone they can trust
Choosing ripe produce, getting the right type of bread and taking the time to make sure you’ve got the correct items makes all the difference. Customers hope to build this connection with people who have some level of expertise with food and can understand their preferences.
“I want to shop local stores through people I can trust to pick my food”
— Diana from NYC
The vision for Shopper.Run is to keep the grocery experience local by amplifying, instead of replacing, the real people that buy, deliver, shop, grow and sell groceries. We have set out to build an ecosystem in which grocery store owners, their suppliers, the personal shoppers, the delivery drivers and finally consumers can all co-exist and interact through their dedicated platforms or apps.
Keeping grocery local
-
For Businesses
Neighborhood grocers and independent brands are getting overwhelmed trying to grow their business and give their customers what they want online. Shopper.Run gives them the tools they need to succeed online
-
For Shoppers
Shopper.Run is the only personalized shopping experience that connects you to trusted neighborhood stores and the people who understand your needs, to deliver groceries that are safe and suited for you and your family.
These principles became the foundation of our work and below I share some of the salient aspects of how it informed our approach towards crafting the consumer experiences.
“Netflixing” grocery shopping
Narrative: Knowing customers as individuals is as important online as it’s offline, not just to see what they buy, but to also understand why they buy what they buy. Without this insight, we risk leaving much of the catalog undiscovered if shoppers do not stray from their typical grocery list (as if often the case with significant number of shoppers).
Solution: By offering customers the capability to build digital profiles of their preferences on top of tracking their browsing behavior, we can get them to explore relevant, never-before-purchased products that motivates them to keep coming back for more. For instance if a store knows that a customer is shopping for a family with 2 children aged 8 and 12, one child is dairy intolerant and one parent is vegan, on a budget of $100 per week, we can use this micro-level knowledge to generate personalized product suggestions tailored to the individual’s preferences, buying habits, dietary restrictions and allergies.
The first step asks user to mention size and nature of family in the house.
Next, the app asks for a list of special needs and preferences associated with diet.
Lastly, ask user to pick their favorite brands they typically shop regularly.
Choosing a personal shopper you can trust
Narrative: Lack of quality or freshness of products is one of the major pet peeves for shopping online at big box retailers. In a store, customers can visibly check the freshness of produce, meat, and dairy but are forced to rely on some stranger they don’t trust, to do it online for them
Solution: Allowing new customers to pick who they want to do shopping for them based on their profiles or reviews from other customers and at the same time enable returning customers to easily pick their previous shopper will instill trust and improve the relationship between customer and employee.
Users choose a personal shopper they can trust to pick out their grocery, based on their availability, profile and reputation.
Returning customers can easily track their trustworthy shoppers they have used in the past and choose a store to shop, based on their schedule and availability
Returning customers can easily track their trustworthy shoppers they have used in the past and choose a store to shop, based on their schedule and availability
Personal shoppers strive to tell a compelling story about themselves including their background, education and brief story to engage customers
They can feature a video about themselves on the top of their profile page
Personal shoppers strive to tell a compelling story about themselves including their background, education and brief story to engage customers
Discovering unique brands selling great products
Narrative: The pandemic is making people appreciate locally grown food more than ever before. Customers want to help their local community, the farmers and the food producers, as they are aware that not only are these products safer for their families but at the same time how important this is for the producers financially.
Solution: Select like minded brands are invited to join the Brands Plus program to boost reach, create a compelling story for their company and products and get themselves prominently featured across the customer experience online.
Featured items from select sponsoring brands get premium placements and more real estate with additional brand and product information.
Premium product pages have additional content and distinctive UI to create more customer engagement.
Premium brand page will have additional content and distinctive UI to convey a compelling story about the brand.
Knowing how to select produce, meat and dairy
Narrative: Among those who use online grocery services, only half include produce in their orders primarily due to concerns over quality. Whether a customer wants to order a melon and bananas at peak ripeness, the perfect cut of meat and fish, or smooth unblemished potatoes, good quality and selection are chief concerns online.
Solution: By encouraging customers to easily choose from predefined instructions that are specific to the items they are adding to the cart, there will be less guess work from the personal shopper and the customers are more likely to get the quality they want.
While shopping for fresh produce consumers are encouraged to choose specific instructions to get the quality they want. For instance it could be the level of ripeness needed for bananas.
While shopping for meat consumers are encouraged to choose specific instructions to get the quality they want. For instance it could be the level of marbling/fat content in meat.
A number of grocery stores also sell freshly prepared, ready-to-eat or made-to-order food like sandwiches, pizza, salads and more. The app should be able to take these orders, let users customize their meals and get them delivered along with their grocery orders.
Providing nutritional info and allergen warning
Narrative: While there are ‘Filters’ to refine product lists by certain tags, customers are often not digitally savvy and may struggle to verify nutritional value of products online or if they include any known allergens.
Solution: If a mother whose child is allergic to gluten is ordering a box of cookies, she should be warned of the known allergen along with being offered safer alternatives that are gluten-free. This will make each customer feel as if they are being treated individually.
The products pages are highlighted with nutrition tags matching customer's preferences to ensure they are always being driven towards choosing the right products.
In case a user chooses to add a product that has a known allergen or is inconsistent with their preferences, the system warns them with the option to switch to more relevant alternatives.
By using 3rd party APIs, products information will include Good attributes (“Low Sodium”) and Bad attributes (“Added Sugar”) for customers to make knowledgeable decisions.
All the usual favorites are only a tap away
Narrative: Shoppers can be set in their ways, not straying far from their typical grocery list and find it frustrating if they are forced to search for these items every time they open the app.
Solution: Every item bookmarked or shopped by customers is automatically pushed to the top of relevant category pages as well as gets stored to their ‘Favorites’, allowing them to quickly add them into the cart. Users can also add items to this list manually, so they can maintain a categorized collection of most shopped and favorite items in one place.
Select to shop all your favorite items in one place
Move your favorites to the cart quickly and efficiently
Every category or search result page features previously bought or favorited products prominently.
Enabling seamless interaction with personal shoppers
Narrative: What’s worse than encountering a stockout? Getting a bad replacement that customers are not expecting! This is the second most commonly reported complaint after the quality of produce and meat.
Solution: While the best way to deal with out-of-stocks is to avoid them altogether, one can turn an unpleasant stockout situation into a positive one with the right customer service. How did we do that? By allowing customers to track the progress of their orders, chat with their personal shopper and approve replacements if an item is out of stock (provided they have expressed the need to do so).
As soon as assigned shoppers start bagging the order, the customers are notified and invited to connect with them to review and approve out-of-stock replacements
As the personal shoppers bag the items, the customers can see whether item is in stock or not. For all out of stock items, they will either be requested to approve a substitute or refund
While the order is being bagged, the customers can chat with their personal shoppers to request new items or replacements
Enjoy hassle free pickup or doorstep delivery
Narrative: Different stores are set up differently to fulfill orders. One such difference that we observed was that smaller stores in the heart of the city usually have dedicated pickup zones whereas larger stores in the suburbs offer curbside pickup from the parking lot. Similarly for delivery, shorter distances in New York were being covered by carts vs cars for longer distances and stores out in the suburbs.
Solution: Both the shopper app used by employees as well as the consumer app need to have robust flexibility to cover various scenarios emerging out of the various business cases laid out by the fulfillment team. Till the time of this writing, we had done pilots with stores in the heart of New York city to go through the pickup and delivery experiences.
For delivery orders, while the users are waiting for the rider to pick up their orders, they are given the option to leave any last minute delivery instructions for the rider.
After the rider has picked the order, the progress moves to 'Out of Store' and an option to 'Track Order' appears for users
Once the users tap on 'Track Order' button, they are able to track their order and get in touch with the rider.
For pickup orders, the main screen showing the summary of the live order marks the progress at the third stage of 'Ready for Pickup'.
Once the users tap on 'Get Directions' button, they can view the store details and link on how to get there. If the store is setup for curbside pickup, the screen asks the users to provide more information about their vehicle, so the store employee can spot them easily.
Once the users arrive, they tap on the 'I am at Store' button to send a notification to the store manager designated to manage pickups. The manager assigns the order to an employee and that information is routed back to the customer along with an option to call.
Reviewing shopping experience and requesting support
Narrative: No matter how much one tries to mitigate, a lot can go wrong in grocery delivery business when you don’t have real time visibility into inventory and fulfillment staff sets their own work schedules. Our users reported frequent issues related to their orders and being able to get their complaints addressed in time.
Solution: After the order is delivered (or picked up from the store), the customer is prompted to rate and review their shopping experience. In case there is an issue, there is an interactive FAQ section that guides them to resolve issues related to their orders on their own, only asking users to call a number or leave a message in case the issue remains unresolved.
Reviewing the experience from personal shopper involves rating and answering what went wrong or what they loved depending on the rating score.
The customer can also select and leave specific compliments (that are tagged to shopper's profile), leave a gratuity and enter a note for detailed review
In a number of cases, employees shopping and delivering will be distinct, so customers will be able to rate their shopping and delivery experiences and offer tips distinctly.
The 'Previous Orders' screen in the 'Account' section has an option to access customer service and suppoty
The 'Customer Support' section asks users to choose the order in which they have an issue. The last order is selected by default, so users can quickly access it without having to search for it in the entire archive.
The 'Help & Support' for each order is presented as a list of frequently encountered issues that triggers an automated chatbot supported by a third party plugin
Approach
The biggest challenge I faced throughout this project was moving forward with the design in the midst of frantic discussions regarding how to phase out the roadmap of this vast project. As I have already covered, there were four key stakeholders involved here, each having their own needs.
Consumers looking to shop groceries
Local store owners trying to grow their online business
Independent brand owners looking to boost their recognition and build a retail distribution network
Personal shoppers and runners who will fulfill orders as per their schedule
The team spent a lot of time debating the brand positioning and finally settled into 2 distinct brands for B2B and B2C. The flagship B2B program that will connect retailers and brand owners will be called “Brand Plus” and the marketplace consumers use to order groceries from local retailers was named “Shopper.Run”.
Once the brand positioning and architecture was settled, it was important to understand the different ways various stakeholders will interact with the platform. I mapped all the possible interactions into a customer journey diagram.
As mentioned above, three members of the team based in New York were regular users of various online grocery services. As discussed above, we reviewed about half a dozen apps over Zoom calls, placed actual orders, discussed their pain points and brainstormed opportunities for creating breakthroughs. While there was a benchmark for overall usability and functionality, I had to look for inspiration outside the industry to match the level of personalization that was missing from the ordering experience.
Kroger
Amazon
Instacart
Walmart
Mercato
Shipt
In current times of remote work, I I went through cycles of requirements, approvals, specs and handoffs before teams could commit to moving forward with the work. My process started with virtual white‐boarding of concepts and flows with the founder that helped get everyone on the same page regarding user goals, business goals and scope of the project.
I along with another UX designer got to work translating these into wireframes. I have a strong preference for hi-fidelity wireframes so the stakeholders get a pretty good idea of how the platform will function and the visual designers and developers can understand the product vision better and plan their deliverables.
The visual look-n-feel was influenced from “Glassmorphism” : a trend popularized amongst other by Microsoft in their Fluent Design language as well as by Apple in the latest version of Mac OS Big Sur. The UI in the consumer app incorporates the core elements of this trend - vividly colored backgrounds, frosted-glass effects and multi-layered translucent objects floating in space!
The visual designers in the team were adept at making prototypes which turned out to be the most effective way to gain meaningful feedback from the team, consensus from stakeholders and approval from the founder. In fact, I also recorded my prototype presentations as videos with my voiceover, so it can be referred to by the development team anytime during the production cycle.
Lastly, I also created additional documentation to communicate everything from high level scope, to detailed micro‐interactions.
Testing our design decisions and assumptions
Once we had a prototype ready for use, I decided to put it out there for some testing amongst our colleagues in New York and uncovered some key insights.
Insight #1: While onboarding new users and inviting them to build a profile in exchange of an offer and a promise of a better shopping experience, we found the users were confused about the a couple of questions and ended up vague responses to get over the step which would have made the experience even more inferior.
We decided to shorten the questionnaire by skipping on 2 steps. First, we got rid of the question asking users to choose their most shopped categories as everyone conveyed that their shopping list vary week-to-week and they didn’t quite know what to exclude except for pet care (in all cases) and baby food (in three cases), as those users were not pet owners and parents respectively. Secondly, when it came to choosing from their favorite, the users felt we neither have enough of a choice nor were they particularly loyal to just one brand to warrant such a selection upfront.
Insight #2: Our colleagues shared that their trusted neighborhood stores of-late have been more important to them than ever before. They felt strongly about the need to connect with and know the real people who worked there with passion and didn’t like the idea of technology being the barrier to that connection.
We came up with the concept of a "Meet the Family" section to give stores an accessible face and project to existing or potential shoppers that the brand is proud of the people on their team. Each employee will have a profile detailing their actual talents and personal facts, as well as their superhero abilities to give visitors a colorful snapshot of the entire team, highlighting both their impressive experience and friendly culture.
Insight #3: Two users who tested scenarios related to returning users felt strongly about being able to choose one of the personal shoppers they have used before, and in fact went to the extent of saying that they’ll be OK keeping their delivery schedule flexible by a few hours based on the availability of their preferred shopper.
Our original state (shown in the middle below) required customers to browse shoppers and choose one based on availability, profile and reviews from other customers. While that experience made sense for customers coming to the app to place their first order, it created unnecessary friction for returning customers as articulated by our colleagues above. For returning customers, I ended up including two additional states showing one or more of their personal shoppers available in the chosen store (shown on right) and when none of their previously chosen shoppers are available to shop in the current store but available in other nearby stores (shown on left)
Insight #4: One of the things we observed and feedback we got back across the board was how users often expect to see their favorites and previously bought items prominently, even while searching for relevant categories and keywords. This was quite insightful as I assumed that users looking to re-order their previous items will simply go to access them in ‘Favorites’ or ‘My Orders’ sections.
I redesigned the Primary Category, Sub-Category and SERP page layouts to prominently feature items that have been either favorited or purchased in the past from the respective store.
Insight #5: One of the members who had been showing the prototype to friends and family informed how the SNAP* program has been so popular with certain people in their communities and how it’s a missed opportunity for us to not allow customers to use their EBT cards to shop for groceries and fresh produce from participating stores. * The Supplemental Nutrition Assistance Program (formerly known as "food stamps") provides food assistance for nearly 1.8 million low-income New Yorkers including families, people who are aging and people with disabilities.
We researched and reviewed some instances of how platforms allowed customers to pay with their SNAP-EBT cards. We observed that only select categories and items within those categories are eligible for SNAP program. So we had to allow for shoppers to be able to pay for those items with their EBT card and the balance for other items in the cart with regular modes of payment. Also delivery fees (if applicable), tips & convenience fee required other forms of payment.
The shopping cart tracked and showed items eligible for EBT payments distinctly and clearly, so customers are aware what they will need to pay on their own
At the time of browsing and choosing a store, we made it clear whether a store accepts EBT payments
When it comes to payment, the customer can pay with regular payment methods or choose to add a SNAP-EBT card just like they will add any other mode of payment
Returning users will find that their EBT cards are stored along with other modes of payment and they can choose to use the EBT card to pay for items eligible for EBT payments
After the order is placed, every communication to the customer shows clear summary of costs and payments differentiating between EBT and non-EBT.