---
title: "Twig: a lock-screen rewards app with Axiata"
description: "Twig is Axiata's lock-screen app that pays you points for what you see when you unlock your phone. I designed the first version, and we kept coming back for the ads and the new website."
url: "https://rayson.me/writing/twig/"
category: "Design"
author: "Janarayson"
published: 2016-12-23
---

The new Twig website went live earlier this month, and that closes a job we've been in and out of since the middle of last year. Twig is Axiata Digital Services' app. It sits on your Android lock screen with ads and stories and pays you points for looking at them, and the points go on reloads and vouchers.

<Screens
  screens={[
    { src: lockCoke, alt: 'The Twig lock screen at 12:30 with a full-screen Coca-Cola #bestgiler ad, the Twig icon on the left, an unlock circle in the middle and a padlock on the right' },
    { src: lockZalora, alt: 'The lock screen with a Zalora fashion ad on a dark background' },
    { src: lockNews, alt: 'The lock screen with a football story, Liverpool show their EPL ambitions with new signings, worth 250 points' },
    { src: lockNews2, alt: 'The lock screen with a music story, Who the heck is Romeo Santos?, worth 250 points' },
  ]}
  caption="The lock screen: ads, and stories worth points."
/>

## The first version

It started in July last year with a proposal and the user journeys for Axiata, and from there I designed the whole first version, the UI/UX and the look. Purple, a pink hexagon with a sprout and a dollar sign growing out of it, and "twig" in script.

Most of it happens on the lock screen. Every time you wake your phone there's something on it, a full-screen ad or a story, and the stories carry points. From the circle at the bottom you can unlock as usual or open whatever's on the screen. We animated the onboarding in Hype too.

<Clips
  clips={[
    { src: onboardingSwipe, poster: onboardingSwipePoster, label: 'Onboarding animation: swiping through ads and stories on the lock screen, each with its points' },
    { src: onboardingOpen, poster: onboardingOpenPoster, label: 'Onboarding animation: opening a Zalora ad from the lock screen into the shop, then unlocking to the home screen' },
  ]}
  caption="Two of the onboarding animations, August 2015."
/>

In September we also built a demo on Android for Axiata... the onboarding, the lock screen, and a shortcut drawer where you tap and hold a shortcut to drag it away and put another in its place. Ten days or so of work, and the About and FAQ pages were still lorem ipsum.

Inside the app, the offer wall has tasks for points, like signing up for Zalora, watching a movie trailer or installing 11street. Paid browsing pays you per visit to shops and sites like Lazada and MSN, inside the app's own browser. The points go to a store of rewards: XPAX reloads, Starbucks coupons, AirAsia vouchers and more. Coupons come with a QR code to show at the counter.

<Screens
  screens={[
    { src: offerwall, alt: 'The offer wall: tasks like Visit and sign up for a Zalora account and Download and install 11street, each worth 250 points' },
    { src: paidBrowsing, alt: 'Paid browsing: a grid of sites like 11street, Lazada, Zalora, Rasa Malaysia and MSN, each with points per visit' },
    { src: redemption, alt: 'The rewards store: XPAX RM10 top-up, Starbucks, Watson, AirAsia, Pizza Hut, Adidas and MBO vouchers, each with its points' },
    { src: redeemDialog, alt: 'Redeeming an RM50 Starbucks Gift Card for 5,000 points, with the terms to agree to' },
  ]}
  caption="The offer wall, paid browsing, the rewards, and redeeming one."
/>

There's a profile too, with achievements to unlock as you go, and a leaderboard.

<Screens
  screens={[
    { src: splash, alt: 'The splash screen: the pink hexagon logo on purple, Experience more, pay less, and An innovation by Axiata Digital Services' },
    { src: welcome, alt: 'The welcome screen: twig in script, The app that rewards you for your time. Get on board!, and a Create Account button' },
    { src: achievements, alt: 'The profile: a photo in a hexagon, 12,450 points, and achievement badges for Getting Started and Redemption & Rewards' },
    { src: achievementUnlocked, alt: 'An achievement unlocked: Learning the ropes, next up, try the in-app browsing for some more points' },
  ]}
  caption="Signing up, and the achievements."
/>

We did the first website as well, twig.com.my, in the same purple, with pages for advertisers and redemption partners.

<Figure
  src={website2015}
  alt="The first twig.com.my: the hexagon logo and twig in script, a phone showing the offer wall, Attractive offer wall!, a Google Play button, then See only what you want on your lock screen! next to a phone with a fashion ad"
  caption="twig.com.my, 2015."
  wide
/>

## Ads for the lock screen

Twig launched on Google Play, and this June [Vulcan Post tried it for a week](https://vulcanpost.com/578485/twig-lockscreen-unlocking-rewards-app/): a swipe on the lock screen to like a story earns points, 1,000 points is RM1, and you can redeem from 5,000.

The lock screen needs ads, and Axiata came back to us for those. We did sets of them for brands like XPAX, Zalora and Starbucks, and for XL and Axis, Axiata's brands in Indonesia. When Pokémon Go came out, there was one for that too: redeem Google Play credit in Twig and turn it into PokéCoins.

<Screens
  screens={[
    { src: adXpax, alt: 'A lock-screen ad for XPAX M4GIC SIM, You\'ll never let it go, with a face lit in purple and orange' },
    { src: adStarbucks, alt: 'A lock-screen ad for Starbucks: two Frappuccinos under colourful bunting, Say yes to yum' },
    { src: adAxis, alt: 'A lock-screen ad for Axis in Indonesia: IRITOLOGY, Gaya Hidup Irit, with a man in a turban holding a chilli' },
    { src: adPoketwig, alt: 'A lock-screen ad for Pokémon Go: Redeem Google Play Store credits in Twig and convert them to Pokecoins, over a pile of gold coins' },
  ]}
  caption="Lock-screen ads."
/>

## A new look, and a new website

In May Twig got a new brand: TWIG in chunky purple letters, with little icons scattered around it.

<Figure
  src={logos}
  alt="The two Twig logos side by side: on the left the pink hexagon with a sprout and dollar sign above twig in script, on the right TWIG in chunky purple capitals with small yellow and pink icons around it"
  caption="The first logo, and the new one."
  wide
/>

The new website was designed by another agency, C27, and in November we built it. It opens with "A whole new lock screen experience" and has three sections, Discover, Earn and Redeem, plus a page for advertisers. Each section plays a short animation of the app, which we put together in Hype from the new screens.

<Clips
  clips={[
    { src: siteAdvertiser, poster: siteAdvertiserPoster, label: 'Advertiser animation: lock-screen ads cycling through foodpanda, Northern Music Festival, Recomn, Mango and WanderZoom' },
    { src: siteEarn, poster: siteEarnPoster, label: 'Earn animation: the missions list, spinning the wheel to win 40 points, and the daily check-in' },
    { src: siteRedeem, poster: siteRedeemPoster, label: 'Redeem animation: tapping an XPAX reload, agreeing to the terms, redeeming it with points, and the reload code' },
  ]}
  caption="The animations for the new site: advertisers, earning and redeeming."
/>

*Update, November 2017: Twig [has been bought](https://vulcanpost.com/626016/advertising-smartphone-swypeon-lockscreen-malaysia/), and the app is no longer on Google Play.*