UI Design For An Ecommerce Grocery Store

• 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 –

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 

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.