Mr.Groc has multiple grocery stores in Delhi, India. Since these stores are within apartment complexes, the residents of the apartments often call the stores to place orders. This had quickly become an inefficient process that required a lot of time & communication. This project was done as a part of my job at a design agency, Story Digital.
14 weeks
(Feb 2019 - May 2019)
Figma
User Research
Ideation
User Interface
Prototyping
Aman Bharti (Frontend)
Keshav Seth (Graphic Design)
Parumita Sachdeva (UX Design)
S.M. Venkatesh (Backend)
The store owner wanted us to create a digital solution for grocery delivery because it was hard for him to take manual orders and communicate through phone calls.
Although the store owner shared his side of the problems and pain points with us, we wanted to make sure if there was even a need in the market for a digital solution. Through our research with customers, we found out that it wasn't just the communication that was hard for the customers but also the lack of discoverability, control and flexibility with the grocery shop.
How might we provide a better grocery delivery experience by improving communication, giving customers more control, and increasing discoverability & findability of products?
Quickly discover products through popular categories and recommendations based on past orders
Homepage is predominantly white with focus on popular categories and recommended products. Ads are at the top & bottom to avoid distractions.
.gif)
.gif)
A dedicated page for all product categories to improve findability & discoverability
Categories tab at the bottom bar to quickly navigate to the list of products offered. Categories and search help users quickly find what they're looking for.
Giving users more control & flexibility through pickup, delivery, and order scheduling
Customers can choose if they want to pick up their order to get it delivered. They can even choose a specific time for their order to be picked up or delivered which provides more flexibility & control.
.gif)
To understand the problem a little bit better, we started by interviewing the store owner and surveying some people who shop for groceries online. Based on our research, we identified 2 main personas, the store owner and the grocery shopper.
Meet Aditya, he is a 52 years old grocery store owner in Delhi, India. He has 4 employees at his shop which help him maintain the inventory, sales, assistance and delivery.
Since his shop is around a residential area, majority of the customers often call his store to place the orders and get deliveries. Although Aditya gets a lot of sales, it is difficult for him to manage all the orders coming through phone calls as well as in store.
Due to limited resources and an inefficient method of placing orders through phone calls, he faces a few challenges
Lesser accuracy: Taking orders manually through phone calls lead to lesser accuracy and wrong orders.
Bad Communication: It is not optimal to take their names and phone number and call them back if some products are not in stock. It is difficult to cater to the dynamic needs of the customers.
Manual Effort: It is painful for Aditya to keep record of all his sales on his point of scale system and requires a lot of manual effort.
Meet Pooja, she is a 36 years old working mother who orders her grocery by calling the store because it’s inconvenient for her to make grocery store trips with all the other house chores, taking care of her kids and going to work.
It’s convenient for her to just call the store and get grocery at his doorsteps. However, her order often gets messed up when products are not in stock and she often gets poor replacements which she didn’t want.
Due to limited resources and an inefficient method of placing orders through phone calls, he faces a few challenges
Lesser control: She liked the convenience of getting groceries delivered at their doorstep but also had communication issues while placing orders over call.
Lesser accuracy: She would often get incorrect products or incomplete orders which was a huge pain point.
Lesser transparency: It was often hard to gauge how long the order would take to be delivered.
From researching both ends of the experience, it appeared that the grocery store owner and customers faced similar problems. To pin point the gaps and opportunities, I mapped out the entire journey of receiving the order by the store owner to delivering it to the customer.
After discovering the gaps & opportunities, I decided to understand the products already in the Indian market, namely Big Basket, Grofers and Swiggy. I tried to go over the apps with users and had three main goals while conducting competitive analysis:
To analyze what features these apps are offering to solve customer needs.
To get inspiration for the user interface design and identify existing design patterns that users might be familiar with.
To identify possible pain points and what’s missing with respect to the user experience and interface.
- Big Basket & Grofers homescreens are full of ads. It seems like they are trying to sway the customers by the ads rather than showing them the products relevant to them.
- This decreases findability and can also cause a decrease in trust amongst users.
Whereas Swiggy has a focus on grocery stores and the ads do not demand as much attention. By keeping the interface predominantly white, users are able to focus better on the grocery store information.
- All three apps followed a shallow and broad categorization by adding more sub categories in the form of horizontal scroll tabs within each category. This was a great way to improve discoverability and we decided to adapt this design pattern for our design.
- It was also clear to us that having pictures provided a lot more context about not just the product but also the quantity and users preferred the visual context provided by Grofers & Big Basket.
By talking to users, we identified that the most prominent way of searching for products in grocery delivery applications was through search and categories. Therefore, improving findability through search and discoverability through navigation and facets was one of our priorities.
The use of pictures looked more realistic and added more context compared to icons. However, since our team was responsible to get the photoshoots done as well, we contemplated on keeping the images to a minimum to optimize time and cost. We decided to create a more realistic looking iconography for our categories.
How might we decrease manual efforts for customers & store owner & improve accuracy?
How might we give more control to customers over their orders?
How might we increase findability & discoverability about orders to the customers?
After discovering the opportunities, it was crucial for us to prioritize features that were relevant to the opportunities. Due to limited technical resources and time, we had to balance user needs and technical feasibility. We mapped out features on a scale of most complex and most valuable to least complex and least valuable. All stakeholders were involved in this process including customers, grocery store owner, tech team and design team.
Payment Methods: For the initial phase, the client wanted to manage payments through their POS system so be able to streamline the payment systems and therefore, we had to have only Cash on Delivery as the method of payment. Since people still do a lot of transactions through cash in India, it wasn't very difficult to have just cash on delivery for the initial few months of the launch.
Location Detection: We decided to go ahead with manual location selection from a dropdown of pre-listed locations as there were only 6 stores in a limited area and using Google Places API was technically more difficult.
Product Recommendations: We also did not have enough resources to implement machine learning for product recommendations, we hence decided to recommend products from previous orders as a work around.
Based on our exemplar analysis and customer research, we chose Home, Categories, Cart & Profile as our four bottom navigation buttons as they are the most frequently used and enhance findability, discoverability and user control.
.jpg)
Creating mid fidelity wireframes to get feedback from customers & store owner and making iterations.
We wanted our brand to give a modern & sophisticated vibe to depict a new era of grocery shopping. At the same time we wanted the visual design to feel closer to nature. To achieve that, we used green as the primary color and pops of pink as secondary color. The logo was designed by the graphic designer in our team.
Customers can quickly discover products and categories or track their existing orders
They can also browse all the categories through a dedicated page or through search that remains on all pages throughout the navigation
Customers can rate their delivery experience which helps store owners get feedback and improve communication
Products page have horizontal scrolls and a search floating action button to improve discoverability & findability
Customers can also quickly select different quantities of products through bottom sheets
Enhanced search shows products as well as categories to provide more context to users
Customers get more flexibility through pick up & delivery options. All payment information is clearly communicated through cart page
They can also schedule when they want the order to be delivered or picked up as per convenience
Customers can pick half hour slots over a span of two days
This project truly taught me how to work in a professional setting and collaborate with clients and internal teams. In a fast paced setting, designers cannot always follow the formal design process and working around the constraints and choosing effective and efficient methods and processes become essential.
Understanding technical feasibility and adapting to a client's current workflow is also an important learning for me during this job. An MVP had to be made quickly and design decisions had to be made accordingly. But at the same time, it was important for me to make sure that I could communicate the technical aspects with the engineers.
Last, but certainly not least, it is an extremely important skill to communicate with the clients and to be able to take into account what they want but at the same time convince them of things which may not work as they imagine it. There are times where there has to be a trade-off between what the client wants and what I as a designer want and it is important to make those decisions mindfully.
