Customer Support Application

a UX Design case for Kroger Co.

— KROGER CUSTOMER INSIGHT

Customer Insight started a solution for a simple issue but evolved into being the main used support tool of the call center's company.


— ROLE

Experience Design Consultant


— DATE

2020

Kroger's ethos of being universally approachable (as in their tagline: "Fresh for Everyone") was fully tested during the height of COVID uncertainty on the first half of 2020. The Company that had a strong approach to in-person Customer Support had many challenges to overcome, a vast number of personas and an even larger cost of all the income calls about issues purchasing online.

_


COVID-19 pandemic hit especially hard for essential services and presented us who were working at them, a very particular set of challenges – especially working alongside customer support.

Scenario

What do have and what

Brief

Kroger is a family company of almost 140 years of experience, and so, throughout the years it collected a multiplicity of applications. There was a growing need to sunset the amount of legacy applications that constantly obstructed the associate's workday, and Kroger Customer Insight was the perfect replacement to receive their features.


Goals

Optimize the work for the associates at the call center, allowing them to easily and swiftly resolve the customer's issues.


How Kroger works design

By creating a branch exclusively dedicated tech has allowed Kroger to fully embrace agile methods and thus, is a company that fully understands and see value on designers and their work, which is highly unusual for centenary family companies. Designers within Kroger were focusing on organizing a design culture.


How to integrate work with Kroger needs

KCI (Kroger Customer Insight) is an order visualizer that searches by each individual customer. With it, the associate can check the customers order history, as well as the details and status of each order.


The head start was verify the tool as is, documentation of business rules and how the associates (main users) used KCI.


Recent Orders Screen

A list of the order history for the customer. Starting by the latest, it presented crucial information for the associate, such as “Order ID”, Fulfillment Date" and “Last Updated by”.


Those are important since respectively, the vast majority of the associates report to their higher-ups by ID; they can understand when the order arrived at the customers home (when online purchase); and understand if there were any changes done after the purchase.

Specific Order Screen

Detailed information about a selected order. Informing summary, status of the order, possible actions, items and their own status.

Research

To better understand the application, how users interacted with it and their needs and noticing a lack of documentation, I've conducted a few user interviews.


Quantitative Research: The basics

How the work was being conducted currently.

What are their main roles and actions.

Which applications they had to use besides KCI, legacy or not.


Qualitative Research: The workload

Which customer's information were the most crucial to allow their work to flow seamlessly.

How they used said information.

Where they felt they "lost" the most time.


After being able to communicate with the users, we were able to access some core informations that were later refined with the PO: Userflow, Main Objective, Success Metrics, Scenarios.


Service Design Documentations

A version of the UserFlow was provided to me by the previous designer, who sought to understand how the process took place within the call center, how the CSRs (Customer Service Representatives) used the various applications, and their purpose.

Legacy UserFlow

After analyzing the existing documentation and talking to users, which brought several insights to the functionality of each application, I mapped the steps of each and their interconnections with the legacy apps that had to used in parallel.

User tasks (parcial). The A and B were continuations of the user process in other applications.

First Steps

Let’s document and share the knowledge gathered

Pairing with POs and PMs

Pleased with the documentation and with a deeper understanding of how a customer service representative routine is, I was able to align myself with the Product Owner to structure our pending issues and priorities. Joining ur business and design visions to establish the OKRs for the next semester.


Pairing with the POs and Stakeholders is a primary task (and need) of the any designer. In a push and pull situation, the designer shares knowledge that supports the PO’s decision-making, at the same time that the PO brings the designer closer to the business, in order to always have greater visibility of the whole.


Decision making is something that must be done together or with the support of the designers because as we are aways reflecting on how to carry out the journey (reduce them to MVPs, support the dev team, etc.), we are the piece that connects business to development.


We structured together the following OKR:

Transform KCI into one of the main customer support tool within Kroger


The objectives for it’s realization were:

- Decrease the average time on calls

- Decrease the numbers of call to outsourced company: Instacart

- Eliminate dependency on legacy code and other legacy applications.


The focus of the conversation and definition of the objectives was only possible due to points found on the junction between research interviews and documentations: Both focusing on the mais user’s needs.



Prioritize

Let’s organize and use the information we gathered

Always working close with different roles within our squad, we prioritized and structured together in a group dynamic organized by me, the delivery plan, based on our objectives.


The order of the next releases were the following:


2nd Release

- Eliminate the use of CAM tool (which it's main functionality was to manage customer's profile information)

– View customer's advanced information

– Edit basic information (*)

– Find customer's account status (*)

- Create a communications channel (*)


3rd Release

- View Changed Items

- Returns and Refunds Journey (discovery due)

- Enable order cancellation


4th Release

- Refinement of Logistics demands

– Timezone fixes (*)

– Delivery time per order

– Delivery context per package (*)


5th Release

- Implementation of Marketplace shopping

– View by item

– View by packages


6th Release

- Enable Household view (*)


* Points that resulted directly from the user interviews.

Discoveries

With goals in mind, let’s talk about how to get them done

For several of these stages, intensive research was necessary to define the real need for each type of challenge that we set out to undertake. We understand that the best way to do that would be to carry out several discovery sessions with the users.


The MURAL tool was used for the discoveries and I made use of the book "This is Service Design Doing" by Marc Stickdorn, with the purpose to support dynamics that we would use. The dynamics varied due to the need of each tool (that we were planning on sunsetting), even so, we structured our schedules and activities to each discovery day.


As mentioned earlier, roger is a family-owned and centenary company, and despite it's many advances in terms of tech environment and agile practices, we were not allowed to carry out a discovery process (that usually take from 3 to 5 days, depending on the objetive of course). I had to overcome that issue with a hyper organization for each discovery session (with we could only use at most 2 hours a day, 2 days a week at most).


The discovery process was always being refined, and as stakeholders saw the value in the results and discussions. Within a month, we were able to convince the stakeholders to allow us to do a 2-day discovery with a multidisciplinary team. In this case, it's was done specifically for the 6th Release – How to enable household view in KCI.


One of the formats that was very useful when breaking paradigms and helped us convince stakeholders of the value of a well done discovery was the documentation of what had happened and the opinions that were raised during them. A summary of key points that had been raised during the discovery that was shared with team members, stakeholders and shared on out dedicated Confluence design documentation channel (Kroger's standard documentation tool).

If it happened, document it

Design System

Structuring with accessibility in mind

Kroger has a specific Design System for in-house projects such as KCI, entitled Hatchet, and when I first joined the team, Hatched was in it's infancy.

I was able to participate closely with the Design System team, to aid the refinement of the Design Tokens and the "second wave" of components. During this second movement, I was able to defend accessibility points that were initially overlooked due to its pilot nature, and together we were able to restructure previous tokens, such as color tokens.

Surveys & Tests

Making sure that the paths we are the best ones, and iterate quickly when needed

One of my favorite formats of testing, and I was able to use it constantly at Kroger thanks to the interviewing/testing tool Usertesting.com.


It's because one of them that we were able to to completely restructure one of the main/most important areas of KCI: The product listing of an order. Resulting in overwhelmingly positive feedback after its release, regarding how much more understandable and complete the displayed information.

Version A for displaying yellow tag items.

Version B for displaying yellow tag items.

Constant surveys and conversations with the users

The work that was carried out had the constant thought in mind:“Support the daily work of the CSRs, by enabling them to complete their task seamlessly and efficiently”. So naturally I kept myself close to them, seeking feedback when possible and making sure that they are comfortable to do so.

Diedre M.

from KCRC (one of many customer support teams).

Upgrade only possible due to associate feedbacks

Principles

What guided the process

Prioritize with next steps in mind:

Define well an MVP, with it's nexts steps to a complete delivery

Iterations

Integral and necessary to every process on product development.

Quick Wins

An eye for identifying minor changes with major positive impacts.Integral and necessary to every process on product development.

Results

Design is nothing without measures

A reduction of 120% in calls received by the CSRs, and an amazing 170% reduction on calls forwards to third-party companies.

Resulting in $24.000 dollars saved within the first week after release (our estimates were that after the quick learning curve, these values could add to $50.000 within the next 14 days).

Time On Call

from 0:50:14 to 0:14:18.

KCI Usage from 2 out of 10 associates using KCI on a daily basis to 7 out of 10 associates.

Covid-19

The impact of the pandemic when working for essencial services.

With the pandemic spreading through the United States during early 2020, plans and priorities were impacted, so a service support service that aided the skyrocketing customer's online orders was critical. We were able to quickly respond to system adversities and organize the tasks in hand in a way that firstly, we would stabilize the system, then focusing on the user needs while identifying quick wins for them.


At the same time, employee burnout and their perfectly reasonable concerns about going to work was something that my professional challenges hadn't prepared me neither anyone else.


How to talk about improving work with individuals who were afraid of going to work?


How ethical is the project and it's ramifications if it puts people at risk?


Thankfully, after asking the same questions and sharing these concerns, Kroger implemented CSRs rotations which partially eased their concerns.


To alleviate the plight of people on the forefront of the call centers, I sought ways to represent the value of their work to their community – a very Kroger characteristic.


Following that core approach, I've upgraded home screen to bring new information: The member of the day module in which we celebrate one employee; The traffic and climate module, to aid those about to return home; Yammer, an up-to-date news about covid and Kroger's inside information.


The most important of them all was our counter: It showed the number of people who were helped by the service in the call centers (metric: Successfully solved a customer issue on call), families that were fed in the community (metric: Household purchases delivered per day), and how many families nation-wide were fed.

The main intention was to show how crucial (as must might say: essencial) was their work was to everyone.


New first page

Making a more personified and valuable experience.

Associate of the day Widget

Climate Widget