Mobile-First Website & QR Code Registration

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.

WHAT MAKES THE WEST UNIQUE?

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

#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.