---
title: "Giving the marketing team a template"
description: "When the deal cards our marketing team designs stopped looking like the rest of Hargapedia, we gave the team a PSD template and a short guide instead of building every variation into the app."
url: "https://rayson.me/writing/custom-product-template/"
category: "Design"
author: "Janarayson"
published: 2021-09-29
---

This month I put together a short design guide for our digital marketing team. It's for the deal cards they make, which had stopped looking like the rest of the app.

Most of what you see in a list of deals in Hargapedia is products we track. We collect the prices ourselves, and the app draws every one of those cards the same way. Mixed in with them are deals from partners, a pizza with a promo code, olive oil on pandamart, something from Lazada's 9.9 sale. We call them custom products. The marketing team designs each one as an image, and the app puts it at a set position in the list and rounds its corners.

Images give the team a lot of room. Every partner wants something a little different. One has a logo, another needs a sale badge or a promo code, and some want the normal price shown next to the deal price. An image can carry all of that without us touching the app.

## The cards stopped matching

The catch is that every card came out a bit different. Names were tiny, or pressed right up against the price, or ran to three lines, and photos sat in white boxes in the middle of the card. Next to our own product cards, a list of deals ended up looking and feeling like a different app.

Part of it was that more people were designing them. We'd started having interns, and a lot of the design tasks were going to them, with no proper guide to follow.

## Code or a template

One way to fix it would have been to take the design out of the team's hands and draw these cards in the app, the same way we draw our own. They'd be consistent, but we'd lose the flexibility, and we'd end up coding countless variations, a new one every time a partner wanted something we hadn't built yet.

It was better to keep the cards as images and give the team a template instead. The template is a PSD with the layouts already done. The team swaps in the photo, the product name and the price, exports a JPG, and nothing changes on the app side.

<Figure
  src={variations}
  alt="Six custom product cards: pandamart olive oil on a pink price block, Dettol handwash on a green one, Maggi Kari with a 6.6 badge on blue, the olive oil again on white with a pink price pill, Domino's Pizza with 35% + 10% off and a TAPINTOFOOD code, and Dettol on white with a yellow price pill"
  caption="Layouts for the template, June 2021."
/>

## Writing the rules down

Names are always SF Pro Rounded at 24pt, however long they are, so none of them end up tiny. If a name doesn't fit in two lines, it gets cut off with "…" instead of running on to a third. The price always has a gap above it. And the photo goes in a 300 by 220 area at the top.

<Figure
  src={template}
  alt="Three template cards: Samyang Extra Hot 2x Spicy Ramen on white, a grey placeholder marked Photo Area 300 x 220 with the name set in SF Pro Rounded 24 pt, and a mooncake photo filling the top of the card with rounded corners, each with a crossed-out RM21.90 and a red RM13.14 /pack price"
  caption="The template, from the guide."
/>

The photo rule comes from the app. It rounds the corners of every custom product image, which works fine for a product shot on white. But if a photo has its own background and doesn't fill the width, the corners get rounded on the white margin instead, and the photo ends up sitting inside it like a picture in a frame. So a photo with a background has to go full bleed.

The rest of the guide is cards the team had made, each one next to the same card fixed.

<Figure
  src={pairPhoto}
  alt="Two versions of a 9.9 card for wallpaper photography props: on the left the photo sits inside white space and the name is small and close to the RM0.99 price; on the right the photo fills the width and the name is larger with room below it"
  caption="On the left, the photo sits in white space and the name is small and close to the price. On the right, the photo fills the width and the name has room."
/>

<Figure
  src={pairName}
  alt="Two versions of a Domino's Large Beef Pepperoni Pizza card: on the left the name is small; on the right the card is taller and the name is set larger over two lines"
  caption="The name on the left is too small. On the right, a taller artboard gives it room at the template size."
/>

<Figure
  src={pairBadge}
  alt="Two versions of a Pureen Liquid Cleanser card for the 9.9 sale: on the left a small badge reads 9.9 Biggest Brands Sale and the name is small and close to the price; on the right the badge is just a bold 9.9 and the name is larger"
  caption="Biggest Brands Sale is too small to read on the left, and people already know it's Lazada's sale. The badge on the right just says 9.9."
/>

<Figure
  src={pairLines}
  alt="Two versions of a Santan card for Pak Nasser's Nasi Lemak with Ayam Goreng Berempah: on the left the name runs to three small lines; on the right it is two lines at the template size, ending in Berem..."
  caption="Three lines on the left. On the right, two lines at the template size, cut off with an ellipsis."
/>

The cards coming in since have been a lot more consistent. They're still images, and the team can give each partner what they want, but now they look like they belong in the app.