prev   next  

Mobile-First Website & QR Code Registration

PUMA Westside

PUMA Westside

PUMA launched a new location in Footscray, a suburb in Melbourne's west, and created a campaign for their store opening that celebrates iconic local businesses and artists that make the Westside rock.


The Project

Develop a mobile-first website for users who scan a limited edition QR Code keyring so they can build a custom T-shirt via a secure order form.

Using Bootstrap 4 as the foundation, the entire project was mobile friendly yet still looked and functioned great if the user was on a tablet or desktop. By adding 2 parameters in the URL generated for each Keyring QR code we were able to validate each entry against a confirmation list - meaning each keyring would only be able to get a single shirt each.

Technical Specs

Technical Specs

#Built-in Features

  • PHP & MySQL to check that the URL contained a valid ID code and KeyringID
  • Generate list of all registrants in MySQL and export daily CSV
  • Functionality to change view of each shirt design based on gender
  • Email registation notifications to admin
  • Email registation confirmation with details to registrant
  • Main landing page with video background for desktop & slides for mobile
  • Animations and CSS effects
  • Google Maps API custom map for locating participating businesses (desktop)
  • Custom listing for locating participating businesses (mobile)

#Tech stuff

  • PHP & MySQL
  • Bootstrap 4 framework
  • Javascipt to show/hide different sizes for each gender
  • Custom carousels to display different views of each shirt
  • Javascript to detect default app for maps and trigger open for directions

Fluid design

Looks and functions perfectly across all devices.