Twenty-one days and five friends

5 Feb 2021Engineering4 min read

Two things took most of January to build, a check-in campaign the marketing team can configure themselves and a referral campaign that runs as a web page inside the app.

Two things went out in the app a couple of weeks ago, a 21-day check-in and a member-get-member campaign. Between them they took most of January, and both were new for the team to build.

The check-in card has been on the home screen since version 3.0, but up until now, every campaign was built specifically for that occasion. We had one for a retailer, another for 11.11, and each time the logic was tied to that particular campaign.

This time the brief was different. Marketing wanted to create and manage their own campaigns without the developers building something new each time. The catch was that we didn’t have the backend or the CMS to support any of it.

So we had to build that first.

Now the marketing team decides who sees a campaign, when it starts and ends, and how the whole thing works. They can run a fixed 21-day campaign or give each user their own 21 days from their first check-in. They decide whether missing a day resets your progress and how many points you need to qualify for a reward.

They can customise each day too. Some days give more points, others have a voucher to collect, a question to answer, or a task that takes you to a partner’s page. And because the app is in three languages, marketing manages all the copy themselves, down to the little messages like “Collect 7 more points to qualify.”

What used to need a custom build for every campaign is now something the marketing team sets up and runs on their own.

On my side, the hard part was the card. Since marketing can configure almost anything, the card has to hold up for all of it. It might show a row of seven days or twenty-one, one partner button or three, a power-up day that needs to stand out, and every state a day can be in, today, done, missed, qualified. Most of the design time went into those states.

Four states of the Check-in everyday to win card: day one with three partner buttons and 0 points, a done state saying come back tomorrow to check in again, a completed seven days state saying your entries are now qualified, and a power-up day with a Tap here for more points button — The check-in card in four of its states.

The React components came straight out of those mockups, the day items, the power-up button, the confetti when you complete a day. The team built everything underneath them, the campaign logic, the API and the CMS.

The home screen with the Check-in everyday to win card at the top, a row of days with +1 on each, three Tap here partner buttons, and Collect 7 more points to qualify — The card on the home screen.

Member-get-member is the other one, and the question there was where to build it. The campaign itself is simple. You share your code with five friends, and when they install the app, sign up with your code and complete their profile, you get RM5. There’s a 24-hour timer on it so people don’t sit on the task.

We built the whole campaign screen as a web page. The app opens it in a WebView, creates your invitation code through the API and hands it to the page, and the page handles the rest. Sharing goes out through the phone’s own share sheet to a landing page with the code and the steps on it.

The reason is that a campaign like this changes. If marketing wants different copy or a different look next week, we update the page and everyone gets it, without an app release. It’s a start for us, and we’ll be trying more of the app as web views in later builds.