Admin Dashboard

Product Design, UX, UI

Date: 6th December 2015

Grofers OPS/CRM (Order Processing System) is an internal software at Grofers which allows a real-time fast tracking and processing of the live orders.

Need

Grofers is a service to order groceries online. By January 2015, Grofers had experienced rapid growth and was receiving approximately 50,000 orders per day. This rapid scaling put our system, both operational and technological, under great strain and made much of our internal software obsolete. As such, communicating with customers and the operations team began to require human intervention at every step to ensure that our orders were delivered within the promised 90 minute time frame. A tech intervention was required to provide a robust and lasting solution.

Order processing dashboard before redesign

Understanding the problem

I began by consulting our CRM executives and operations team, including delivery executives, shoppers and managers, to learn more about their modes of functioning and the everyday problems they were facing. I learned that the mobile apps we had rolled out for delivery executives and shoppers appeared to be functioning well; however, our CRM team was relying on a fragile web-based app to view orders, which required constant refreshing. I further learned that, on average, an executive was making four phone calls to manage the delivery chain. Connecting the calls, and the long talk over the phone was conusming most of the time. We realised that many of these calls were actually redundant and the system was everywhere.

Customer complains about delayed deliveries, undelivered products, wrong billed items, wrong refunds etc. were rising but we didn't even have the right metrics to measure *the moment*. It was clear that we required a strategy to streamline our processes, order journey and reduce the need for manual communication.

CRM executive's (user) notes while working

Solution

In the existing system, the orders were falling into buckets (order packed, enroute, delivered etc.) as they progressed. What we proposed was that, the buckets be based on the exceptions instead. Every bucket needed to have a pre-defined time duration. Every order is expected to follow a happy scenario going through all the states (packed, enroute & delivered) on time and by-passing the buckets. Any order which doesn't reach a state before pre-defined time should falls inside the respective bucket and should be paid attention to *the moment*.

The lifecycle of an order starts 90 minutes before the promised time. We made four buckets: to be approved, to be packed/procured, to be enroute and to be delivered. Any order which fails to follow the timeline, falls into these buckets. The CRM executive then needs to perform actions on the order falling into these buckets.

I designed a order processing dashabord + CRM dashboard for the order processing team from scratch. Apart from allowing the team to track an order, show information and helping users to take the right step at tright time, it also allowed order cancellation, rescheduling, refund initation, billing, bookmarking etc.

Happy case of an order
Proposed bucketing system for orders

Early Iterations

I made a few prototypes and tested them with the order processing team. To explain one major - the navigation with the buckets was to the left and major real estate was used to show expandable orders cards in that bucket. This had a major drawback: only three or four orders could be seen on the screen at any one time (even less when expanded). The information on the screen seemed to be overwhelming by the users.

You can view the prototype here which was used to test with users.

Early Iteration
Early Iteration

Last Deliverables

While the left navigation seemed to work well in the prototype, it didn't allow other functionalities. We needed a way to make changes to multiple orders and viewing detailed information more efficiently. The new iteration solved that.

Apart from bucketing orders, the dashboard shows real time updates, timelines and events, and allows actions like sorting, filtering, commenting, order editing, bookmarking re-scheduling etc. I worked closely with the developers acting as product manager to launch this project.

One of the iteration.
Implemented design.

The middle column allowed users to take same action on multiple carts/orders. Selecting an order opens the order to take multiple actions on it.

Window to the bottom left gave real-time updates which avoided unnecessary inter-team communications.

Users could view all the actions and events that the order went through in the form on a timeline.

You can view the prototype here which was used to test with users.

1. Screenshot of live updates. Clicking on a list element opens the order. Clicking on the small orange tick marks the update 'read'. 2. Grouping of order.
Main order tracking card

Success Metrics

To know if what we rolled out with the users worked fine, we tracked the following metrics:
- Delayed Orders / No. of Orders
- On time approval
- On time refund
- Orders handled/worked on per user
- Costumer complains