As a front end developer on the project, Chelsea worked directly with many teams at Starbucks to flesh out the strategy and goals of the game. She also worked on these projects consistently over the years, so she worked with the UX Designer to make sure the user flow builds and improves on what the user is used to seeing. She worked with one other developer to build the entire site and individual mini-games within it using Vue.js as well as many complex SVG animations.
The Starbucks Summer Game is a gameboard that the user can spin the spinner to move around the board. Each space can offer up different things such as various mini-games in order to win game pieces or prizes, spin again, power move, and more.
This is a mini-game where the user picks one of three different floaties to blow up with air to see if they won a game piece or a prize. Each time they tap on the air pump the floatie blows up a little more and more until it’s full.
An example of the user winning a game piece. Each game piece is animated so in this instance the frog is actually jumping up and down.
Another mini-game that’s available where the user picks a drink they think will win the race. This tap then prompts the race to begin as they slide down the rainbow to reveal if the user won a game piece or a prize.
Another example of winning a game piece.
Each tier represents a prize and the user has to win all three pieces in a tier to win that prize. In this example, the user has won the land and the tree to get closer to winning the grand prize of a trip to Costa Rica. Once the user wins all three in a tier, that tier and its pieces animate to indicate something special has happened. This will prompt a modal describing the prize they won and how they will receive it.
Each lower tier has a prize counter to show how many prizes have been won for that tier. Over the years users have expressed that they feel they never win anything from the game so this was aimed to help show that many users win each tier and they have many more chances to win with the amount of prizes left.
This user landed on a mystery space, which means when they tap the crystal ball there are three different outcomes that can happen: they will receive another mini-game to play, they will earn an extra play or they won the “surprise prize” which is a special instant win you can only win from a mystery space.
When a user lands on or passes the GO space, if it’s laps 1-5 they unlock another mystery space on the board. If it’s higher than lap 5 they win stars for lapping the board. This is an incentive to get users to try to play even more in order to try to win more prizes.
There are a few Power Move spaces on the board. If a user lands on one they can use it at any time in order to choose where they land on their next turn. This gives the user a sense of control during the game to try to go for winning more prizes.