Grocery Ecommerce: How to Run a Successful Online Store. Instacart and Freshdirect example

What do you need to know before diving into this article? The pandemic has given an incredible boost to the grocery delivery market. Everyone who previously preferred to push their trolley in supermarkets was now forced to buy groceries online. Covid is over, but the trend for delivery remains. Yes, of course, some have returned to the usual supermarkets at home, but the percentage of people who appreciate the opportunity to buy groceries online and receive them in 15 minutes at home has increased significantly.

The global online food delivery market will reach US$1 trillion in 2023, according to Statista Market Insights. At a compound annual growth rate of 10%, it will rise further to reach US$1.79 trillion by 2028.

The food delivery market is divided into two large segments: prepared food delivery and grocery delivery, each of them includes two to three other segments. The food delivery market includes restaurants and delivery platforms such as Deliveroo and Uber Eats, while the food delivery market includes retail and meal kit delivery, as well as fast commerce known as qCommerce.

Among these segments, grocery delivery has the greatest potential for growth.

One of the likely reasons for this forecast is market saturation. The grocery delivery sector has seen significant innovation in recent years, in contrast to the food delivery sector, which has remained relatively stable and therefore has limited potential for radical transformation.

It would seem, create your own delivery quickly, take initiatives and reap the benefits. But high operating costs, at least in the first five years, make it difficult for many small players to finance their businesses in the long term. In a highly competitive environment, such as in the emerging qCommerce sector, companies compete for consumer attention and orders while covering the costs of dark stores, drivers and marketing campaigns.

One way or another, if you are still thinking about your own grocery delivery business, then read our articles to do it right:

• Mom, I’m creating a food marketplace
• How to Create a Cart and Login to an Online Store
• On-Demand Food Delivery Platforms - Market, Trends & Opportunities

In this article, we decided to compare two American services that provide food delivery services. In terms of their model, they are completely different, but this is not so important from the point of view of the “convenience” of the online trading platform.

As of 2019, FreshDirect held 68% of the online grocery delivery market share in New York City. Other competitors included Instacart (13%), Peapod (9%) and Amazon Fresh (9%).

FreshDirect is an American online grocery company that was one of the first to sell and deliver fresh products to consumers without its own retail network.

FreshDirect focuses on reducing the time it takes to move food from source to end consumer by purchasing directly from farmers.

FreshDirect packages groceries and meals to order using just-in-time technology that reduces waste and improves quality and freshness. The company offers its services through its website and mobile application.

Currently owned by Getir. As of 2022, FreshDirect serves approximately 21 counties in the New York City tri-state area.

Instacart is an American company that provides food delivery services in the United States and Canada. Offers its services through a mobile application and website. The service allows users to order the necessary products from stores participating in the system.

Orders are fulfilled and delivered personally to customers, the service organizes the selection, packaging and delivery of the order within the time period specified by the client (from one hour to five days). Shipping fee is $3.99 for orders over $35 or $7.99 for orders under $35.
Regardless of the order value, there is a 5% service charge of at least $2.00.

Instacart offers a membership called Instacart Express, which has a monthly fee of $9.99 or an annual fee of $99.

Retailers participating in Instacart's partnership program have set Instacart prices for select items that are generally in line with brick-and-mortar store prices. Customers can pick up their pre-orders from the store itself through a separate service.

We will compare from the point of view of user experience, and a little on the technical side. We’ll go through the delivery processing flow on both services and offer our thoughts and recommendations for improving the services.

• First discovery
• Availability
• Search
• Working with the session
• UX/UI
• Product card
• Making an order

Initially, we believe that both services performed 5 points for each parameter. After all, these are very large and well-known platforms. However, for each mistake we will deduct 1 point. That is, we do not make an assessment based on some ideal ideas, but subtract points from the initially high score for mistakes.

Instacart offers a list of categories. If we go to the page of any of them, we are asked to log in. Otherwise, you won't be able to add the item to your cart.

Just for fun, we try to remove the pop-up window through the developer console and everything works, requests are not validated. Now we can add products without authorization.

In addition to the categories, we see a list of stores that “will help us save money”.

The footer is missing. However, there is a burger menu, inside which navigation and useful links and links to download the application for Android and iOS are hidden.

Freshdirect offers a list of categories with open positions. No authorization is required to add an item to your cart. It will only be needed at the stage when you want to add something to your Favorites.

On the main page, in addition, there are promotional products, popular items, various promotions and promotional blocks. The footer contains navigation, social networks and useful links.

• They offer to select a delivery address on the start screen
• Displays a cart icon with the number of added products
• There is a search and a login button

Automatic address detection was not found in any of the services. Perhaps it has to do with the region. If you try to enable USA using a VPN, there will be no result.

Objectively, for the buyer, the first screen of Instacart contains more useful information. From a marketing point of view, it is also better thought out - they try to persuade visitors in every possible way to make purchases.

We take away one point from Freshdirect for its lack of information content and lack of loyalty to unauthorized users.

⭐Instacart — 5
☘️Freshdirect — 4

Let's start with something simple, let's try to interact with services without using a mouse. Let's say we only have a keyboard. In both services this is possible: all the interactive elements that we were able to find can be activated using the keyboard.

Now let's check if the screen reader is working correctly. We won’t go too deep here, let’s check the two most important functions: navigation through the product list and product purchase flow.

When navigating through a list of products, we can hear all the necessary words and terms that will help us find the right product. We hear the name, its original cost, the discounted price, the actions on the button (add to cart) and the quantity of the selected product in the cart when added are announced.

Almost everything is the same here. But you won’t be able to hear the cost of the goods. The focus is on the product name, and the screen reader reads only this text.

For this we deduct one point from Freshdirect.

In both services, it was possible to add the necessary products to the cart using just the keyboard and go through the entire ordering flow.

⭐Instacart — 5
☘️Freshdirect — 4

Let's try to find the required product by a common name, for example, “cheese”. We will estimate the time it takes for the request to be completed and for the products to appear on the screen. Let's run the search query three times and calculate the average value.

Instacart
Request - 1.24 sec.
Loading content - 2.64 sec.

Freshdirect
Request - 1.39 sec.
Loading content - 2.44 sec.

Now let’s deliberately make a mistake in the word and try to find products for the query “cheese”. Both services provide the correct answer and auto-correct to “cheese”.

Instacart's search bar preview is clearer than Freshdirect's; images are added to the text. This means that you can interact with the site on an intuitive level.

If you place your cursor on an empty search field without logging in, you will see a list of popular search queries.

And if you log in, you will see a list of recommended products and popular categories. How recommendations are formed is unknown. We tried adding various products to the cart, to favorites, but the recommendations offered in the search did not change.

Freshdirect does not have any of the above. The search is implemented in the most trivial way. We immediately subtract 2 points, as this limits the user experience, reduces engagement and affects the conversion rate.

For example, if a buyer suddenly sees a suitable product in a block with recommendations, he can immediately add it to the cart or, at a minimum, go to the product page, where he will be shown another suitable product in cross navigation.

Freshdirect's search results can be sorted and filtered. The page also has a list of categories in which the product we are looking for is found.

Instacart does not have any additional functions on the results page, but we believe this is due to the specifics of the service. In the results we see a list of stores that have the products we are looking for.

Let's subtract 1 point from Instacart.

As a result, the search time for both services is approximately the same. Instacart comes out ahead with additional functionality that Freshdirect lacks. However, Freshdirect beats Instacart with additional features on its results page.

If we combine the search capabilities of both services, we get search functionality close to ideal.

⭐Instacart — 3
☘️Freshdirect — 4

We go to the site for the first time, add different products to the cart, then go through authorization. We see that the goods are being preserved. When you logout, goods disappear. We add a few more products, go through authorization again and see that the cart is frozen, that is, the products are added up. Great, that's exactly what we expected.

We carry out the same manipulations and see identical results.

⭐Instacart - 5
☘️Freshdirect - 5

Now let's evaluate the UX and UI to understand what can be improved.
Let's start with the catalog. Let's see how product cards are rendered.
The first thing we pay attention to is the skeleton when loading goods.

This behavior is present in both services. Not the most progressive way to display boot status, especially in a directory.

On our projects, we display a blur version of the image, which allows us to get rid of unnecessary flickering and content jumps, and the user can immediately see the silhouette of the image, which does not look so boring.

We will not take away points. There could be no loading state at all, and the images would then jump due to Flash of Unstyled Content (FOUC). This is a situation when the content initially does not have styles, for example sizes, and after loading the styles suddenly appear and the block size changes, followed by redrawing - re-flow.

When Freshdirect tries to delete or change the quantity of an item, the loading status is displayed at the time the request is completed. If the request ends with an error, the quantity does not change, and a notification with an error message is also displayed.

This is the correct behavior that allows a person to understand what is happening now. Not everyone is able to open the developer console and assess the status of requests.

Instacart has no loading state, and the number of products in the UI changes instantly. If the request fails, the quantity remains changed (incorrect). The correct state is returned only after a reboot + there is no error notification.

Subtract one point from Instacart.

The Instacart logo caught my eye in poor quality. It is used in png format. Ideally, icons and logos should be used in svg format to maintain quality at any scale.

Freshdirect has a logo in svg format. By clicking on the logos, both services are redirected to the main page - this is the correct logic. If the user finds himself in the farthest places of your catalog, in just one click he will return to the main page.

Perhaps we won’t deduct a point for a logo of poor quality, since this is not the most critical oversight. Moreover, we have more notes for Instacart.

Instacart's logout button is located in a place that is not intuitively clear. It is considered good practice to place information about the authorized user, as well as everything related to these processes, in the upper right corner.

It is important to make the site intuitive so that the user does not have to read the instructions. He should easily master all the necessary functions and capabilities of the service while using it. Nobody likes reading documentation, right?

When I tried to log out of my profile, I was forced to look for the same logout button, which ended up being at the bottom of the burger menu.

Freshdirect has user information, logout options and many other fundamental buttons and links in a drop-down list that is located where? That's right, top right.

Taking points away from Instacart.

Another stone in the garden of the Instacart service. Modal windows can only be closed by clicking on the “cross” or using the Esc key. It is considered good practice to be able to close modal windows by clicking on the darkened background behind the modal window, if there is one, or on any element that does not belong to the modal window. People with poor vision sometimes have a hard time focusing on a small interactive element, especially when it is the size of a cursor. With Freshdirect, modal windows can be closed using any of the methods listed above.

⭐Instacart - 2
☘️Freshdirect - 5

Both services openly write the composition, ingredients and other detailed information about the product. Freshdirect has allergen labels in the ingredients, which is really helpful. I couldn't find allergen information on Instacart. Minus point from allergy sufferers.

People often visit product pages in order to find the product that best suits them. Therefore, it is important to set up cross-selling and cross-navigation.

In Freshdirect, as in Instacart, for this purpose, additional blocks “similar products”, “better offers” and others are displayed.

Instacart shows product availability on the card, but Freshdirect does not. It is possible that products that are not available for order are not displayed at all. There is another scenario where, when adding an item to the cart, its balances are checked and then notified that the item is out of stock. But this is not so user-friendly because it requires additional time.

Takes away points from Freshdirect.

⭐Instacart - 4
☘️Freshdirect - 4

We add products to the cart and try to go to the checkout page. We see a blocked button in the cart and a notification about the minimum order amount of $10. We get the goods to the required amount without leaving the cart, using the block with additionally offered products and go to the ordering page.

We see the successive stages of registration on one page, information about the cost of the cart and service fee, as well as fields for a promotional code and phone number. A telephone number is a prerequisite for placing an order, but it is not verified; you can make up any number from your head.

We are trying to choose an address and are faced with a huge problem. Only at this stage do we see a warning that there is no delivery to this address. We can find an address in the search, we can select it, but then we find out that it is not available.

Even at the stage of collecting the basket, it is necessary to notify the user about this, so as not to get negative from him later. We added three different addresses and none of them were allowed. Without a twinge of conscience, we deduct a point.

After entering all the necessary data, the service invites us to leave a tip to the courier and pay for the order. We try to specify a tip of zero and see a warning that the courier can see the tip amount before the parcel begins to be collected. Having become caught in our nefarious plans, we change the tip amount to 6 dollars and find ourselves in the order payment window without any warnings.

When focusing on fields for entering credit card data, the browser detects specially added attributes to the input and offers to use the user's previously used cards, if any.

Add products to the cart and go to the checkout page using the button in the cart.

We see a list of products with the ability to change and delete them, the calculated cost of the cart and service fee, and a field for a promotional code. On the right there is a block where you need to select an address and time range.

If you specify an address that is unavailable for delivery, we immediately receive a corresponding warning. This is exactly what Instacart is missing.

We enter the address, select the appropriate time aaaand...we get a modal window that forces us to log in. Not pleasant. In this case, you would need to immediately notify the user of the need to log into the profile. Otherwise, we are faced with open manipulation. You spent a lot of time and effort putting together your shopping cart, went through all the checkout stages, do you want to continue? Then register, otherwise everything is in vain. The user is forced to do something that he was not originally going to do. Let's subtract two points, no one likes manipulators.

We go through authorization and are redirected to the next stage of registration. We indicate the recipient's information and phone number. A phone number is required, just like with Instacart.

The next stage is payment. When focusing on fields for entering credit card data, the browser detects attributes specially added to the input and offers to use the user's previously used cards, if any. In the fields for credit card data, the attributes are set correctly, and the browser also shows a hint, just like in Instacart.

⭐Instacart - 4
☘️Freshdirect - 3

⭐ Instacart - 27
☘️Freshdirect - 29

We did not set out to choose the best/worst service as such. We were interested to see how everything works for the major players in the foodtech market. Compare with what we do. But the main thing is to collect some kind of “ideal” image that is worth striving for. Below we will share what we did.

Both services have robots.txt, but we couldn't find Instacart's sitemap.xml. A link to the sitemap must be specified in the robots.txt file.

It is a metric that reflects the position or ranking of a website in relation to its industry or business area. This metric helps you evaluate how successful a site is and how it compares to its competitors.

As you can see, Instacart, in this case, has no competition.

Both domains, instacart.com and freshdirect.com, were registered in the late 90s, making them long-lived on the Internet. This indicates their equal SEO potential. Old domains that have been online for many years usually have a certain advantage over new projects. This is due to a number of factors, including accumulated authority, search engine indexing, and user trust.

Both sites have been carefully designed from a technical optimization point of view. Their architecture, page loading speed, use of meta tags, image optimization and mobile responsiveness are thought out to ensure maximum visibility and convenience for search robots.

instacart.com has 15 times more keywords, indicating broader topic coverage and more diverse content.

The number of keywords indicates the number of unique words and expressions that a site optimizes for search engines. This means that instacart.com covers a wider range of topics and offers a greater variety of content that users can find through search queries.

The number of keyword phrases indicates the potential to attract more traffic. This is what we clearly see on the graph.

Comparing all visits with unique users, we note that the return rate for both services is about 50%. This metric shows that both services have a loyal audience that comes back to reuse or watch content.

Freshdirect visitors view more pages on the site, which may indicate they are more interested in the content or products offered on the site. It may also indicate more efficient navigation and site structure that encourages users to explore more pages.

Freshdirect has a lower bounce rate. This means that users tend to stay on the site longer, view more pages, and interact with content.

In this case, we compare as a percentage, because The numerical values have too much difference. This will allow you to more clearly assess the effectiveness of each channel relative to each other.

Instacart has a higher share of organic traffic. This may indicate that the site is more successfully optimized for search engines and that the content is more relevant to queries. Or is a consequence of quality SEO, which attracts organic traffic and increases the site's visibility in search results.

Link mass affects the authority and relevance of a site in the eyes of search engines. The more high-quality and relevant external links pointing to a site, the more likely it is that the site will be viewed as authoritative and high-quality in its field. Not only the number of links is important, but also their quality: links from authoritative and topically relevant sites have a stronger impact on a site’s ranking than links from low-quality and irrelevant resources.

Based on their link profile, Instacart has a significant advantage over Freshdirect. A higher number of inbound links from other websites usually indicates a good reputation and trust in the online environment.

Since the pandemic, people with disabilities have been using online grocery ordering. This is not just about health restrictions. There are many situations where we become people with limitations. For example, you are tying your shoelaces, your hands are busy, and you want to know what the temperature is outside. You can only use the phone's voice interface to ask how many degrees it is today. Or, for example, you are a young mother or a young father, you have a child in one hand, and a keyboard in the other, which means you cannot use the mouse.

Therefore, the first recommendation would be to pay due attention to the accessibility of the application.

Four minimum rules, the use of which will make your product 80% more accessible.

In addition to speed, relevant results, sorting and filtering, an ideal search may also include:

Autocomplete in search helps users save time and effort when typing queries. It offers suitable options after entering a few characters. This reduces search time and improves the usability of the online store.

Instant product previews allow users to quickly evaluate important product features, images, and prices right in the search results. This helps make purchasing decisions faster and increases conversions.

Personalized product recommendations are based on the user's previous purchases and browsing history. This feature allows you to offer customers products that are most likely to interest them. This way you will increase the chances of additional “rash” and unplanned purchases.

Any delivery service has its own zone, beyond which the service does not go. Let's say I live 100 meters from the border of the zone. My address is unavailable and I cannot use the convenient service. Which exit? It would be great to suggest the user the closest available address. This logic will increase the conversion of the service and bring additional profit.

A good solution is to use an interactive map indicating delivery zones. Because information is perceived more easily visually.

Here we discussed in great detail how to create a shopping cart and authorization in an online store.

Both services work with sessions, saving selected items in the cart even after authorization and logout. This is fairly standard behavior for online stores or other applications where users can add items to their cart and return to it later.

However, there are a few things to consider or improve:

Make sure product sessions are not stored for too long. Depending on the requirements of your application and security policy, set a certain session lifetime, after which the recycle bin will be emptied.

If an item in the user's cart is no longer available for purchase, display the corresponding status of the item in the cart.

Set up a notification that the cart is saved in any case, so that users can safely add products even without authorization.

Use analytics tools to track shopping cart behavior and look for opportunities to improve the user experience or increase conversions.

Overall thought: "Make the shopping cart experience as easy as possible for users while maintaining the security and functionality of the application".

Product page conversion plays a key role in successful online trading. Here are some recommendations to help improve it:

Let product images from different angles be of good quality. It would be great if you also have a video demonstrating its use. This will help users get a better understanding of the product. Of course, if we are not talking about a bag of potatoes :)

Describe the product in detail, its features, characteristics, materials, sizes and instructions for use. Provide enough data so that the user makes an informed purchase decision and has fewer reasons to return. Ideally, add information about possible allergens, shelf life,

Add reviews and ratings from previous customers to the product page. This will build trust and help potential buyers evaluate the quality of the product.

Use promotional elements, such as banners with promotions and “Similar Products” or “Other Customers Also Bought” offers to increase your average check.

Provide information about delivery, payment options, product returns and contact information. This will reduce barriers to purchasing decisions.

Now let's talk about the user interface (UI). To create an attractive and functional interface for your online grocery store, pay attention to the following aspects:

Choose fonts that are readable and modern. Use different font styles to highlight headings, subheadings, and body content.

The design should be minimalistic and clear. Avoid overly decorative or complex elements to keep users focused on the core information and actions.

Place interface elements (buttons, menus, links) so that users can easily navigate and perform actions without unnecessary effort. Follow the principles of "readability" and "ease of use." The user does not have to search for the Logout button throughout the interface. Using fancy icons for user actions is also not a good example of a friendly, intuitive interface.

Highlight key interface elements (for example, add to cart buttons, data entry fields, promotional offers) with color or style so that they attract attention and are immediately understandable to the user.

Design data entry forms (for example, for placing an order) so that they are easy to fill out and do not require unnecessary actions from users. Use masks for phone number, postal code and other fields, as well as hints to make using your service easier.

If your app requires registration or authorization before purchase, make sure the process is simple and intuitive.

Organize site navigation logically and consistently. Use menus, breadcrumbs, sorts, and filters to make searching and navigating between pages easier.

Make the ordering process as easy and intuitive as possible. Ensure that users can add items to their cart, select a shipping and payment method, and fill out the required shipping information. Don't stretch the checkout process over many different pages.

Read more about what an ideal store looks like on our blog or come directly to the project assessment site - we’ll make one for you!