Last month Bremont held a competition to win one of its new H1 Generation watches, which were unveiled on Thursday 13th October.
Visitors to the brand’s website were invited to unlock the Bremont vault by breaking a unique code – the winner was the first person to answer all 20 questions correctly and decipher the code that opened the vault.
The competition kicked off on Friday 23rd September – a new question was revealed each day after with the final question being published on Wednesday 12th October. The competition finally closed on Monday 31st October and the winner was identified.
As an existing client Bremont worked with By Association Only to design and develop the competition. The aim was to increase the number of user accounts, increase traffic to the site, build brand awareness and make lots of noise – it was a pretty special prize, after all!
“Unlock the Bremont vault” was hosted on a bespoke page that functioned like a microsite separate from the brand’s main Shopify account section. This included a unique login, register and forgotten password page, granting users access to the quiz.
.jpg)
Users needed to register their details to take part. Afterwards, they were able to attempt to correctly answer each of the 20 questions, one of which was released daily.
Dashes were provided to signify how many characters there were in each word of the answers.
The initial brief was to provide a simple text box for each answer, so we used an HTML input with letter spacing to match the dashed lines below. The brief changed however to require multiple words that could wrap onto multiple lines as the quiz developed.
This created a conundrum for our developers as a text box is only a single line. As a fix we placed a hidden textarea over the top of the words – when a user typed into the textarea it populated placeholder elements, mimicking an HTML input. We also added a flashing cursor to complete the illusion.
To allow for multiple-word input we used JavaScript to validate the user’s input and placed the characters into the correct boxes, automatically inserting spaces as the user typed. This method allowed us to provide a character limit for the answers, giving a small clue for each user.
If a user didn’t enter enough characters a shake animation played, and they could not submit their answer or move on to the next question.
With such a big prize up for grabs, the answers needed to be kept secure – answers and clues couldn’t be written in plain text on the page or in JavaScript, as this could make them discoverable to “hackers”.
Instead, we created a custom Shopify app with a REST API to store the answers and validate the responses. This meant the user never had access to an answer – their input was compared to the correct answer, and they simply received a true or false response.
Answers submitted through the website included the question index and users’ input. This was then compared against the correct answer stored in the database.
To increase the difficulty of the quiz even more users were only able to attempt to correctly answer each question a maximum of three times per day. These attempts were logged against the customer, meaning that no matter which device the user was using we could see how many times they had attempted to answer a given question.
If the users exceeded their daily attempts, the input form was hidden on the website. The number of attempts was also checked before any answers were compared against the database, preventing users from bypassing this restriction.
If a user’s answer matched that in the database, the user was tagged as having answered the question correctly.
At certain checkpoints in the quiz, the user was also tagged with a timestamp, allowing Bremont to know who answered the questions correctly first. This helped determine who was eligible for bonus prizes as well as the grand prize.
.jpg)
If a user answered the question correctly they were shown a success message. These messages could have potentially contained clues so, for security reasons, they weren’t rendered on the page until the question was answered correctly.
The navigation link at the bottom of the page was also replaced with a letter towards the final code.
If the answer was incorrect the user was shown a message informing them how many more attempts they had that day. If they had no attempts remaining they were told to come back and try again the next day.
By the end of the quiz, the 20 letters at the bottom of the page combined to provide the code to unlock the vault.
Everything on the app was controlled through Bremont’s Shopify account, even the custom app was built within Shopify. This allowed the merchant flexibility to change or edit the questions and manage the answers internally without the assistance of By Association Only.
Thousands of people created a Bremont account to enter the competition, submitting over 71,000 answer attempts, making it a huge success. Of course, though, there was only one lucky winner of the grand prize – the new H1 Generation watch.
Founded in 2002, Bremont produces chronometers at the company’s headquarters in Henley on Thames, England.
The brand worked with By Association Only in 2021 to upgrade its website to Shopify 2.0 whilst elevating its design. We formed an innovative design from a series of creative workshops that balances the brand's combined respect for heritage and progressive technologies. Read the case study here.
By Association Only is the Shopify Plus agency for the world’s most design-conscious luxury brands. Get in touch to discover how our team of experts can support your brand’s Shopify ambitions.
By Association Only has won its fourth Awwwards site of the day title, this time for our work with luxury sneaker brand P448.
From made-to-order luxury bridal gowns to more affordable ready-to-wear bridesmaid dresses, we take a look at the bridal stores using Shopify to sell their pieces.
%20(1).jpg)
Last week By Association Only hosted its annual summer soiree at Coal Office in London. Read all about it here.
.jpg)