UI design of an ecommerce grocery store

How we brainstormed and how the design evolved…

“Design my website. It should give my customers the best user experience ever,” Sailesh Akella, Founder of Panchee.com said.

We initially put down some important points of online groceries business like how selling groceries is different from selling electronics or apparels; that grocery selling should be quick and fun etc.

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!

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!”

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