Competition framework

  • design
  • html
  • scss
  • typescript
  • vue
  • pinia
  • UI

Overview

One of Holograph's key offerings has been creating end-to-end consumer competition campaigns. A QR code takes the consumer to a form which collates data for the competition including name, age range, location, purchase location etc. Redeemable codes can be sent out as instant prize wins or winners can be selected using a fulfilment interface. Associated branded dashboards give valuable insight into key metric campaign data.

Role

With the company having had some experience in creating a number of these campaigns in the past, each offering was a bespoke project. This became a time-consuming process. We wanted to move away from this custom, somewhat ad hoc approach and produce a competition framework, in which a new instance could be spun up in moments, while at the same time being highly configurable from a config file.

I set up to identify and produce a report on what steps we could take to realize this vision. At the same time, I produced a prototype of what this might look like from a front-end perspective.

  • A new core page layout structure
  • A new style-config JSON file allowing for layout and styling configuration
  • A core SCSS codebase built alongside the template for quick CSS property overrides
  • Extensive use of CSS custom properties for theming and global style values
  • Codebase rewritten using Vue 3 with components and Pinia for global storage.