---
title: "Hargapedia 3.0: a design refresh"
description: "A refresh of Hargapedia's cards, new places for deals and vouchers, and the animated tab icons that made it into 3.0."
url: "https://rayson.me/writing/hargapedia-3/"
category: "Design"
author: "Janarayson"
published: 2020-11-27
---

Hargapedia helps people compare prices and find deals. For 3.0, we redrew the cards on the home screen and added more places to show promotions throughout the app. It's the first big design refresh since 2.0, two years ago, and it reached the stores at the start of November.

Most of the design work happened at my desk at home. We've been working from home for much of this year, going into the office only for meetings.

## Before the home screen

I started in July by mapping what a new user sees between opening the app and reaching home. The flow included a startup ad, when there was one, and a poll for new users. A tooltip would appear on their first visit to the home screen.

The wireflow was five plain screens, mostly words. First, pick a language. Then permissions, with a short explanation of why we were asking: push notifications for deals and vouchers, and location for retailers nearby. Two poll screens followed, to personalise the feed.

The last screen was a list of what home needed to contain: search, inbox, QR and barcode scanning, explore and the cards. The tab bar included vouchers and the price tracker, alongside the shopping list and account.

<Screens
  screens={[
    { src: wireLanguage, alt: 'Wireframe: Get the best deals with Hargapedia, select your preferred language, English, Bahasa Melayu, Chinese' },
    { src: wirePermissions, alt: 'Wireframe: Permissions and why we need them, push notification so that you receive deals, vouchers and mailers from your favourite retailers, location permission for exclusive deals and vouchers from nearby retailers, each with an Allow button' },
    { src: wirePoll1, alt: 'Wireframe: Help us to personalise your feed, an ethnicity question and a gender question, with a Skip button' },
    { src: wirePoll2, alt: 'Wireframe: Help us to personalise your feed, marital status, children, age group and household, with a Skip button' },
    { src: wireHome, alt: 'Wireframe: Home Screen, listing search, inbox, scan with QR and barcode, explore and misc cards, with a tab bar of Home, Vouchers, Price Tracker, Shopping List and Account' },
  ]}
  caption="The wireflow."
/>

## Redrawing the cards

The home screen has been a stack of cards since 2.0. We kept that approach and redrew the whole set for 3.0.

The cards had to cover quite different content. A retailer's deals could sit in a row, while a weekend sale had a countdown. A comparison card put three stores' prices under each product. There were also price tables, a back-to-school row and a card for tracking your coffee.

Some of these didn't make it into the build. The sheet below shows the full set of designs.

<Figure
  src={specialCards}
  alt="A sheet of fifteen home screen card designs: retailer deal rows for Econsave, Watsons, Taobao, 7-Eleven and Tesco, a Tesco weekend sale with a countdown, a Huggies year-end baby sale with a countdown, Lazada beauty deals, an 11.11 card with today's prices, limited time deals, Shopee Mall, a coffee tracker, back to school essentials, and a price table comparing three stores"
  caption="The 3.0 special cards."
  wide
/>

The product cards had their own variants. One showed prices from three stores; another had a cart button for an online store. There were versions with a usual price, retailer-specific cards and a tall card for a single product.

<Figure
  src={productCards}
  alt="Product card variants: a detergent with prices from three stores, a bottle with a green cart button, a pouch with a GO button, an eye care offer tile, a face cream with a price flag, a coffee pack with a plus button, a tall card with usual price, a Tesco product card, and a wide card with normal, today's and usual prices"
  caption="The product cards."
  wide
/>

## More places for deals

Alongside the refresh, we needed more space for deals and promotional gimmicks. The biggest addition was the pull-out: a tab on the right edge of the screen that opens a sponsor's panel over the page.

It works on home, category, search and product screens, and each screen can have its own panel. The home mockup shows a sale with vouchers. On a product page, the panel can show vouchers for that product.

The content management system (CMS) supplies the panel as a stack of pieces: a header, text, a banner, app buttons, vouchers and products. People can claim vouchers from the panel itself, and each piece can link somewhere in the app.

<Screens
  screens={[
    { src: pulloutHome, alt: 'The home screen with the pull-out open: a Shopee 9.9 Home & Hobbies Day panel over the right side of the screen, with a Shop Now button and a list of vouchers, RM8 off, 50% off, RM15 off' },
    { src: pulloutHomeMore, alt: 'The pull-out panel scrolled further, more vouchers with Claim buttons' },
    { src: pulloutCategory, alt: 'A category screen with the pull-out open: a 7-Eleven Crazy Wednesday panel with two promo images and 15% off vouchers for Ice Mountain and 100 Plus' },
    { src: pulloutProduct, alt: 'A product page with the pull-out open: Save more on Milo products with these vouchers, four Milo vouchers at 10% off, RM5 off, RM10 off and 15% off, each with a Claim button' },
  ]}
  caption="The pull-out, on home, a category and a product page."
/>

The round app buttons on the home screen are new too. The marketing team can make its own from templates, whether it's a Shocking Sale with a product in it, a Shopee or Lazada button, or one for food. Each one points to a screen in the app.

The buttons use the deep-linking system we revamped for 3.0. Every screen now has a `hargapedia://` address, whether it's a product, a voucher, a category, the camera or the shopping list. The app uses those same addresses for its own navigation. A banner, app button or push notification can open a screen in the same way.

<Figure
  src={appButtons}
  alt="Eight round app buttons in a row: four Shocking Sale buttons with a Downy pack, a Shopee bag, a Corn Flakes box and a Cif bottle, then Shopee, Lazada, Taobao and a food button with a plate and cutlery"
  caption="App buttons, from the templates."
  wide
/>

Vouchers now have a complete flow: claim one in the app, scan its barcode at the store, then mark it as used. They have a place in the Deals & Vouchers tab, alongside the deals.

Compare puts two retailers against each other on a set of products and marks the cheaper one for each item. The mockup below compares nappy prices at Lazada and Shopee. The daily check-in card also got a redraw, with confetti when you complete a day. The first campaign on the redrawn card is with Giant.

<Screens
  screens={[
    { src: home, alt: 'The 3.0 home screen: a search bar with recent searches, a Shopee mask deal in the carousel, the category circles, a 2nd at 80% Off card, and a tab bar with Home selected' },
    { src: deals, alt: 'The Deals & Vouchers tab: a Shopee 11.11 Big Sale banner, 11.11 Codes with Claim buttons, and 11.11 Exclusive Deals' },
    { src: versus, alt: 'The Compare screen: Lazada VS Shopee on diapers, three products with a price on each side and a Winner tag on the cheaper one' },
  ]}
  caption="Home, Deals & Vouchers, and Compare, from the mockups."
/>

## The tab bar that shipped

In the mockups above, the selected tab expands into a pill with its label. That design didn't make it into 3.0. We went with a traditional tab bar, which allowed us to use animated icons.

I made the animations in Hype and exported them as GIFs. The Compare icon flips from a VS mark to the two retailers being compared. The voucher icon cycles through the brands that currently have vouchers in the app, including Grab, foodpanda and Giant.

<Tiles
  items={[
    { src: tabVersus, alt: 'The animated Compare tab icon: a circle split blue and orange with a VS mark that flips to the Lazada and Shopee logos', label: 'Compare' },
    { src: tabVouchers, alt: 'The animated voucher tab icon cycling between the Grab and foodpanda logos with a burst between them', label: 'Vouchers' },
    { src: tabVouchersGiant, alt: 'The animated voucher tab icon cycling between the Giant, Grab and foodpanda logos', label: 'Vouchers, with Giant' },
  ]}
  caption="The animated tab icons."
/>

The design work carried through into React components this time: the check-in card and its day items, confetti, animated buttons and form inputs. The team handled the integration.