Unpack The Salt: Web development

2018

Unpack The Salt: Web development

Brief

Build an online competition at Unpack The Salt that tracks users progress toward the health and fitness goal of minimising salt intake. The competition also sends automated weekly progress reports and content to users to help them stay on track with the challenge.

Context

Unpack The Salt campaign

I worked on this project while consulting for Marmalade, an ad agency in Melbourne.

The idea came about to support a campaign being run for the Heart Foundation and was intended to use and extend the existing website to offer users a way to:

  • Custom signup and login
  • Allow creation of teams and invitation of users to teams
  • Track daily progress toward minimising salt intake through various activities
  • Access information and recipes related to the challenge
  • Receive email notifications based on their weekly progress

Below is an example of the kinds of activities users could track each day:

Unpack The Salt user activity example

Of course, since users could sign up at any time after the campaign started, this meant that the emails were sent dependant on when each user reached week 1, week 2, and so on, so these had to be determined and sent per user, rather than a basic weekly email on the same day.

There were also call to actions for feedback to engage with each user, as well as related articles and recipes sent with each milestone email.

Below is an example of how the activities users completed were used to score their weekly progress in automated emails generated when each user passed weekly milestones.

Unpack The Salt custom email example

On top of this, a custom dashboard for the site admins was required to keep track of signups and daily challenge usage.

Solution

Since the existing site was built by already by the agency on WordPress, I had to continue to work with the theme and plugins already in place.

To keep things as standard and easy to extend as possible, I opted for the following core principles:

  1. Use the existing WP user functions for signup and login
  2. Use custom post types for recipes and any specific information outside of posts
  3. Track user progress and teams via user meta
  4. Use WP admin pages and ChartJS for visualization of user stats/progress
  5. CRON jobs for periodic scripts that check user progress and send tailored emails based on user progress using SendGrid integration
  6. wp_ajax functions to receive all user input from the theme

Since the theme itself was built by another party, I nested all this custom logic into functions that were included in the main functions file and could be enabled/disabled via the admin panel once the campaign ended.

The competition saw thousands of new user signups and daily activities logged, and although the premise seemed simple, building this on an existing theme required a lot work on the PHP, JS and front-end dev side where I further learned to refine my use of WordPress core functions.