---
title: "Voucher 2.0: categories, stores and deals"
description: "Hargapedia's Vouchers screen now groups offers by category and store, includes retailer deals alongside promo codes, and lets you copy a code without claiming it first."
url: "https://rayson.me/writing/hargapedia-voucher-2/"
category: "Projects"
author: "Janarayson"
published: 2023-02-14
---

When we [first added vouchers to Hargapedia](/writing/hargapedia-vouchers/) in 2019, they were mostly offers you claimed in the app and showed to the cashier at the retailer's store. Each voucher had a code, and once you'd claimed it, that code belonged to you.

Things have changed quite a bit since then.

Most of the vouchers we carry now are promo codes for online stores and apps like Shopee, Lazada, Grab, foodpanda and Watsons. They're usually codes anyone can use, and there's no reason to claim one before taking it to the store.

The list had also grown considerably. You could narrow it down with a category dropdown or choose a retailer from the sidebar, but finding a particular kind of offer wasn't especially convenient.

This month's update reorganises the Vouchers screen around categories and stores, adds retailer deals alongside the promo codes, and simplifies what happens when you tap a voucher.

## Finding vouchers by category and store

The first thing we changed was how you browse the vouchers.

Instead of a category dropdown, there's now a row of tabs across the top: All, E-Commerce, Fashion & Sports, Health & Beauty, E-Wallet and the other categories.

Each category has its own sub-categories, which are essentially the stores within it. Choose E-Commerce, for example, and another row appears underneath with chips for Lazada, Shopee, Youbeli and the others, each showing the store's logo.

Selecting a store narrows the list to its vouchers. The All tab skips the store chips and shows everything.

We've kept the retailer sidebar on the left for now, including My Vouchers at the top. So you can still browse by retailer as before, but the category tabs give you another way to narrow down the growing list.

<Figure
  src={vouchersFeb}
  alt="The Vouchers screen: a sidebar on the left with My Vouchers, Lazada, Shopee, Grab and foodpanda; tabs for All, E-Commerce, Fashion & Sports and Health & Beauty with E-Commerce underlined; chips for All, Lazada, Shopee and Youbeli; two Lotus's deal banners for Abbott milk and Microsoft accessories; a Shopee RM25 voucher with an ACTIVATE! button; three Shopee Mall banners; and a Lazada RM5 voucher with a code and copy icon. The Vouchers tab is selected in the bottom bar"
  caption="The redesigned Vouchers screen, with category tabs across the top, store chips underneath and the retailer sidebar on the left."
  small
/>

## Adding deals to the list

Not every promotion has a voucher code.

Sometimes a retailer is running a sale or a bank promotion that has its own campaign page. There's nothing to copy or redeem, but it's still an offer worth showing.

We've added a new type of entry called a deal for these promotions.

Our team can create a deal with a banner image, a link, an expiry date and the category and store it belongs to. It then appears in the same list as the vouchers.

Deals and vouchers are sorted together by when they were added, so a new Watsons promotion might appear between the latest Lazada and Grab voucher codes.

<Figure
  src={listFlow}
  alt="A flow diagram: two boxes, Vouchers (promo codes you copy) and Deals (campaign banners that link out), both point to a yellow box reading One list, newest first, which points down to a box reading Narrowed by the category tab and the store chip you pick"
  caption="Vouchers and deals go into one list, newest first, narrowed by the category tab and store chip you pick."
/>

Tapping a deal opens its campaign page in the browser. It also follows the same category and store filters, so selecting Watsons shows both its voucher codes and any deals we're carrying for it.

## Copying a code instead of claiming it

The other change is how you use a voucher.

Our original voucher system was designed around claiming and redeeming. That made sense when a retailer gave us a limited pool of codes, each assigned to someone who claimed one.

But most online promo codes don't work that way. Everyone can use the same code, and the actual redemption happens on the retailer's website or app.

So we've removed the claiming step for these vouchers.

Each voucher row now displays its code inside a dashed box, with a copy icon beside it. Tap the code and Hargapedia copies it to your clipboard, shows a short "Code copied!" message, then opens the retailer a second later.

By the time you reach the store, the code is ready to paste.

Some offers don't need a code at all. Those show an ACTIVATE! button instead, which takes you directly to the retailer.

<Figure
  src={tapFlow}
  alt="A flow diagram in two columns. 2019, a voucher you claim: Tap Get Voucher, a code from the pool is assigned to you, show the code to the cashier, the cashier taps Use Voucher on your phone, voucher marked as used. Now, a promo code: tap the code, code copied to your clipboard, the store opens a second later, paste the code at checkout, with a dashed note reading No code? Tap ACTIVATE! and the store opens straight away"
  caption="Tapping a voucher: the 2019 claim flow and the new copy flow for promo codes."
/>

I designed the new layout, and the team built it over January. It's a fairly different way of using vouchers from the one we started with in 2019, but it fits the kind of offers we're carrying now.

<Note label="Update, June 2023">

We've rebuilt the Vouchers screen again, this time to bring it together with the vouchers on [Hargapedia's website](/writing/hargapedia-web/).

The website has had its own voucher pages since early last year, organised by category and store. Until now, the website and app maintained separate voucher lists.

With this update, the app uses the same vouchers as the website.

The category tabs remain, but we've removed the retailer sidebar. Instead, the store chips sit directly beneath the selected category, starting with Show All. Deals are displayed as image cards among the vouchers, and tapping a voucher still copies its code or activates the offer at the store.

<Figure
  src={vouchersRedo}
  alt="The redone Vouchers screen: tabs for All, E-Commerce, Fashion & Sports, Health & Beauty and E-Wallet with E-Commerce underlined; chips for SHOW ALL, Lazada, Shopee and Watsons; a Watsons Kaw Kaw Deals hair care banner; a Grab 20% OFF voucher and a Lazada Free Shipping voucher with ACTIVATE! buttons; and a Lazada RM40 OFF voucher showing the code MCLZDWE with a copy icon. No sidebar"
  caption="The June redesign, with the sidebar removed and store chips taking over the retailer navigation."
  small
/>

We've also added deep links that open the Vouchers screen with a particular category or store already selected. A banner or notification can now take someone straight to Shopee's vouchers instead of dropping them at the top of the full list.

Vouchers also appear in Hargapedia's search results alongside products, so there's another way to find an offer without opening the Vouchers screen.

</Note>