The Roli website as shown on a laptop and tablet.

See it in action:

Operating in 33 regions and in many different languages, Mobil 1 were expecting over a million claims during the lifecycle of this promotion. There were two aspects to the promotional site:

  1. Customers would receive a promotional code with the sale of a qualifying Mobil 1 product or gas change. They would use the form on our claims site to enter their details and register their purchase.
  2. When approved, the customer received a different code which would allow them to claim a pre-paid Mastercard reward.

I was working as a web developer for Opia Ltd at the time and became the frontend lead for this project.

The client needed a complicated one-page claim form which asked every required question. The form also needed to allow the user to input their unique promotional code and opt-in for further marketing.

We first built the English version of the site, before translations would arrive later. Each different language for the website had to be readable and responsive for users across many different devices.

I worked alongside an external design team to ensure the final build remained on-brand to the client’s wishes. With a wide variety of regions and languages, there was a lot of optimisation to complete once the translations were ready. This process took several weeks of back and forth to ensure each regional version looked and performed as expected. Many of the supported languages read right-to-left, so design modifications for this had to take precedent.

One major challenge I had not forseen at the start of this work was dealing with legality of cookie consent for many different regions. For example, some countries (Belgium and Portugal etc) required us to prompt the user to either accept or decline cookies before they could navigate the site. For the majority of countries, we only had to provide a notification of cookies, which the user did not have to make a decision about. Creating this logic and designing around it was a big team effort from all involved. I learned that with large corporate projects, there are many different legal requirements that may not present themselves at first.

Another problem we had during development was that the client wanted to change the visual breakpoints. At Opia, we built our websites with three different responsive breakpoints (mobile, tablet and desktop). For this project, the client desired only two (mobile and desktop). This was a challenge as I had already spent a lot of time developing the frontend when the goalposts shifted. With no extra time given to make this change, it was a long task. This challenge taught me to agree as much as possible before work begins - especially if there is more than one third-party in the chain.

Additionally, I built a set of responsive email templates allowing our customer team to communicate whilst remaining on-brand. This template had to work alongside our automated emailing system. When our customer services team had completed verification or to confirm when the customer’s reward was ready to send - the email had to look perfect.

The landing view of the Mobil 1 promotional website as displayed in Latvian on a desktop device