Janarayson

Hargapedia, version one

Design6 min read

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.

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.

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
The ten top-level category icons, October 2017.
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
The ones underneath.

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.

Four colour swatches from the brand guideline: primary blues #275AC7 and #1E4CAF, accent yellow #FDD835 and red #F45C46
The colours, from the brand guideline.
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
The app icon.

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.

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 PetsSearching for mil on iOS: five category results, then product cards for Similac, S26 Promil and S26 Gold Progress with pricesA 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 rangeThe 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
iOS: home, search, a product, and the mailers.
The Android home screen: a blue status bar, the logo, a search box and the coloured category iconsSearch on Android, the same category results and product cards with Material stylingThe product page on Android: lowest, average and highest prices and the retailer listThe retailers screen on Android with the mailer covers
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.

The home screen in EnglishThe home screen in Malay, with the categories labelled Untuk Bayi, Minuman, Makanan and so onThe home screen in Chinese, with the categories labelled in Chinese characters
Home in English, Malay and Chinese.
App Store screenshot: Simple & Direct, No forced login, just search and compare latest grocery promotions, over a tilted iPhone showing the home screenApp Store screenshot: Better Search, Search your favourite brand, products or even category, just type, with the search screenApp Store screenshot: Compare & Save, Find the cheapest promotions, for the biggest savings across a wide selection of retailers, with the product pageApp Store screenshot: Promotions, We are the first to offer up-to-date newspaper promo ads, and leaflets too, with the retailers screen
The App Store set.
The Play Store feature graphic: the price tag logo and Hargapedia, The Grocery Price Comparison App, on dark blue with faint grocery icons
The Play Store feature graphic.

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

The launch video for Facebook, January 2018.