Innisfree #ABCD Marathon

  • Campaign/ Game
  • Design & Concept

    One Two Jus

  • Services

    Website UI/UX Design

    Sprite Sheet Animation

    Game Design

    Front-end Development

    Back-end Development

Innisfree #ABCD Marathon

Phaser 3 Framework: Interactive 2D game microsite development

In conjunction with the launch of Innisfree’s Brightening Pore series, we wanted to educate the users about the unique benefits of its Blemish Care through an interactive experience. The concept whereby protecting skin against UV ray damage is a continuous effort sparked our inspiration to give this game a ‘marathon’ concept. This allowed the users to learn about the products in a fun and unforgettable manner. Phaser 3, the popular HTML5 gaming framework was utilised in this development.

The Assignment

  1. Mobile-prioritised design
  2. Deliver product benefits in a fun, interactive and educational manner

Game Level design

Planting the characters & obstacle is fun in this project, we carefully plan the game level difficulty for each levels using 2D array of tile indices to map out all the assets.

Tech stacks

Front-end DevelopmentPhaser 3
Back-end/ CMS
  • Node.js (Express)
  • PHP (Laravel)
  • Craft CMS
  • Wordpress
  • Strapi
Front-end/ Interactive
  • HTML, CSS (Stylus/ SCSS)
  • React/ Next.js
  • Vue.js/ Nuxt.js
  • Phaser (Web Game)
  • Firebase
Mobile/ Desktop
  • Flutter
  • Expo
  • Electron
  • Shopify
  • WooCommerce
  • Custom eCommerce (Headless CMS)