This project began with an idea at a Good For Nothing meet up that was tasked with generating ideas on how to encourage people to support local independent cafés and restaurants.
The concept was to create an app that added an element of fun when choosing where to eat. Users should be able to simply click ‘spin’ and be presented with a random special offer from a participating venue. To generate interest and a focal point, it was decided to run this as a proof of concept over a two week period to gauge interest and get feedback.
There were several considerations when deciding how to build this app. Ease of access was a top priority and we wanted to be as inclusive as possible. The more people that we could get to the independents taking part the better. Therefore, we decided to go web based. This way there wasn’t the burden of creating apps for multiple platforms, and the barrier of downloading and installing an app is removed from the user. Simply clicking a link was all that was required to take part.
Due to budget and time constraints, we needed to use a framework that would enable rapid development. For this reason we decided we would use WordPress as we have a tried and tested workflow in place to deliver on time.
With more time available we certainly would have considered building the application architecture with Laravel or similar, however the flexibility of WordPress and the fairly simple requirements for the initial app enabled us to create the desired effect with some simple customisations.
A custom post type was set up and we stored all venues as post objects. This would also allow us to quickly create a directory that showcased all the independents taking part. Custom fields were created to store and organise the information required to show on the offer page. I then created a custom plugin that would handle the logic.
Due to the fact we did not want to limit the number of participants, the spinning wheel was designed with abstracted statements such as ‘Hidden Gem’ and ‘Tasty Treat’, rather than a specific segment per participant. This meant we did not have to track the landing position of the wheel. Instead we could randomly pick a post id to pass to the results page and determine which offer to show the user after the wheel animated.
To control the animation I used Greensock’s TweenMax as this provided useful built-in events such as onStart, onUpdate and onComplete. This enabled me to control things such as locking the spin button once the animation had begun to prevent interruptions or erroneously queuing up multiple spins.
When the onComplete event was triggered, a function was called that pulled the random venue id from WordPress via an Ajax call and passed this to a results page as POST data.
To track engagement with the app we wanted to be able to view some simple data such as:
- total number of spins
- engagement after seeing a result (clicking spin again, saving the offer or visiting the venue’s website)
- number of unique users
- distribution of results
To do this I created an extra table in the WordPress database to keep some custom data. I logged this data during the Ajax call and wrote a simple stats page so those involved with the project could easily view up to date information.
For the visual design we wanted to create an app like experience. I integrated Bootstrap and we focused on creating a lightweight single column layout that would work well on phones.
The project received great feedback, and is being considered to run again, perhaps with some additional features. User accounts and tracking offer redemptions within the app are two improvements I would like to introduce. In total there were 14,500 spins of the wheel with over 1,800 offers saved.