---
title: "Why we built Hargapedia's product ratings without an open review box"
description: "Hargapedia combines star ratings with sentiments users pick from lists set up by our marketing team, so there's no open text box to moderate."
url: "https://rayson.me/writing/hargapedia-ratings/"
category: "Design"
author: "Janarayson"
published: 2023-10-13
---

Since Hargapedia launched in 2018, the product page has mostly been about prices. Open a product and you can see where it's cheapest, what it usually costs and how prices have changed over time.

What you couldn't see was whether people thought the product was any good.

Over the past few months, we've been working on a rating system to collect that feedback. We wanted people to rate different aspects of a product and describe what they liked or disliked, but without giving everyone a text box to write in. That would mean having to deal with public reviews and moderation, which we wanted to avoid.

We ended up combining star ratings with predefined sentiments, both configured by our marketing team for each product category.

## Ratings and sentiments, without a text box

The aspects you rate depend on the category. For some products that's price, quality and value. A detergent gets rated on how well it cleans, value for money, how long it lasts and its fragrance. The sentiments are words you can pick to describe the product.

<Figure
  src={detergent}
  alt="The top of the product page for Breeze Liquid Detergent Power Clean 3.6kg in the Detergent category: the product photo, a 2.9 star rating from 3 ratings, and four rows of stars on the right for Effectiveness 2.7, Value for money 4.3, Long lasting 2.7 and Fragrance 2.0, with the longer labels cut short"
  caption="A detergent's own ratings, next to the product name."
/>

To rate a product you have to be signed in. You give stars for each of those, then pick up to five sentiments from the category's list, grouped into positive, neutral and negative, and the submit button only works once you've done both. If you'd rather not show who you are, you can rate anonymously. We swap your profile picture for a default one and show only part of your nickname, with the rest starred out.

Because the sentiments come from a list, they can be translated ahead of time, so each one has an English, a Malay and a Chinese version. If someone rates a product in Chinese and you use the app in English, you see their chosen sentiments in English.

## What shows up on the product page

The average rating sits under the product name, with the number of ratings beside it. Below the price graph, the page now has two tabs, Prices and Rate & Review. The second tab only appears in categories where the marketing team has set up the aspects and sentiments, so for now you'll see it on some products and not others.

Rate & Review starts with the overall score out of 5 and the average for each aspect. Under that is everyone's rating. Each one has a score in a coloured box that goes from green down to orange and red, a few short bars under it for the individual aspects, and the sentiments that person picked. I designed these screens and built most of the front end for them, including the star rating, the sentiment picker and the rating card.

<Figure
  src={ratingsTab}
  alt="The Rate and Review tab: a 4.7 out of 5 summary with star rows for Price 5.0, Quality 4.0 and Value 3.5, then three ratings below it: a regular rating of 4.6 with five sentiments, a tester's rating of 4.4 with an orange ring, a Tester label, a paragraph and three photos, and an anonymous rating of 1.3"
  caption="The Rate & Review tab in a test build. The names, avatars, photos and numbers are all placeholders."
/>

## The one place you can type

Tester reviews are coming in the next update. Members of our Sample Club get products to try, and for the products they've been sent, they'll be able to write a full review and add photos.

A tester's rating will have the same stars and score as everyone else's, plus an orange ring around their picture, a Tester label, and their review underneath. Long reviews get cut at 250 characters with a link to read the rest. Only testers who were sent that product can review it, so it stays a small group.

## The recommend question

Star ratings and sentiments weren't our first attempt at collecting product feedback. Before building those, we'd added a simpler question to the product page: how likely are you to recommend this product to someone else?

It's the question behind Net Promoter Score, or NPS. We initially treated it as a separate feature, with its own card above the retailer prices.

<Figure
  src={npsAsk}
  alt="A card with a half-circle gauge reading 0 on a scale from -100 to 100, labelled NPS Score, and beside it the question How likely are you to recommend this product to a friend or colleague? above a Rate Now button with a smiley face"
  caption="The card before you've answered, from a test build in August."
/>

You answer from 1 to 10. Tap Rate Now and the card turns into a row of ten faces, sad on the left and happy on the right. You can tap one, or slide your finger along the row until you get to the one you mean. The app measures where each face sits when the row is laid out, and as your finger moves it picks whichever face is under it.

A 9 or 10 makes you a promoter, a 7 or 8 is passive, and anything from 1 to 6 counts as a detractor. The score is the percentage of promoters minus the percentage of detractors, so it can go anywhere from -100 to 100, and passives don't count either way. On the card below, 77% of the answers were promoters and 12% were detractors, which gives 65.

<Figure
  src={npsScore}
  alt="The same card after answering: the gauge reads 65 and is filled in yellow, and beside it three bars with faces show 77% happy, 12% neutral and 12% unhappy"
  caption="After you've answered, the card shows the score and how everyone voted. From a test build in October."
/>

I drew the gauge with d3-shape and react-native-svg. The thick arc fills up to the score and changes colour with it, and the thin arc inside shows where the colour turns from red to yellow to green. There's an info button in the corner that explains what NPS is and which faces count as what.

<Note label="Update, December 2024">

We've since moved the recommendation question into the rating form. Having it on a separate card confused people, and many didn't know what NPS meant. We'd used the industry term in the interface without considering whether it meant anything to the people using the app.

The ten faces now sit at the bottom of the form, after the sentiments. The results appear alongside the overall star rating at the top of Rate & Review.

The question itself hasn't changed, but it makes more sense as part of rating a product than as a separate thing people have to figure out.

</Note>

<Screens
  screens={[
    { src: form2024, alt: 'The Rate this product form for Kit Kat 2 Finger Sharebag 24x17gm: stars for Value for money, Taste and Sweetness, then positive, neutral and negative sentiments with Affordable and High Quality picked, then the question How likely are you to recommend this product to a friend or colleague? above ten faces from 1 to 10 with 9 picked, a checkbox to rate anonymously, and a green Submit your rating button' },
  ]}
  caption="The rating form, with the recommend question at the bottom."
/>

<Figure
  src={summary2024}
  alt="The top of the Kit Kat 2 Finger Sharebag page with the Rate and Review tab selected: a rating of 4.4 out of 5 next to an NPS score of 75 on a gauge, with bars for 75% happy, 25% neutral and 0% unhappy, then Value for money 4.5, Taste 4.3 and Sweetness 4.5, based on 4 user ratings"
  caption="Rate & Review now opens with the NPS score beside the rating."
/>