Sprint Design Exercise: NPS for Mobile

In this write-up, I decided to explain a 24–48hr sprint to design an NPS experience for a user base that is in their teenage years and everything that is a distraction for others is intriguing and fun for them.

As a part of Hike Messenger’s Growth team, I designed a system that can record NPS score on mobile. For all active users of Hike, a 350KB micro-app* will be introduced in the chat list and a silent push will be sent to help them find it whenever they return to the app.

*A micro-app is a small mobile app of sorts that can be invoked inside a parent mobile app using packet sending mechanism. Microapps are light, fast and usable. They are designed using web-based HTML components with some Android code goodness wrapped around it.

Net Promoter Score (NPS) is a management tool that can be used to gauge the loyalty of a firm’s customer relationships. It serves as an alternative to traditional customer satisfaction research and claims to be correlated with revenue growth.

NPS is calculated using the answer to a single question, using a 0–10 scale: How likely is it that you would recommend {brand} to a friend or colleague?

Users who respond to this survey, are grouped together in these buckets:

NPS Explained

Promoters (score 9–10) are returning users and will do whatever they can to help your product — word of mouth, referring to a friend, endless praising.

Passives (score 7–8) are returning users but not a daily basis. They like your product but won’t shy away from using other products with similar capabilities.

Detractors (score 0–6) are unhappy users who are always asking for more and might leave negative reviews for your product digitally or through word-of-mouth. They can overtime harm your product/brand image.

Before designing the experience, I wanted to understand if there are already a set of design patterns available for a NPS form. Arguably, NPS is not new and I was sure other companies would have designed some intuitive solutions for the same already. So, I created a mood board.

Mood-board of existing solutions

Unfortunately, most examples that I could find were very horizontally heavy. Even on mobile, the experience was not optimised for the audience, form factor and surfacing point. So, based on what I could find, I created a guideline that can help me nail down the design – balancing experience as well as aesthetics (for mobile).

Problems I could find in the available solutions:

  1. Horizontal Layout
  2. Very small area for selection
  3. Not good to be viewed on mobile

Ground Rules for our design:

  1. 0 = Least Likely | 10 = Most Likely
  2. No Pre-selection — Don’t introduce a bias for the user
  3. Use slightly bigger UI elements = Leads to easy selection of score
  4. Should visually look good
  5. Make sure it looks like a rating/graded scale
  6. Should have a mechanism to show visual feedback based on the rating given (+ve / -ve)

Solution #1 — Slider

Slider based solution. Scrolling slider which is horizontally heavy in nature. Problems with this are:

  1. Can’t see all the selection of scores
  2. Hard for a user to figure out how to act on the UI

Solution #2 — Dialer Pad

Problems:

  1. All rating options are on the same level
  2. Doesn’t look visually good
  3. Not a strong visual feedback / No romantic value
  4. Gives a false impression. Doesn’t look like a rating screen.

Solution #3 — Vertical Slider

Problems with this are:

  1. Takes away too much vertical space
  2. To give proper selection, the question has to be cut off (wrapped around) from the corner
  3. Selecting the score requires a small wall-through which will drop some users off
  4. Scrolling up down on smaller devices with bad pixel density will be hard

Solution #4 — Ladder Approach

Problems with this are:

  1. This needs a pre-selection of an option
  2. Very cluttered
  3. Elements for selection are quite small in size

Solution #5 — Circular Selection

Problems with this are:

  1. Small buttons
  2. Looks like an old school dialer
  3. Visually doesn’t look good
  4. Looks a bit cluttered

Improvements:

  1. This solution can be improved cutting the bottom of this circular selector
  2. Emoji can be given more space

Final Solution

Solution 5 actually came out to be good. So, I decided to work on the visual improvements and get it tested with the actual users. Since this was sprint based, the solution was released to 1% of the users and data was captured in the form of Drop-Off Percentage (success = 0) & Users successfully filling the form (success = 1)

Results

[Success = 1] ~ 6% Users

[Success = 0] ~ 1.5% Users

In-active users who never opened the app ~ 1%

Learnings

Users hate filling surveys for it gives them back nothing. Some basic things to be followed while designing surveys can be following:

  • Keep it short.
  • Make it about their experience. Nothing vague.
  • Ask the right question. If it’s about a particular activity. Surface it as soon as the activity is performed.
  • Use an already existing solution but only if it solves the purpose of your form factor.

Bonus: Emoji’s used

The solution used a set of really expressive emoji-set that was designed within the bounds of this design sprint. I won’t go into a lot of detail as to how I went about fine-tuning these. But for the reference of this study, here are all the expressions that got integrated for ratings 0 to 10.