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

Summary
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

NameStack
Front-end DevelopmentPhaser 3
languages_and_frameworksitems
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
E-Commerce
  • Shopify
  • WooCommerce
  • Custom eCommerce (Headless CMS)


Back