03 April 2009

Strategy, technical and designer walkthrough of Pepsi Max: Max It ARCADE 2009

Pepsi Max It - teaser img

Summary:

6 real claw machines can be controlled and played on from your browser. Pepsi Max combines bytes and atoms. If you're passionate about something, max it. That is what Pepsi Max is all about. That and gaming of course. And how do you go about maxing a game that everyone is passionate about? You think bytes (as in 'internet'). You think atoms (as in 'real world'). You grab a soldering iron and connect both.


Full post:

MAX YOUR THOUGHTS
Take 6 real claw machines, hook 'm up to the internet and start playing. Unique codes can be stripped from the Pepsi Max bottles and used to add up for extra gaming credits. The lucky ones can win some cool prizes or grab a ticket for the final during which one plays with an 8 meter tall claw machine containing really huge prizes! Each finalist will be able to grab a huge bear and possibly win sunjets.be trips to Malta or Tenerife, or take home 50" plasma's and other cool Panasonic stuff.


OLDSKOOL CAMPAIGNING
The campaign is kick-starts with traditional online media. Bannering and an enticing e-mail to a database of Pepsi Max aficionados


SOCIAL MEDIA CUM

Today, more than 2.1 million belgian citizens are an active member of Facebook. So we integrated the power of Facebook Connect to make the game easily portable over the users contact network. Everyone registering with Facebook credentials, receives give-away codes for friends. Everytime anyone plays or wins it shows up in their friends newsfeed. How's that for viral?

Frankly, a huge amount of users can freely access the website but only 6 can play simultaneously. Of course these users don't want to be sitting ducks while waiting for a claw machines to become available. Statistics are put up to check when the site is very busy, a concept we introduced with, and was essential to, the Internet Is Mine case. Also, the claw machines Twitter when one of the slots is available.


KICK-ASS DESIGN
Phase 1: First wireframes were made in Powerpoint. They served as a basic feature-spec for the full website.

Phase 2: After being loosely briefed on the campaign’s concept and features, several paper sketches were made to serve as a rough guide. The concept at this stage was “a carnival or arcade, but maxed out!”.

Pepsi Max It - design: handmade

Phase 3: Taking the best sketches into Photoshop, we created a digital painting that would serve as a moodboard and colour guide. This piece was also shown to the client in order to get the go-ahead for the look-and-feel for the rest of the website. You’ll also notice the (not-so) subtle use of Pepsi’s 3 main colours, creating a symbolic link between the logo and the site.

Pepsi Max It - design: grading & coloring

Phase 4: Using photos of the real grabber machines as reference, 3d models of the six cabinets, as well as a large “hero”-crane - a reference to the real-life final phase of the competition. The models were created and rendered in 3ds max 2008.

Pepsi Max It - design: 3D rendermap

Phase 5: After all 3d models were animated and rendered, all assets were composited in Adobe After Effects and Photoshop. The mist was painted by hand.

Pepsi Max It - design: finished composite

Phase 6: After the final compositing of the scene, everything was then taken into Adobe Flash, where it was animated and integrated with the rest of the UI, which was also designed in Photoshop.

Pepsi Max It - design: finished UI


SOME HARDCORE GEEKNESS
Basically the client, your pc at home, simply browses to the webpage loading the Flash application. Through the Flash application the Socket Server receives the data of the logged in user and pushes that info to an Application Server on the same layer. The Application Server is there just to check the user data. N00bs would refer to this step as "checking with the database". Furthermore the Socket Server just relays feedback between the claw machine and the UI. To put it straight, the Socket Server is the connection between the client and the claw machines at our offices. If a connection is established then that triggers the Socket Server and extracts one credit. Whenever a client is logged and ready to play, the Socket Server checks whether the user still has available credits to play the game. Credits can be added by entering game-codes found on Pepsi Max bottles and cans.

So, the Application Server feedbacks on the user-request and talks back to the Socket Server. Finishing this simple cycle the Socket Server pings to one of the 6 computers hooked to a claw machine. Each one of these computers is linked to a claw machine through 6, USB interface, micro-controllers talking to one of 6, physical, claw machines.

The micro-controllers allow users to address the physical controls of the claw machines. The connection between the two buttons to navigate and the coin collector are intercepted and thus hijacked by the USB interface of the micro-controllers. The micro-controllers send the claw machines the same electrical signals normally send by the original connections of the physical buttons.

The bears in the claw machines are stuffed with an RFID-tag. If a user manages to catch and lift a bear, the bear is dropped into a slide passing an RFID-chip reader. Once the reader is triggered a signal is passed on back to the Socket Server. The Socket Server then checks that tag with the linked prize in the DB inside the Application Server. When the match is made the UI displays to the user what prize he, or she, has won.


By the way, Proximity BBDO is looking for more ambitious developers willing to enforce our team and start create more of these wicked web-apps and games. Anyone with an interest can apply here.

Check out more of our geekness at Adnerds.be and check the conversation at #pepsimax, #twapero and #proximitybbdo

3 comments:

  1. Nice work indeed!
    Thanks for little chat about this project on the netlog-dev-day.

    ReplyDelete
  2. Summary: 6 real claw machines can be controlled and played on from your browser. Pepsi Max combines bytes and atoms. If you're passionate ... rclawmachine.blogspot.com

    ReplyDelete