Until September 2016, Grofers was a mobile-only platform. In August, we realised there was an audience who were not comfortable placing an order on mobile phones or didn't have means to download app and were interested in ordering via their laptops instead. We decided to launch a responsive website similar to our app to serve to that audience.
In about three months, we launched a minimal version which allowed users to go through the product listing, search products and place an order. Six months after the launch it's responsible for 20% of the revenue and has almost all the modules of that in our mobile applications. I was responsbile for designing the whole product working closely with developers and product manager.
An unfinished product helping users and making money is better than a perfect product in the studio. It's better to launch early, observe users, learn and iterate your product than spending months in studio designing and never launch. We took this oppurtunity to launch an MVP in the market. To start off, we focused on giving our users a good shopping experience on desktop and on mobile phones.
Working on Grofers mobile app had made me realise a few things needed to be fulfilled by the new webapp-
- User should be able to see products early in his journey
- User shouldn’t have to make too many decisions in his journey
- User should be able to move easily from aisle to aisle without going back and forth
- We needed a simple checkout which avoids all anxieties user has at that point
- User should be able to look into his cart and make changes without losing context at all times
- The website should be responsive and work well on mobile phones
- The website has to be consistent with the our app
Back then, the webapp had just the fundamental modules of IA
- Onboarding: Location Module which would allow user to share her location
- Inform: Letting user know about the ongoing offers and new launches
- Shop: Module to search and to browse the products
- Checkout: Flow for selection of delivery slot and payment
To make sure users were able to go through the product listing effciently, I decided to make a few iterations and test them with people internally and externally.
Task Analysis: I gave users a task of finding three products (from across the categories) and add them to cart without using search. This was done to know how comfortable users were with browsing.
Here are few of the screens of desktop version we launched in the first go.
While we were tracking the performance of the webapp, I designed and launched the other modules starting with order history, order tracking, saved addresses, my account etc. Screenshots of some are here-
Heatmaps and other screen recording observation tools were/are a huge help to understand users' expectations and habits. Watching people interact with the product made me realise things which we did right and things I had no anticipated. Here are couple of screenshots of new heatmaps.
We realised that much of the traffic came from mobile phones and so we swtiched to a mobile-first strategy completely. Interestingly 60-70% of traffic came from new users. This opened new channels for acquisition for us. We were tracking some metrics (bounce, exit, transcations etc.) with every change we rolled out.
For an example, I saw users rage clicking during onboarding in our screenrecordings. We realised that the current design was giving friction to many users to onboard and even view the products. We took a fresh approach towards onboarding trying to solve that problem. With the new design, we started nudging user to give her city instead of locality while onboarding and tracked events for problems this change might cause later in the journey. Some changes in the operations also helped in making the onboarding better. Here are few of the iterations of the new onboarding we tried. How was the result? We saw a whooping 17% decrease in bounce rate of new users.
We also looked at unavailability of products in a better way. We made a few changes in the cart to show out of stock product. We are still tracking the events and the metric at the moment.
We have been trying a few things to be even more functional and to provide a better value to the customer. Personalization is the way to go and this is what I am working on right now. Over the last 3 years, I have realised how grocery shopping is different from e-shopping from Amazon, or Target.
No UI is the next UI. I am exploring how the interface can be so fluid and un-obstrutive that the user doesn't have to put it any effort to do her groceries. I hope to add something new here soon. :)
Let's end it at a moolah-hater, business-killer screen.