Scratch and Win – A mobile responsive scratch card

Components of a Digital Scratch Card.

The Challenge

Create an interactive way of providing an Instant Win to a competition entrant. Typically draws are carried out by email but conversion rates are higher if there is something to be won immediately.

Our Approach

We created a multi-purpose app that can be used as a theme for a Wyng Instant Win campaign or as its own overlay on almost any other website.

The instant prize tool has a rate limiter and can provide a certain number of wins in a time period, distribute prize types and send notifications.

We built everything mobile responsive to ensure maximum usage.

Scratch and Win - A mobile responsive scratch card

Neurological Reward SystemsWhy it Works

Just like with our Wheel Spin App and Fruit Machine App there is a science behind this. When a person receives positive feedback in some manner small amounts of Mesolimbic dopamine (DA) are released. The tiny micro doses of this endorphine when enjoying a digital experience are mildly addictive and we seek to find more of that positive feedback in our interactions.

Add to this the small amounts of adrenaline that are released as the suspense builds during the reveal and the whole experience of slowly revealing your win message becomes wholly enjoyable.

Paper scratch card manufacturers, designers and games companies have known this for some time. It has only been in the last few years that we have started to create digital games with such a tactile approach.

Digital Scratch PanelUse your finger or mouse to reveal prize

So what is a digital scratch panel? Well it’s really just an image or block of colour that is laid on top of part of the website. Using some JavaScript and a style of html we can make the parts of the image where you touch with your finger or mouse go transparent.

When you design your campaign you would simply have two layers in your design on top of each other. The bottom layer shows the win or lose messages and the top covers the image until scratched off.

Why and how do scratch cards work?

Behind the reveal panel the win/lose has already been determined and is ready to be revealed. If you really wanted to you could just hide the overlay using the inspector tool. Just like on a scratch card. The user gets some added suspense around revealing the prize.

Maybe they start on the top corner and slowly reveal, some will furiously attach the middle and work out. Hopefully…none will take a coin to their screens!

During user testing the feedback was the process was “very satisfying”.

Useful for more than just games

We've made a very plain version but you should know that every element can be styled or designed as you see fit. You can get as creative as you want with your wheel, background, fonts and headers.

Gamification and creating simple scratch cards on a mobile device is just one use. We see part of our role as digital innovators to inspire our audiences in a belief in a better more engaging internet. So here are some other ways to use a digital scratch panel.

Releasing exciting news such as a baby gender or new logo during a rebrand.
Use it to hide the punchline of a joke!
Use it to create stories where 3 options for the ending are presented and get to reveal just one.
Use it to hide passwords or voucher codes one a persons screen for privacy and give them a fun way to unhide when privacy is not needed.