What Was The Problem? 🤔
OK Zimbabwe is 🇿🇼 Zimbabwe's biggest supermarket chain and each year they run the "OK Grand Challenge Jackpot Promotion" where shoppers who have been shopping at their retial outlets have the opportunity to win various prizes, from cars, groceries and cash prizes. OK Zimbabwe through their partnered Digital Agency Barkers Ogilvy Zimbabwe reached out to us with the following task: Build the website to be mobile ready, with a fresh, modern look while remaining mobile friendly and usable. Allow customers to interact with existing OK systems for coupon checking and verification as well as registration for the final draw at the end of the competition.
What Did We Build? ⚒️
We got straight to work and settled on the following for our tech:
-
- Wordpress - Headless Content Management Backend
We deployed wordpress in a headless mode. This is because our client needed to handle and manage a lot of content including images, video, text, posters etc. Because we don't want to re-invent the wheel using Wordpress for this makes life so much easier because Wordpress is great at managing content. We stored all the content for the campaign in our Wordpress deployment and just pulled out different content we needed via GraphQL API calls. Implementing caching in Wordpress meant that our content was returned very quickly and the client could add, updated and remove content whenever they needed to without having to get very technical.
-
- Angular & Tailwind CSS - Frontend Mobile Web App
We used Angular for our Frontend App and used Tailwind CSS to style the different components of the site. Working with Angular was great for creating different components for the website and we could make GraphQL calls from Angular to load in content for the website on demand. Tailwind CSS made styling the website very easy and quick. We also used tree-shaking from Tailwind CSS to reduce the ultimate size of the bundle produced so that we could create a beautiful website that loads very fast.
-
- .Net Core Web API - Secure Data Processing API
We used .Net to integrate with the OK Systems Backend to push coupons and pull any information related to customers that we needed to display. All the account management aspects of the system where built using .Net Core and we used this technology to do things such as check coupons, register customers, retrieve customer coupons and send draw entries to the OK System. We where able to handle upwards of 1000 requests per second during the peak of the competition and did not encounter any downtime. We used JWT tokens for security when communicating between the OK System and our .Net Core API and the Angular frontend was able to communicate with the OK System via the .Net Core APi which acted as a Proxy between the public site and the OK Systems.
The Solution 🎉
Primary colors for the brand are RED. So we tried using it sparingly across the homepage to make it readable.
Store locator section using Google Maps API to show different stores across Zimbabwe.
Primary way to enter the draw was to fill out this form. After filling it out the website would submit the info via the .Net API to the OK Systems & confirm registration.
Suppliers section of the website showcased different brands that were part of the competition. We pulled this information from our Headless Wordpress deployment using a GraphQL API.
Weekly winners were published by the client as they could login and update this list anytime via Wordpress without any technical knowledge.
Tweets were pulled in from the OK Zimbabwe Twitter account.
Facebook posts were pulled in from the OK Zimbabwe Facebook page.
Instagram posts were pulled in from the OK Zimbabwe Instagram Account.
This is an example of blog posts that where created by the client in Wordpress and we pulled them from there, styled them and displayed them on the homepage.
Below are some responsive images from the website showing how it looked on mobile screens.
