vladimir@vladovic.com

Six Picks

TECHNOLOGIES USED
Vue.js 2 Canvas
YEAR
2018

About the project

Marketing team wanted to create a predictor, where users could predict the correct score of selected matches. For correctly predicting the score of a match, the user received 5 points, for correctly predicting the outcome (win/draw), the user received 2 points. To increase engagement our company made a deal with Robert Pires who was predicting as well, and users were trying to get more points than him – this functionality could be turned on/off. Apart from tab with predictor, there are also tabs for leaderboards (weekly and overall), details about prizes, FAQ and history (user’s previous predictions).

My responsibilities

My job was to build the front-end of this mechanic based on requirements and UX/UI provided. Communication with stakeholders, project managers, QA, UX/UI designer is a standard. Final app was easy to localise and theme.

The biggest challenge

I had a lot of fun creating the countdown component. Every number (days, hours, minutes, seconds) is placed on top of a canvas and every time a number is changed, the corresponding arc circle is changed as well. In the end it was just a few lines of code to achieve it, but I didn’t have much experience with canvas back then, so I was happy with the result.

Predictor
Upsell
History
Leaderboard
Predictor – sportingbet
Next Project