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 front end of the site using Vue.js along with many complex SVG animations.

The onboarding page helps the user get a brief overview of how to earn plays and what they can get out of the game.

The main game page for Starbucks for Life has always had the game at the top with the earnings below. Each tier has three pieces and the user has to earn all three pieces to win that prize. While playing the game, the page animates down to the location of the game piece you are winning, so the user doesn’t have to scroll during the entire game play and can get a clear visual of what is happening.

Here is an example of a user winning a game piece. It gives brief detail on what the user won with the option to share on social media.

This is to show what the bottom of the game page looks like. There is a separate section for duplicate plays because if you earn three duplicate pieces you earn an extra play. There is a section for your instant win prizes to list out how many you’ve won in each category.

An example of what winning an instant win looks like.

The user has a chance to complete weekly challenges to earn extra game plays on top of the two game plays they can earn each day from making purchases. An example of a challenge might be to order from the app three different times.

The prizes page shows how many prizes have been awarded to show that a lot of people have been playing the game. It lists out the different categories of prizes that exist as well as testimonials from winners in previous years.

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.

While Chelsea was not a designer on this project at Merkle, as a front end developer Chelsea was very involved with working through the overall strategy to come up with the best user experience for this program. Chelsea worked directly with the Starbucks creative team to discuss their creative vision and how it can work within the flow of the site and the timeline of the project. She built this campaign with one other developer using Backbone.js and Node.js

While Chelsea was not a designer on this project at Merkle, as a front end developer Chelsea was very involved with working through the overall strategy to come up with the best user experience for this program. Chelsea worked directly with the Starbucks creative team to discuss their creative vision and how it can work within the flow of the site and the timeline of the project. She built this campaign with one other developer using Backbone.js and Node.js

While Chelsea was not a designer on this project at HelloWorld, as a front end developer Chelsea was very involved with working through the overall strategy to come up with the best user experience for this program. Chelsea worked directly with the Starbucks creative team to discuss their creative vision and how it can work within the flow of the site and the timeline of the project.