Janarayson

Twig: a lock-screen rewards app with Axiata

Design7 min read

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.

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.

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 rightThe lock screen with a Zalora fashion ad on a dark backgroundThe lock screen with a football story, Liverpool show their EPL ambitions with new signings, worth 250 pointsThe lock screen with a music story, Who the heck is Romeo Santos?, worth 250 points
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.

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.

The offer wall: tasks like Visit and sign up for a Zalora account and Download and install 11street, each worth 250 pointsPaid browsing: a grid of sites like 11street, Lazada, Zalora, Rasa Malaysia and MSN, each with points per visitThe rewards store: XPAX RM10 top-up, Starbucks, Watson, AirAsia, Pizza Hut, Adidas and MBO vouchers, each with its pointsRedeeming an RM50 Starbucks Gift Card for 5,000 points, with the terms to agree to
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.

The splash screen: the pink hexagon logo on purple, Experience more, pay less, and An innovation by Axiata Digital ServicesThe welcome screen: twig in script, The app that rewards you for your time. Get on board!, and a Create Account buttonThe profile: a photo in a hexagon, 12,450 points, and achievement badges for Getting Started and Redemption & RewardsAn achievement unlocked: Learning the ropes, next up, try the in-app browsing for some more points
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.

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
twig.com.my, 2015.

Ads for the lock screen

Twig launched on Google Play, and this June Vulcan Post tried it for a week: 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.

A lock-screen ad for XPAX M4GIC SIM, You'll never let it go, with a face lit in purple and orangeA lock-screen ad for Starbucks: two Frappuccinos under colourful bunting, Say yes to yumA lock-screen ad for Axis in Indonesia: IRITOLOGY, Gaya Hidup Irit, with a man in a turban holding a chilliA 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
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.

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
The first logo, and the new one.

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.

The animations for the new site: advertisers, earning and redeeming.

Update, November 2017: Twig has been bought, and the app is no longer on Google Play.