---
title: "Hargapedia 2.0: a home screen made of cards"
description: "Hargapedia 2.0 is in the stores, and the home screen is now a stack of cards the team can change without an app update."
url: "https://rayson.me/writing/hargapedia-2/"
category: "Design"
author: "Janarayson"
published: 2018-10-31
---

Hargapedia 2.0 went into the stores in the middle of October. Version one's home screen was a search box and the categories, and that was it. The new one is a stack of cards, and the team can change it from the CMS without waiting for an app update... which cards go on it and in what order, down to the background colours.

I did the design and the UI/UX again. This time that meant creating the new components and working out what goes into the CMS, which parts of the app the team gets free rein over and which parts stay in the code.

Most of the cards are for promotions. There's a banner and a carousel, and Must Buy, where the team picks the best deals every day. An event preview puts three products side by side at three stores. Then there are the special cards, a few layouts for different kinds of promotions, and some of them have a countdown... the prices, or the whole promotion, only show when it hits zero. The rest are the category row, a line with how many products we're tracking, a HargaNews card, and your own My List and My Retailers.

<Figure
  src={cards}
  alt="Wireframes of the home screen cards in grey: a banner, a carousel with dots, a row of five category circles, a Tracking XXXX price points strip, a HargaNews card with a thumbnail, Special Cards 1 to 3 with the third showing Ends in 00:00:00, Must Buy with one big tile and four small ones, a price table headed Cheapest, My List with three products and a plus button, and My Retailers with four tiles"
  caption="The cards on the home screen."
  wide
/>

The risk with handing the home screen over is that the designs in those cards now come from the marketing team. If every promotion turns up with its own colours and its own idea of a layout, the cards clash and the whole app looks off. So we set the boundaries in code. From the CMS the team picks the cards and their order, the background and title colours, the images, one set per language, and the products and dates. The layout inside each card stays in the app, and where a card needs to look different, there are a few variants to choose from.

<Screens
  screens={[
    { src: home, alt: 'The 2.0 home screen: a search bar on green, a carousel banner of shops with Quickly Find BEST Deals from Your Favourite Stores, category circles for For Baby, Beverage, Food, Health & Beauty and Explore Categories, Currently tracking 7,451 products, a formula milk banner, and My List with an Add More link' },
    { src: category, alt: 'Chilled & Frozen: a rail of category icons down the left and product cards with prices, store logos and Add to List buttons' },
    { src: myRetailers, alt: 'My Retailers for AEON BIG, with Brochures and Current Promotions tabs and a grid of brochure covers, each with its date' },
    { src: search, alt: 'Search with aeo typed in: Are you searching for, with AEON, AEON BIG and Wellness logos, then the search history and recently viewed items' },
  ]}
  caption="Home, a category, My Retailers and search."
/>

My List was the tricky one to code. It's a table... your products down the side, the cheapest price for each in a green column with the store under it, then every store's price across, and it scrolls both ways. We tried a few ways of building it, even rendering it in a WebView, but the memory it took on the phone wasn't worth it la. In the end we built our own natively, a spreadsheet view on iOS and a table view on Android, both bridged into React Native. It's also the only screen in the app that turns sideways, so you can see more stores at once.

HargaNews is new too, a tab where our blog posts show up in the app... price leagues, did-you-knows, new products and new outlets.

<Screens
  screens={[
    { src: myList, alt: 'My List: products down the left, a green Cheapest column with the price and the store logo under it, then an AEON BIG column, with grey cells where the store has no price' },
    { src: harganews, alt: 'HargaNews: category circles for Show All, Price League, Did You Know, New Product and New Outlet, then article cards tagged Price League and Did You Know' },
  ]}
  caption="My List and HargaNews."
/>