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.
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.
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.
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.
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.
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
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.
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.
Based on my understanding of each problem, I came up with the following solution for each problem.
Being a time problem, it was expected to be completed with 2–3 days.
- I had to follow WhatsApp's design ideology and UI patterns also ensure that the feature finds a logical place within the information architecture.
- Needed to cover the major use cases and flows.
- I had to introduce changes such that Whatsapp’s current chat-based environment would not be disturbed.
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.
Before- Customer had to scroll through a long list of items. Tap on the item and then add it to the cart
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
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.
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.
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.
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.
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.
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.
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.
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.
I provided a toggle switch to update item availability.
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.
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.
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.
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.
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.