UI Design For An Ecommerce Grocery Store







Raviteja Govindaraju
Ravi is currently working as a product designer at Hatchforce. He is a self-taught UI / UX designer with good experience in designing user interfaces of web and mobile applications.



“Design my website. It should give my customers the best user experience ever,” Sailesh Akella, Founder of Panchee.com said. We first put down the following important points of this business.

  • Selling groceries online is different from selling electronics or apparels. Groceries are ‘needs’ while electronics/apparels etc. are ‘wants’. This is the reason why “groceries” are least sold in e-commerce model compared to other products. We should find out why.
  • Innovative front end design which would revolutionize the front end design of e-commerce websites
  • Innovative options like ‘You might have ran out of’ and ‘Most ordered by you’ makes shopping very quick.
  • A striking feature in this website would be “multiple products search”. Customer can enter whole list of items he/she would like to buy. The site will be designed to show the search results for these items one by one. This makes the shopping hassle-free unlike other e-commerce websites. The search will be designed for giving correct search results even if the user types the word in local language with English script.
  • Placing Facebook profile pics to increase the loyalty factor. It gives a feel of being a part of the store. It depicts and validates the actual presence of the customer on the site.

So, why are E-commerce grocery stores relatively very less in number? We did a small research and came to the following conclusions:

  • Groceries are something that people buy on a regular basis and they are a necessity for daily life (needs) unlike products like t-shirts, perfumes, books etc. (which are wants). Therefore, people do not tend to spend so much time on buying groceries as they spend on other products.
  • When it comes to groceries, people are well aware of what they want to buy and do not really prefer to compare the features of a product. We just buy. To explain it in a better way, suppose you want to buy a t-shirt. You browse many websites; check out various designs, colors, costs etc. and finally order one. But imagine if you want to buy a lux soap. It is the same lux soap everywhere. You don’t give a damn to choose the best lux soap, right? So, this means the shopping experience to the user has to be as quick as possible.
  • If we implement a regular ecommerce website design for the groceries, it will give a very bad user experience. Why? Because the total number of products on the website and the number of products purchased per order are too high and people have to search for all the items all the time. Pain in the ass.
  • Many people enjoy going to a super market just for the experience ofshopping. But if you are buying online in a regular E-commerce model, you get lost in searching for the right product because sometimes you don’t know the name of the product, sometimes you don’t know the product category, sometimes you don’t know the quantity unless you see it etc. So, is it possible to give a real-life shopping experience on the website? May be yes.

So, all of us brainstormed and came up with a mockup which looked something like this –

There is a big clutter free shopping area that occupies most of the real estate of the site. Product categories are labelled on it’s circumference.

Categorization of products is necessary for easing the burden of searching a product, but in the current design we could not categorize the products to significantly simplify the search. We realized that there are about 4 levels of product categories in groceries.

Parent category -> Sub category -> Product type -> Product;

For example: Personal care -> Body care -> Soaps – > Liril

So, managing this kind of information architecture seemed to be a big problem with our design approach.Hence, we scrapped that idea and reverted to a regular E-commerce design and this was our second mockup for the same:

We were initially happy with the outcome but after a few discussions, we started thinking “is this really the best?”

No. we concluded. This design is not very different to regular existing E-commerce portals in terms of user experience.

After a rigorous brainstorming session on the user interface and attractiveness of the front end designs, I came with a great idea of creating an online virtual super market that has the potential to revolutionize the design of E-commerce websites.

I had my last tea with my crush that day, came back to our work place and was desperate to do something ground breaking. Then came our Voila moment!

“Panchee is an online supermarket right? So, let’s just create an online supermarket.” I stated in our team meeting that day. I then explained my idea of illustrating a virtual supermarket in 2D that would solve most of the problems we were trying to address.

Everyone on the team were impressed by my idea and we essentially restarted the project. We worked rigorously for about 3 months. We created hyper-realistic icons. We illustrated shops. We created characters for Panchee. We coded the website like a game. It was turning out to be a wonderful product. We even thought of patenting the idea if possible.

A few screenshots of our works 

Draft – 1 just to convey the idea
Draft – 2 to sense how it may develop further
Buildings designed for each parent category which will hold sub-categories.
Buildings with sub-category icons filled in. On clicking an icon, a popup shows up with relevant products.
The lady for pulling the cart. We gave the user a choice of selecting either a male or a female to do the shopping!  The right side snapshot shows some of the hyper-realistic icons we illustrated.

There are a lot more. You can see the massive amount of efforts, time and creativity that went into creating these things.

What will this design solve?

  • Trying to bring back the “fun” factor in shopping… which is lost in other E-commerce sites and even in offline shopping.
  • Mimicking a real supermarket has lots of advantages. For example, you go to a supermarket to buy lets say soap and eggs. You go, roam around and when you see bread beside eggs, you may remember that you need them as well and hence drop them in your basket.This is what exactly happens on our new design. Though not the exact product, you will see all the product categories as you shop around with our character. And if you remember something, just add it to the basket. So, the design is close to being a virtual store than a random website.
  • In the popup, we also included the links to other subcategories in that parent category so that the user need not switch back and forth frequently – again increasing the speed of purchase.

It’s completely new concept and could potentially revolutionize the way websites are designed in future. We also had this vision of making a 3D version in far future when internet speeds and server bandwidths sky rocket. And guess what, our names would become popular!

Read: 20 Best Ecommerce WordPress Plugins Of 2014

Everything looked well and good.

Three months later –

We scrapped this design. You what??? Yes, you have heard it right. We scrapped this whole design. The buildings, the characters, the hyper-realistic icons everything. But why?

  • It took more time to load than normal sites because of lot of images and lot of special codes. – Very bad UX for a user with below-average internet speeds;
  • Also slow internet speeds may hamper the projected user experience for this design. Hence the charm and the feel of the design would be lost.
  • We had hell lot of issues in IE. (can’t help!) For example, the male guide walked but the female didn’t. Why IE, why?
  • We did user testing for a brief period of time. Since this is a brand new concept, a few people couldn’t find their way through the site.

So what’s next? Well, I got frustrated, disappointed and dejected as all my hard work went into trash.

We started brainstorming again! But this time we were fast because we knew almost all the problems that users might face while shopping for groceries online. More importantly, we knew what not to do than what to do. So, we finally came up with a simple, intuitive, user-friendly design that you can now just

Download your groceries!

This new design will be discussed in another article

So, you are totally scrapping that 2D shopping experience thing? No, we have an awesome idea of using it elsewhere which will serve it’s true purpose.


Lessons learnt in this journey

  • Design is important.

Read: 7 Important Lessons For Designers Working In A Startup

  • What you think is right is different from what is right
  • You are not your user. So, user testing is mandatory for complex web/mobile applications.
  • Hard work never goes waste. If you truly put in your efforts in something, you will have benefits at some point or the other in your life.
  • If you are a startup and made some plan for the next 6 months, make up your mind not to get dejected even if it extends to next year and half. Believe in your concept and keep progressing!
  • Design is very important.

Nevertheless after all these days, we have gone through a tremendous journey of making mistakes, learning and finally evolving as better thinkers.

Also Read: UI / UX Comparison Of ClearTrip, MakemyTrip And Yatra For Hotel Bookings [Part II]

Note: The views and opinions expressed are solely those of the author and does not necessarily reflect the views held by Inc42, its creators or employees. Inc42 is not responsible for the accuracy of any of the information supplied by guest bloggers.

You have reached your limit of free stories
Become An Inc42 Plus Member

Become a Startup Insider in 2024 with Inc42 Plus. Join our exclusive community of 10,000+ founders, investors & operators and stay ahead in India’s startup & business economy.

2 YEAR PLAN
₹19999
₹7999
₹333/Month
Unlock 60% OFF
Cancel Anytime
1 YEAR PLAN
₹9999
₹4999
₹416/Month
Unlock 50% OFF
Cancel Anytime
Already A Member?
Discover Startups & Business Models

Unleash your potential by exploring unlimited articles, trackers, and playbooks. Identify the hottest startup deals, supercharge your innovation projects, and stay updated with expert curation.

UI Design For An Ecommerce Grocery Store-Inc42 Media
How-To’s on Starting & Scaling Up

Empower yourself with comprehensive playbooks, expert analysis, and invaluable insights. Learn to validate ideas, acquire customers, secure funding, and navigate the journey to startup success.

UI Design For An Ecommerce Grocery Store-Inc42 Media
Identify Trends & New Markets

Access 75+ in-depth reports on frontier industries. Gain exclusive market intelligence, understand market landscapes, and decode emerging trends to make informed decisions.

UI Design For An Ecommerce Grocery Store-Inc42 Media
Track & Decode the Investment Landscape

Stay ahead with startup and funding trackers. Analyse investment strategies, profile successful investors, and keep track of upcoming funds, accelerators, and more.

UI Design For An Ecommerce Grocery Store-Inc42 Media
UI Design For An Ecommerce Grocery Store-Inc42 Media
You’re in Good company