Sprint Design: Mobile NPS (Hike)

In this write-up, I decided to explain a 24–48hr sprint to design an NPS experience for a user base 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 scores on mobile. A 350KB micro-app* will be introduced in the chat list for all Hike users and will send a silent push 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 gauge a firm’s customer relationships' loyalty. 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 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 daily. They like your product but won’t shy away from using other products with similar capabilities.

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

Before designing the experience, I wanted to understand if there are already a set of design patterns available for an 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, it didn’t optimize the experience for the audience, form factor, and surfacing point. Based on what I could find, I created a guideline to nail down the design - balancing experience and aesthetics (for mobile).

Problems I could find in the available solutions:

1. Horizontal Layout
2. Tiny 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 an easy selection of scores.
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 bulky in nature. Problems with this are:

Problems with this are:

1. I can’t see all the selections 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. It doesn’t look visually pleasing.
3. Not a robust 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. It 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 inadequate 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. It looks like an old-school dialer.
3. Visually doesn’t look good.
4. It looks a bit cluttered.

Improvements:

1. We can improve this solution by cutting the bottom of this circular selector.
2. Emoji can be given more space.
3. More space can then be provided for the text to be displayed according to the rating selected.

Final Solution

Solution 5 actually came out to be good. So, I decided to work on the visual improvements and get them 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)

Happy scenario

Not so happy scenarios

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 the following:

• Keep it short.
• Make it about their experience. Nothing vague.
• Ask the right question. Suppose 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 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.

Collection of emojis that were designed by me exclusively for this project.

Give me a shout!

Thank you for reading this far! 😁 Let me know if you have any questions or comments on my design — or — If you’d like to have a chat about anything design-related, I’d love to hear from you!

Before you go…

👨🏻‍💻 Connect with me on LinkedIn, Twitter, and YouTube (Subscribe).
💭 Comment your thoughts, feedback, anything!
👋 Alternatively, you can also book a design mentorship session by sending a request on Calendly. If you want to learn more about design, check out my short 2–3 minute design education videos on AntWak.