Designing a Dashboard To Track & Improve Net Promoter Score Effectively

Sumeet
Bootcamp
Published in
8 min readDec 4, 2021

--

This Case Study was done as a Capstone Project for Clevertap, which is an omnichannel customer engagement and user retention platform.

You’ve might have definitely come across the omnipresent question “How likely are you to recommend this website/app to a friend?” while using the internet.

It’s the question at the heart of the net-promoter score, the key indicator that measures customer-loyalty. It is frequently used to assess the overall user experience of a website/app.

What is the Net Promoter Score?

The net promoter score (NPS) is a metric that measures how many individuals are more likely to highly recommend your site or product than those who are more likely to dislike it.

What is so special about the NPS? Why does it even matter?

The net promoter score is relevant because customer recommendations and word-of-mouth referrals are a direct driver of revenue growth in many businesses.

🧑🏻‍💻 As Reichheld (the first person to introduce NPS) put it, “When customers act as references, they do more than indicate that they’ve received good economic value from a company; they put their own reputations on the line. And they will risk their reputations only if they feel intense loyalty.”

How is it calculated?

NPS is computed by asking people to provide an answer, on a scale from 0–10, to the question: “How likely are you to recommend this website/product/service to a friend or relative?” The answers are then grouped into 3 categories:

  • Promoters: responses of 9 or 10, which indicate high satisfaction and strong likelihood of recommendation
  • Detractors: responses of 0 to 6, which indicate dissatisfaction and likely criticism
  • Passives: responses of 7 or 8, which indicate moderate satisfaction, but low likelihood of recommendation

The NPS is then calculated by subtracting the percentage of detractors from the percentage of promoters:

Net Promoter Score: What a Customer-Relations Metric Can Tell You About Your User Experience

Every app/website that you see today wants to keep a track of how loyal their customers are, which happens to be measured by the Net Promoter Score. When a mobile brand asks you to fill a feedback form, rather, do any activity that on the app, they have its data collected and monitored on a dashboard on the back-end.

Clevertap is a software service that helps these mobile brands view all the data in a human readable format on a dashboard.

Problem Statement

So, the super cool folks at Clevertap gave me a task to create a web dashboard where the Product or Marketing Manager will gauge how well the NPS has been doing over the last month and areas of improvement.

Another part of the assignment was to design various states for a NPS pop-up that the end-user will see on desktop or mobile web.

The Dashboard

I’ve never designed a dashboard before, so this was a huge learning curve for me in terms of how to prioritize information.

What does a PM need to track the NPS?

  1. Obviously, the Net Promoter Score 😛

What else?

🧑🏻‍💻 Step 1. Finding out what data will the PM will need

As I dug deeper into the customer loyalty & feedback ecosystem, I started to get a hang of what data might be relevant.

User Personas

I put my PM shoes on and tried questioning myself on what should I be able to infer from the NPS Dashboard?

  • What is the current NPS Score & its trend for the last months?
  • What are the reasons that have led to the current NPS & its trend?
  • How have the key areas performed?
  • What is the next action that can be taken after this?
  • What should be the area in my first priority to be improved?
  • How have different user segments been liking/disliking the experience?

Since the questions could’ve been endless, I tried to understand the scope of the NPS dashboard. The NPS popup was going to have 2 questions which would result in a lot of quantitative data (but no qualitative data)

What data can be presented on the Dashboard? (in no particular order)

  • Global NPS
  • Total Number of Users who gave feedback
  • Weekly/Monthly/Version-wise NPS
  • Accounts by NPS Category: % Users in Detractors, Passives, Promoters
  • NPS by Segments of Users & their Distribution in D, P, Pro
  • Feedback Participation v/s DAUs
  • NPS v/s time spent on the app
  • Chips & their relevant data
  • Ability to choose Dates/Versions to view data for NPS

But, I couldn’t come to an exhaustive list of data.

To solve this, I used a framework to group all the data into 5 fundamental data points.

  1. Benchmarking data How does the NPS look right now? Where does the industry benchmark lie?
  2. Performance Trends How has the performance of the customer support been over time?
  3. Segmentation How has my power user segment been performing over the last month?
  4. Focus Next What should I be focusing on next? What is not the most important thing to spend time on?

🧑🏻‍💻 Step 2: Refining the data & keeping the necessities.

Now that I had all the data points that could be potentially displayed on the dashboard, I moved to wireframing.

I chose wireframing at this stage because this helped me find out the scope of what data (out of app that present in the table) can be presented on the dashboard.

🧑🏻‍💻 Step 3: On to the Design

Wireframes

v1

  • This was designed considering a week is what the team thinks as a good enough time period to get enough feedback & implement certain changes.

Global NPS would not be counted from Day 0. It’ll mostly be calculated from the biggest updates for the App/Team/Revamps etc.

v2

Final Version (I wish 😅)

Visuals

I used the Clevertap Design System to land at this:

Usability Test

I tried validating the dashboard I designed with a Product Manager at an EdTech Startup who has been using an internal NPS Dashboard built by her team.

The call was really insightful. I got a lot to work on.

Insights:

  1. The content of the graphs is relevant, but the presentation has been made complex. Make it simpler.
  2. Add filters & sorting options — these are necessary.
  3. Even after looking at this, I don’t know what my next step should be!

Some more data that could’ve been added

Entire Data — Global, % of Detractors/Promoters, etc for User Segments based on:

  • Subscription Tiers ( Disney+Hotstar has 3 )
  • Segments that the team has made (power users, super users, occasional users, etc )

NPS Popup

Another part of the assignment was to create an NPS Popup which would be displayed in the app. Basically the feedback form.

Overview

I went about finding out the consumer app for which I had to make the NPS form.

  1. It had to be an existing Clevertap Client
  2. The brand had to have a large enough user base where NPS would be effective. (Since NPS is the best suited where you have a considerable number of participants)

In the end, I chose Disney+Hotstar. Plus, I had recently dived deep into its design system for another assignment.

NPS Form

There could not be any qualitative data because that would have led to decreasing in participants, and that is the last thing you’d want for calculating your NPS.

There were 2 standard questions which I found suited best:

  1. How likely are you to recommend Disney+Hotstar to your friends or colleagues?
  2. If yes, what do you like/dislike about us?

These were not qualitative and didn’t require much thought before answering.

I went through the reviews of the Disney+Hotstar App to find out what the users like or dislike about the app. Ended up with these 5 options.

  1. Subscription Price
  2. Customer Support
  3. Content Availability
  4. Video & Audio Quality
  5. Ease of use.

Wireframes

The deliverables included 3 types of forms for mobile & desktop, with 3 points, 5 points, and a 10 point scale. Since this was a timed assignment and I had the entire dashboard to make, I didn’t spend a lot of time figuring out iterations for the form.

An NPS form didn’t require a lot to be functional.

Visuals

I followed Disney+Hotstar’s Design Language to design the popup, with a micro-interaction for delighting the user.

The thought process was that if the app is asking for something from the user, they should receive something.

After going through a few iterations of emoticons, faces, and smileys, and some flashy animations.

Final Screens

Desktop

https://cdn-images-1.medium.com/max/1000/1*Ch7P6rg-lziYZRu6OAN77Q.png

Mobile

https://cdn-images-1.medium.com/max/1000/1*mMjm9eHXApYam1XKukUAFQ.png

Prototypes:

Learnings

This was an interesting problem personally because I’ve used the Clevertap Dashboard as a client as a PM. Being on the other side of the product I wanted to get inside the user’s head.

I’ve always been fascinated by designing dashboards because in most cases it’s not for the average internet user but people like us. People like you and me who are reading this.

Also, a dashboard is supposed to be entirely functional while just following the design language of the app.

So by the end of the design, I had a lot of clarity around:

  1. Exactly what information has been displayed and why not something else at its place.
  2. Why has a particular piece of information been placed on every pixel of the screen
  3. Whether the user knows what to do next after going through the data

And that’s a wrap!

I’d love to know your thoughts on this one!

--

--