---
title: "Adding HargaPoints to Hargapedia"
description: "I designed and built the screens for HargaPoints, Hargapedia's rewards programme, where you earn points from missions and spend them bidding for prizes."
url: "https://rayson.me/writing/hargapedia-hargapoints/"
category: "Design"
author: "Janarayson"
published: 2024-01-31
---

We've been working on a rewards programme for Hargapedia called HargaPoints. You complete missions in the app to earn points, and then use the points to bid for prizes.

Our marketing team worked out the rules for earning and spending points, including the bonuses for streaks and perfect weeks and how bidding works. I did the design and the frontend, including how people track their progress and spend their points.

HargaPoints has its own tab, with an animated icon to draw attention to it. The tab opens a dashboard I built in React and displayed inside the app through Hargapedia's existing WebView screen. If you're signed in, you go straight to your dashboard. Guests are asked to sign in before they can start collecting points.

There are two views, My Dashboard and Prizes, and your points balance stays at the top of both.

## Missions built on things you already do

The missions use actions people already take in Hargapedia. Opening the app counts as the day's check-in. Tapping Buy Now to go to a product on Lazada or Shopee counts towards a shopping mission.

Each mission has its own card, with what you need to do, how many points it's worth, and whether it's required for a streak. When you complete one, the card gets a green check and its text fades back, so the missions you still have to do stand out. The app also shows a message with the points you've just earned, including any streak bonus that came with them.

Above the missions is a table for the week, with a column for each day. A day is only marked done once you've completed every required mission, so a check-in on its own isn't enough. The rows underneath show a star for each three-day streak that week, and a diamond once you've completed all seven days.

<Figure
  src={dashboard}
  alt="The HargaPoints dashboard for the week of 22 to 28 January: a balance of 2,350 points, Monday to Wednesday ticked in the weekly table with one star in the Streak row, and three daily missions marked Required for streak, with the check-in completed and faded and Buy from Lazada and Buy from Shopee still to do"
  caption="Monday to Wednesday earned a star. Thursday's check-in is done, but the day stays unmarked until the Lazada and Shopee missions are too."
  small
/>

The points themselves are a gold coin with Hargapedia's price-tag symbol, which sits beside the balance and next to anything that earns or costs points.

<Tiles
  items={[
    { src: coin, alt: 'A gold hexagonal coin with a price-tag symbol', label: 'HargaPoints' },
    { src: star, alt: 'A gold star', label: 'Streak' },
    { src: diamond, alt: 'A blue diamond', label: 'Perfect week' },
  ]}
/>

A short help carousel explains the missions and bonuses, and a Remind Me switch above the missions turns on reminders.

## Choosing how many bids to place

The points you collect are spent in the Prizes view. In an auction the highest offer wins. Here the winner is whoever has submitted the most bids for a prize, and a tie goes to whoever submitted first.

So there's no amount to type in. Each prize has a bidding period and a fixed cost in points for each bid, and shows how many bids you've submitted so far. You choose how many bids to place with a number picker, using minus and plus buttons, and the total cost updates as you go.

The most you can pick is your balance divided by the cost of one bid, so you can't select more bids than you can afford. If you don't have enough points for a single bid, the submit button is disabled.

<Figure
  src={bids}
  alt="The Prizes view: a 2,350 point balance above a Bi-Monthly Prize card for Touch 'n Go eWallet Reload credit RM1,000, running from 1 Jan to 29 Feb 2024, with Bid submitted: 0, a cost of 50 HargaPoints per bid, a quantity picker set to 1 and a green Submit button"
  caption="You choose how many bids to submit, and each one costs the same."
  small
/>

Submitting takes the points from your balance and adds to your bid count for that prize.

Tapping the balance opens your transaction history, which lists the points you've earned from missions and bonuses and the points you've spent on bids.