Grofers on web

Product Design, UX, UI

Updated on: 23rd April 2017

Grofers is an online grocery delivery service. Grofers.com allows users to order their grocery and get them delivered. I designed the whole webapp.

Need

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.

Strategy

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

Information architecture of proposed webapp

Early Iterations and Usability testing

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.

Exploration of homepage
Exploration of product listing. FYI: Putting '+' button to add to cart is a bad idea.
Exploration of product listing. Users were able to use to navigate through the granular categories via left navigation and top level categories from top navigation.
Exploration of cart
Exploration of horizontal checkout process. While a horizontal checkout could help cutting down on the distractions on the page, it brings in some complications with it. The top header is white with a lot of white space to allow user to focus on what's necessary.

Launching V1

Here are few of the screens of desktop version we launched in the first go.

First version of homepage
Product listing page with infinte scroll
Product description page on desktop
On cliking cart icon from persistent top bar, the cart slides from right
After a few iterations we chose a vertical checkout process with persistent billing and cart information on the right. Error cases, stock unavailability cases and other corner cases are handled gracefully.

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-

Order history under 'My Account'
Saved addresses under 'My Account'

Metrics, problems and observations

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.

Heatmap of product listing on mobile
Heatmap of checkout screen on desktop

Iterations and V2

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.

Exploring the ways we can ask user for user's delivery location
Onboarding a new user on mobile
Onboarding a new user on desktop

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.

Cart with additional functionality

Current Situation

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.

Do you get it?