Enhancing the grocery shopping experience with in-app features

Manivannan
Bootcamp
Published in
13 min readFeb 17, 2023

Let me take you through my process of improving the grocery shopping experience by adding internal features that help busy users save both time and money.

Engaging display images of the features of the grocery app

About Retailx

Retailx is a grocery shopping application that helps users to buy groceries online just like the usual grocery apps you can see around the world. Retailx is mainly focused on deals and offers that help customers save money. Retailx has a separate dedicated section for “deals of the day” where the deals change on a daily basis based on different categories. Overall, the main focus of the application is to make the user know more about local deals happening and save money.

Initially, the plan was to revamp the Retailx application on a complete note with respect to a clean design and also to improve the shopping experience where people can find deals, and save money and time.

But then, this emerges as an important feature to improve the shopping experience in most of the grocery apps available. I’m going to skip the usual, obvious parts of designing a grocery app and focus on features that save users time and money.

In this case study I’ll be taking you through my process of adding additional features that can help shopping apps to improve the experience of busy professionals/Students/People who want to save time and money by sitting at home and pointing their fingers at their smartphones.

Introduction:

Many people struggle to save time and money on their grocery purchases due to limited resources and the inconvenience of shopping. These challenges are exacerbated for busy families and professionals who have little time to compare prices and search for deals. As a result, there is a need for a convenient and cost-effective way for consumers to manage their grocery lists, find discounts on the items they need, and discover new deals.

Foreign Countries like Australia, the US, etc have a countable amount of local grocery stores. For example, In Australia major grocery stores which are used by customers are Coles, Aldi, and Woolworth.

These are the major shopping centers for grocery, electronics, bakery, Baby care, etc and the prices across each store vary based on the location and items.

Understanding the nature of the problem:

In Today’s world, people tend to lean toward offers and deals and in fact, the main reason they are leaning towards deals is that they are saving money. People tend to compare prices across different stores, and different websites and have an idea that this particular store is cheaper than the others. In the end, all they need is a satisfied ending that they have saved x amount of $$$.

The same applies to grocery stores and online grocery apps,

Case 1: A busy professional with a hectic schedule finds it challenging to save money on groceries. The traditional method of visiting multiple stores and websites to compare prices is not only time-consuming but also inconvenient. Additionally, the process of searching for deals takes up a significant amount of time, making it difficult for the professional to find the best deals on groceries.

Case 2: A student on a tight budget is always looking for ways to save money on groceries and like to be organized and plan ahead, but find it difficult to keep track of the grocery items needed for the month. They often have to switch between different apps to place orders based on their notes, which can be frustrating and time-consuming.

With the personas considered, the major significant problems are

  • With 1000’s of products floating around, people try to allocate and spend time to get to different stores to compare prices of respective items.
  • People still try to make a list of shopping items through third-party apps like Notes, Todo, and even on paper.
  • People need a convenient way of shopping for deals and finding the best items at deals as per their personal needs. Most of the users jump into the deals section as an explorer and buys the product of the deal that matches their expectation.

Important metrics considered to help the business:

Make shopping experience convenient: Reducing the time spent by users on comparing prices on each product.

All-in-one Manager: Get all of the user’s needs of managing grocery lists in a single space to avoid switching between applications.

Customer Satisfaction: Improving the satisfaction rate of users who wants to save money through deals.

Design Process:

  • The design process I followed is quite simple and straightforward. I had a note of all the important key points which need to be designed in a particular screen/component. Strike the points whenever the key point has been added to the design layout. Then the process gets a little complicated, The components went into multiple iterations before it could be added to a screen. It was a challenging process as there are multiple components and multiple screens which need to design.
  • I also analyzed different patterns in different genres such as grocery, food delivery, and E-commerce shopping. Well-versed applications that helped me to make neat decisions based on the user’s needs.
  • I also did a competitive analysis of applications with design patterns that are similar to Retailx needs. Though there are no direct competitors in a similar genre to reference, I took the extra mile to dive into similar patterns from various genes that could guide me in taking design decisions.
  • Finally, prototyped all the different versions to prototype, test, and re-iterate if there are any flaws and issues.
  • The process was challenging, but everything problem has a sweet ending, right?

Solutions:

1. Decreasing the time to find the Product Prices:

The ability to find prices across different stores and the best prices among the different grocery shops is still a long shot. Current problem is that people go to different stores to compare prices or get recommendations from friends to have an idea of which store has the best buy.

I noticed this as a common thing among individuals who goes to physical stores to buy groceries, who literally spend around 20–30 mins of their time apart from shopping to compare prices among different shops.

I analyzed a few locals over here on how they shop, This is where it gets quite interesting. People who are experienced in knowing the shopping prices go directly to the shop to get the goods and then jump to another shop to get another product which is priced lesser than the previous shop. In simple terms, people are willing to go to different stores to get products off their lists based on the price reductions.

We need to ensure that all the users using the application should be able to find the prices of particular products from different stores on the go.

Ability to compare prices:

In order to solve the problem, This should be integrated in such a way that the user can tap on the product and compare the prices from different stores from the same screen. This will reduce the time taken to search for the best deals.

Ability to compare prices from the products displayed in Homepage

Each product in the application has the ability to compare prices among different grocery stores. Making the prices visible along with the store icons makes the user understand what prices these items possess in different stores. Along with the desired information, Showing the best price/deal among the different stores will emphasize the solution for the pain point we are solving.

Being transparent about the prices increases the trust among the users and helps the users to choose the best. This will be beneficial for the users to save Money. As it is beneficial to users, it’s beneficial for the business as a model to generate revenue.

2. Managing Shopping Lists :

Managing lists of items can be hectic and time-consuming. Current problem is that people tend to jot down the items in third-party applications or paper and try to remember the items they jotted down. People juggle between different applications just to have a list and need to check whenever they need to get the groceries listed.

I observed this problem is common among all individuals mainly students, bachelors, and busy professionals who are quite busy with their profession. They are forced to make a note of them so that they won't forget whenever they're needed.

The approach to solving this can be demonstrated using the user flow illustrated below,

UserFlow diagram on adding grocery items to designated lists

Ability to add items to the list :

Adding items to the list should be as easy as adding to the cart. Users are well aware of the positions of the buttons. Without re-inventing the wheel and not disturbing the position of the add to cart, we are trying to educate the user for one time about the lists. Adding items to the list is a single-tap action that moves the items to the desired list created by the user. The list should be persistent across sessions to save the user from making the list once again.

Adding product Items to the available list

Users can also create different lists based on their needs like Parties, Weekly essentials, etc to manage the list for future reference. These lists are customized as they can have different names and color tags based on the needs. This helps the users to differentiate the list.

Categorizing the items to list:

As mentioned, Adding items to the list is a single-tap action and it allows you to create a different list for different occasions like parties, daily needs, work, etc. This will help the user to separate the products into different scenarios and allow them to access the list they want in no time.

The application has the ability to make the user create a list on the go and differentiate them according to the color codes. Having color codes helps them to separate the categories based on their needs.

Ability to create new and customised lists

Filtering lists:

There are scenarios where users can add n number of items based on the list, and accessing them should be easy. Filtering the items based on the activity will open a lot of ways to access them.

By using category-based filtering, the app makes it easier for users to quickly find and add the items they need to their shopping list without having to search through a long and unorganized list. It also helps users to better manage their needs and preferences by allowing them to filter out specific categories of products that they want to see. This creates a more user-friendly and efficient shopping experience.

Allows users to filter items in the lists

Additional Notes :

The usage of Todo’s and paper are quite popular for a shopping list, which makes a good reason to embed those features in the application.

People are well aware of the old traditional method of adding items and checking them off when it is done. This app has the ability to check things off and add additional things which need extra attention.

Allows users to add additional notes similar to todo’s

Comparing Prices on the list :

Comparing the prices of each product is different than the price comparison on list. The list is a combination of a variety of products and helps users to buy items in a single click. Comparing pricing for the total items on the list along with other shop prices can definitely help the user in making more informed purchasing decisions.

Tabs to filter checked items

This feature can be incredibly useful for users in managing their budgets and finding the best deals on the items they need. For example, you may find that one store has lower prices on certain items, but another store has lower prices on others. By comparing the total cost of your shopping list at each store, you can make more informed decisions about where to purchase each item to get the best value for your money.

Ability to compare prices for the items in the lists

The design is similar to the individual product comparing list with an additional CTA that allows users to share and buy the items in the list.

More emphasis is given to the price provided by RetailX as it helps the business to be profitable. Being profitable and transparent at the same time keeps the user’s trust intact.

Making the shopping experience convenient :

There are definitely a lot of products to be searched for. More the choice the more confusion the user gets while searching for the products. To make the user feel engaged and choose products without any hassle different category-based shopping experiences are designed.

Current problem is that People spend a lot of time in apps just surfing and exploring the different products available. The design needs to be implemented in such a way that users need to get the desired product at the right time.

Though people will not have any intention of getting products, exploring a set of products will make them buy if the deal is quite suitable for the person who explores it.

I’ve found this pattern among all the individuals who go to the store just to get a single product but ended up buying 2–4 products in extra. In end as a company, it generates revenue.

Users are free to explore products and shop for anything they needed, but having a category for different shopping experience save time for people.

Deals of the day:

Having a deal-of-the-day feature in the application helps the user to get the best deals offered by the stores in the vicinity. This attracts the user to the application for daily visits and also encourages them to shop for discounted items.

Tabs that allows users to distinguish products

The design is made in such a way that it is eye-catching for the user and encourages them to shop for the products on the deal. The content has to be placed in such a way that it should be informative and also convincing.

Though there may be a lot of products that will be brought to deals, finding them should be easy and accessible. Using in-menu categories helps users to find deals on time.

In-menu category, that allows users to pick items faster

Products are designed in such a way that it attracts users based on events, brands, promotions, etc. Along with that, the products are split into categories which helps the find the desired deal for the category they are searching for. This is just an additional feature that helps them to find the product rather than searching in the search box.

Event-based shopping :

Events like the Winter season, Holiday season, and festivals create huge crowds on the app. To help the user shop in no time, Event-based shopping is designed. This allows the user to search for products that are related to the event. This will reduce the time taken to search for things in the stores and allow the user to check the discounted prices of items on one page.

Allows users to buy products based on the events

Brand-Based shopping :

Certain people rely on certain brands. Having the ability to shop based on brands makes it easy for them to find out their desired product. The search process should be streamlined in such a way that the user should be able to shop for any product with the desired brand in no time.

Allows users to buy products based on the Brands

Promotion-based shopping :

Seasonal promotions are a great way to get the user engaged and shop more. Promotion-based shopping allows the user to shop the products with the best deals and discounts. The UX is designed in such a way that users should receive the best deals and offers within the app that motivates them to shop more.

Additional Features :

The problem that these features solve is the hassle of manually adding items to the grocery list and missing out on offers. In the past, people had to manually write down the items they needed to buy on a piece of paper or a notepad. This process was time-consuming and prone to errors. Additionally, people often missed out on offers because they were not aware of them or forgot to check them.

However, with the ability to upload grocery bills, people can simply take a photo of the bill and upload it to an app or website. The app or website will automatically read the bill and add the items to the grocery list. This feature saves time and eliminates errors.

Additional feature on uploading bills to retrieve shopping items

The second feature, sending notifications for offers on items added to the list, solves the problem of missing out on offers. Once a person adds an item to their grocery list, the app or website will notify them if there is an offer on that item. This feature ensures that people do not miss out on offers and can save money.

Ability to receive engaging notifications on items in the lists

Learnings :

There were so many learning from this project from building the UI to Researching the features and iterating the designs.

  • Learning from patterns on different applications and how they designed different features to make them user-friendly gave us a great guide to develop our own.
  • Learning from users and their thought processes helped us to design features that are easily understandable and easy to use.
  • Having a small feature that will add a whole new experience is something new and the impact it caused is great.
  • Happy that I have worked on it to explore options that will impact the whole grocery application.

Started as a redesign project, but ended up as a whole new exciting feature for the grocery applications is immense.

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. Bootcamp is a collection of resources and opinion pieces about UX, UI, and Product. To submit your story: https://tinyurl.com/bootspub1

Manivannan
Manivannan

Written by Manivannan

Product Designer | Webflow developer

No responses yet