---
title: "Hargapedia, version one"
description: "Hargapedia went into the stores just before Christmas, and this is everything that went into version one, the icons, the colours, the screens in three languages and the launch video."
url: "https://rayson.me/writing/hargapedia-design/"
category: "Design"
author: "Janarayson"
published: 2018-01-14
---

Hargapedia has been in the stores since just before Christmas, so this is a good time to write down what went into it. It's Ontrack's first thing for consumers... the company has been doing B2B for years, and this is the other side of it, an app that tells you where a product is cheapest. I'm on the founding team, and my part is everything you can see, the logo, the icons, the branding and the front end. The rest of the team did the backend and the API, on AWS, and the app itself is React Native.

## The icons came first

The first weeks of it had no app in them at all. A price app for groceries needs a category for everything on a supermarket shelf, so before I drew a single screen I drew icons, through most of October. Ten big ones for the top level, beverage, food, fresh food, chilled and frozen, household, non-food, health and beauty, baby, childcare and pets, and then the level under that, which is where it got long... beer, cookies, nappies, cat food, toilet rolls, batteries, all custom drawn in the one line weight.

<Figure
  src={iconsLevel1}
  alt="Ten line icons in a row: a hot drink, cookies, a fish, a milk carton with an ice cream, a spray bottle and detergent, a stack of sheets, a pump bottle, a baby's face, a pram and a paw"
  caption="The ten top-level category icons, October 2017."
  wide
/>

<Figure
  src={iconsLevel2}
  alt="Fifty-four smaller line icons in a grid: beer, a cola bottle, a mug, a juice box, ice cream, cheese, a frozen drumstick, milk cartons, yoghurt, a mixer, cookies, canned fish, chocolate, eggs, a jar, a non-halal mark, bacon, rice, sauce, chips, a dummy, baby food, a bottle, a nappy, a dumbbell, a cat, a dog, eggs, a fish, a watermelon, meat, a carrot, a phone, soap, an eye, a condom, a face mask, a woman's hair, a heart with a cross, a razor, toothpaste, a sanitary pad, a spray, toilet roll, a washing machine, tissues, batteries, A4 paper and a tablet"
  caption="The ones underneath."
  wide
/>

The logo was there before the icons, a price tag with a magnifying glass on it, and the colour came after. The apps already out there had taken the other colours, so we went dark blue... #275AC7 for the app, a deeper blue next to it, and a yellow and a red for accents. The app icon is the same tag, cyan on light blue.

<Figure
  src={brandColours}
  alt="Four colour swatches from the brand guideline: primary blues #275AC7 and #1E4CAF, accent yellow #FDD835 and red #F45C46"
  caption="The colours, from the brand guideline."
/>

<Figure
  src={appIcon}
  alt="The Hargapedia app icon: a cyan price tag with a dollar sign and a magnifying glass, outlined in navy, on a light blue background with wavy bands"
  caption="The app icon."
  small
/>

## Four screens, twice

Version one is four screens. The home screen is a search box and the categories, each icon in a colour of its own. Search takes you in by name or by category, a product page shows the lowest, the average and the highest price before the list of retailers, each with its price and the dates it runs to, and the last screen is the retailers' mailers and newspaper ads, by supermarket, hypermarket and pharmacy.

<Screens
  screens={[
    { src: screenHome, alt: 'The iOS home screen: the logo, a search box, and nine coloured category icons, For Baby, Beverage, Food, Health & Beauty, Household, Chilled & Frozen, Fresh Food, Non Food & Others and For Pets' },
    { src: screenSearch, alt: 'Searching for mil on iOS: five category results, then product cards for Similac, S26 Promil and S26 Gold Progress with prices' },
    { src: screenProduct, alt: 'A product page on iOS for Anmum Maternal Milk Powder Chocolate 650g: lowest RM32.90, average RM35.56, highest RM42.90, then the price comparison with Cold Storage RM31.99 highlighted, AEON, AEON Big, Tesco and Giant, each with a date range' },
    { src: screenMailers, alt: 'The retailers screen on iOS: mailer covers for Cold Storage, Aeon and The Store under Supermarkets, Giant and Tesco under Hypermarkets, Pharmacy below, with Mailers and Newspaper tabs at the bottom' },
  ]}
  caption="iOS: home, search, a product, and the mailers."
/>

<Screens
  screens={[
    { src: androidHome, alt: 'The Android home screen: a blue status bar, the logo, a search box and the coloured category icons' },
    { src: androidSearch, alt: 'Search on Android, the same category results and product cards with Material styling' },
    { src: androidProduct, alt: 'The product page on Android: lowest, average and highest prices and the retailer list' },
    { src: androidMailers, alt: 'The retailers screen on Android with the mailer covers' },
  ]}
  caption="Android: the same four."
/>

## Three languages, on day one

Then every screen again in Malay and in Chinese, because the app went into the stores in all three. That meant three sets of store screenshots too, framed with a headline each, Simple & Direct, Better Search, Compare & Save and Promotions, in the iPhone SE, 6 and 6 Plus sizes, and the Play Store graphics to match. The first two weeks of December went on that.

<Screens
  screens={[
    { src: screenHome, alt: 'The home screen in English' },
    { src: screenHomeBm, alt: 'The home screen in Malay, with the categories labelled Untuk Bayi, Minuman, Makanan and so on' },
    { src: screenHomeZh, alt: 'The home screen in Chinese, with the categories labelled in Chinese characters' },
  ]}
  caption="Home in English, Malay and Chinese."
/>

<Screens
  screens={[
    { src: store1, alt: 'App Store screenshot: Simple & Direct, No forced login, just search and compare latest grocery promotions, over a tilted iPhone showing the home screen' },
    { src: store2, alt: 'App Store screenshot: Better Search, Search your favourite brand, products or even category, just type, with the search screen' },
    { src: store3, alt: 'App Store screenshot: Compare & Save, Find the cheapest promotions, for the biggest savings across a wide selection of retailers, with the product page' },
    { src: store4, alt: 'App Store screenshot: Promotions, We are the first to offer up-to-date newspaper promo ads, and leaflets too, with the retailers screen' },
  ]}
  caption="The App Store set."
/>

<Figure
  src={featureGraphic}
  alt="The Play Store feature graphic: the price tag logo and Hargapedia, The Grocery Price Comparison App, on dark blue with faint grocery icons"
  caption="The Play Store feature graphic."
  wide
/>

The launch video for Facebook went up this month, built in Hype, fifty-odd seconds of the app doing its thing.

<Clips
  clips={[
    { src: fbVideo, poster: fbVideoPoster, label: 'The Facebook launch video: the app being used, screen by screen, with captions' },
  ]}
  caption="The launch video for Facebook, January 2018."
  full
/>