Improving the local shopping experience on Whatsapp

Razorpay introduced a task this summer as a part of their recruitment process. Here, I present to you my solution to the problem statement. I was required to understand both the customer and merchant’s pain points but was asked only to make screens for the customer end. This problem was expected to be completed in 4- days.

Problem Statement

The problem statement here is to design an experience to enable the local stores (Kirana shops et al) to sell items to their customers through WhatsApp for businesses.

Understanding

What is WhatsApp Business?

Whatsapp Business is built with small business owners in mind. Simple tool for businesses to talk to people.

Who is associated with Whatsapp Business?

How to place orders on Whatsapp?

Understanding the use cases

From the user flow, I understood the different orders that varied based on the following 4 parameters that may or may not change with every order. I got hold of both customers and merchants and gave them tasks to perform while studying their motivation and pain points.

1- Items

I asked the customers to add items to their carts. I also studied the merchant’s side, where I asked them to upload available items in their catalog.

2- Address

I asked the customer to notify the merchant of the address to which items have to be delivered. Similarly, I asked merchants to collect address data from their customers.

3- Payment

I asked customers to choose and pay through preferred options, like COD or UPI, etc. I asked merchants to get information regarding payment, like the method, if the payment was successful, whether the correct amount was paid

4- Delivery

Regarding delivery, I asked the customers to notify the merchant of their delivery method, if they want items to be delivered at home, at what time should be delivered, etc. Again I asked the merchant to keep tabs for the same.

Problem identification

While people in the user study performed their tasks, I list down the major problems and pain points users faced. There were a lot of problems that came up, from both customer and merchants' ends, and therefore I had to organize and prioritize the identified problems. Problems were organized based on the severity and relation with each other. For example, a P0 (P Zero) problem listed both in the customer and merchant end is related to cataloging, which also contributes to major issues faced by users.

Solutioning

Based on my understanding of each problem, I came up with the following solution for each problem.

Constraints

Being a time problem, it was expected to be completed with 2–3 days.

  1. I had to follow WhatsApp's design ideology and UI patterns also ensure that the feature finds a logical place within the information architecture.
  2. Needed to cover the major use cases and flows.
  3. I had to introduce changes such that Whatsapp’s current chat-based environment would not be disturbed.

Problem 1

Merchant

Before- The merchant had to click the photo of every product and fill 4–5 different data fields. When the merchant has 100s of different products, this process becomes very long and very frustrating.

Cataloging items by scanning QR/bar codes

After- The merchant can now scan the QR/Bar code on every item through his mobile camera, and the product can directly be added to the catalog. The manual entry option will still be available.

Customer

Before- Customer had to scroll through a long list of items. Tap on the item and then add it to the cart

After-

1- Customers usually know what they want, the search bar is added to directly find required items
2- Browse item CTA is given to find items based on categories.
3- Mic option added to increased accessibility
4- Users can now directly add items from here.
5- View cart option has been made much more prominent

Problem 2

Customer

Before- Cart screen only showed a list of items. There was no specific input field for payment, address, and delivery options. Customers had to write/enquire about all these details separately.

After-

1- Specific input fields provided.
2- Delivery option may change as per merchant’s situation and therefore can be changed from the merchant side [Edge case: home delivery unavailable today]
3- Address fields and available payment method options are also added.
4- The message option is still available for other requests/inquiries.

Merchant

Before- The merchant had to specifically note payment, address, and desired delivery option

After- Providing specific input fields on the customer end helps designers provide specific spaces within the cart itself, on merchants' end. In other words, merchants will not have to go to a chat thread to find these details, instead, these would be available with associated carts.

Problem 3

Customer

Before- The chat thread with the merchant started looking cluttered. What order was completed, which order was canceled, there was no indication. Moreover, the order status was not visible and customers had to enquire on text. Sometimes they would get delayed reply, other times no reply at all.

After-

Labels like canceled, completed, and processing is given. Only these three labels were given because the merchant will have to update the order status in real-time by itself. Providing more detailed order status like ‘shipped’ ‘out for delivery will be much more difficult.

Merchant

Before- The merchant had no way to update order status and would solve inquiries on text. This is extremely difficult for the merchant to do since he is also serving customers who are coming to his shop. Moreover, merchants had to handle orders from multiple chats. Keeping a tab of what order was completed and what order is pending becomes a bit difficult, given the environment merchant is in.

I created wireframes for merchant end, even though it was not required.

After-

Screen 1- For shop owners only two options are present. Accept or decline.

Screen 2- When the merchant accepts the order it will show pending on their screen and processing on the customer’s screen in yellow.
If the order was declined, it will show canceled on the customer and the declined on the merchant screen in red.

Screen 3- Merchant can mark an order completed when everything is done. It will show completed on both merchant and customer screens in green.

Problem 4

Merchant

Before- To update product availability from the merchant’s end, the merchant had to delete the item from the catalog. It then will not be visible to the customer and therefore cannot be added to the cart. But deleting and then uploading the item is problematic.

After-

I provided a toggle switch to update item availability.

Problem 5

Merchant

Before- Merchant has to handle orders from multiple chats. Leaving a message thread on “read” on a busy day at work is a mistake often made. Keeping tabs on completed and pending orders is hard.

After-

Screen 1-The merchant can click on manage orders and see all the orders from all the customers that are pending, or completed. It also shows the address and payment status.

Screen 2- When an order is completed, merchants need not find the cart in the specific chat thread, they can directly mark it as completed from here.

Screen 3- In case of the mark as completed gets mistakenly selected, they can click on UNDO prompt which will appear for 3 seconds.

Bonus case

Before- In the case of a big store with many staff members, only one person would be responsible for WhatsApp orders. That person will have to handle a large quantity or orders by itself.

After-

The same account could be made operable on more than one device at a time. This will enable better order handling. Since the staff is more, it is expected that a number of orders will also be more. Hence it is beneficial if the same account could be accessed to multiple devices.

The following is my video submission.

Learnings

My submission was not shortlisted. And just like every other curious designer out there, I had to know what went wrong, and what I could have done better. I did this by getting feedback and reading a lot of other submissions that were selected for further rounds.

1- I paid no attention to how shops would be explored on WhatsApp in case the customers do not have the contact information of the shopkeeper.
I took the assumption that “local” meant shops in a specific radius and therefore people in the locality knew the shop owner. But this assumption ruled out a lot of important use cases such as
a). Exploitability of the small businesses.
b). More reach of the shop such as those of small bakeries.

2- Prioritisation and organization of problems should have been limited and crisp. Should have focused on specific big problems instead of focusing on a large number of small problems.

3- Use cases for buying items like rice, vegetables, etc were not covered, which is again a very important part of grocery shopping.

That is it for this submission. Thank you for reading so far!
Feedback is much appreciated. Looking forward to learn and grow.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store