Enhancing the lucky dip experience for Stami Studios

Stami Studios sells, amongst other things, a lucky dip bag that contains a random selection from one of their collections. They wanted to enhance the purchase experience by taking inspiration from the coin-operated vending machines that dispense random toys in a plastic capsule.

I set out to build a solution that would allow the user to interact with a virtual vending machine and receive a random selection from a collection. The solution would also need to be seamlessly integrated into their existing store. I wanted to take the simplest route possible:

• A single SVG containing the vending machine and the capsules.
• D3.js to handle the animations and interactions.
• JavaScript to handle the interactions with the store.

If you just want to see the final result, you can see it here.

The SVG

The SVG was designed by Stami Studios and contained all the visual elements of the experience. This was created with Adobe Illustrator and exported as SVG. Importantly, key elements were grouped into named layers to allow for easy manipulation with D3.js, as the layer names are used as the element IDs.

The Animations

Implementing the animations was straight-forward with the D3.js transition() method, which allows for multiple animations to be chained together. The different animations are:

• A help message to the user, indicating that they can turn the knob on the machine. This faded in and out until interaction.
• The knob would then rotate 180 degrees and lock, preventing further interaction.
• The capsules in the machine would shake to indicate something is happening.
• The capsule would then be dispensed from the machine and fall into the capsule tray.
• The capsule would then shoot off into the top right of the screen, towards the shopping cart icon.

Interactions with the store

I wanted to maintain the existing store experience, so I used JavaScript to replace a few things on the particular page. The first thing I did was remove all the purchase buttons, e.g. Apple Pay and Add to Cart. Next, I replaced the product images with the SVG. All of this was done with JavaScript, so without it, the user would still be able to purchase the product as normal. The final step was to trigger the Add to Cart action when the capsule was dispensed from the machine.

The final result

Here's a demo of the final result:

To see it in action, visit Stami Studios.