Project: Web Platform Development
Ad Agency: Face to Face Advertising
Originally launched in 1982 and produced in Saudi Arabia and the UAE since 2005, Barbican is one of the leading malt beverages brands in both market share and brand strength in the category.
This platform was built for the #BroChallenge 360 campaign. Every week for a month, three challenges were announced and peopled participated in completing the challenges for a chance to win prizes. Participants would register their team of three members on the website and would upload their videos from their team page.
Different challenges would award more points than others. To reward long-term participants and encourage competitions, medals introduced to the system where teams would acquire a medal for every 300 points earned (bronze for 300, silver for 600, gold for 900, and platinum for 1,200).
- Mobile first UX and video content
Over 70% of the users were on mobile devices and the website UI made it easy for users to upload files directly from their devices. Access to user’s gallery and camera device was possible since mobile web browsers implement HTML5 file API. On desktop and mobile, the simple upload interface provided progress bar and validation for file size/type restrictions.Video content was hosted on with Wistia which includes detailed analytics (such as viewer heatmaps) and integrations with external stats tools like Google Analytics.
- Registration, SMS gateway, and team profile pages
Every team were to have three members, the captain and two of his/her team members. The person to first register on the website was captain. The registration module required the captain to provide an email address of the members — or as a measure to remove barriers to entry, the mobile number of the member.Via the SMS gateway API, members would an SMS message and invite link to complete their part of registration.
- Analytics and Tag Management
It was important to have available analytical information about users’ interactions on the website; e.g, do users sign-up after landing, do they interact with the cards, or what part of the UI do they engage the most. To address this, HTML elements were assigned attributes registered on Google Tag Manager to track such engagements and give more info about user behaviors.
Watch: Walkthrough of the platform