Dive into the archives.


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

Posted on 04.04.09 to Chase the Case, Creative, Design, Geekbytes, New work, Online hotshop, Strategy, Technical, recruiting, viral. Subscribe to follow comments on this post.

2 comments. Add your thoughts or trackback from your own site.
Return to top

Voor onze webdesign-vrienden…

… en al wie houdt van mooi en functioneel websitedesign. Voorbeeldjes:

 

En nog veel veel meer hier.

Posted on 02.10.09 to Design. Subscribe to follow comments on this post.

One comment. Add your thoughts or trackback from your own site.
Return to top

Proximity BBDO jobs – snel zijn is de boodschap

Jobs bij Proximity BBDO

Ben jij een getalenteerd flash developer of heb je meer kaas gegeten van PHP en ASP.NET? In beide gevallen zit je safe. Al zal je wel snel moeten zijn. Proximity BBDO zoekt immers een flash (ofte front-end) developer en een web developer.

Meer weten? Kijk snel even op http://proximity.bbdo.be/jobs.

Posted on 02.04.09 to Creative, Design, Online hotshop, Organisation, flash, recruiting. Subscribe to follow comments on this post.

No comments yet. Add your thoughts or trackback from your own site.
Return to top

de “Call-to-action” nader bekeken…

ctajpg.png

Een paar snelle feiten over de CTA:

  1. Kleur: Oranje zet aan tot actie
  2. Locatie: zichtbaar (boven vouw en meerdere exemplaren)
  3. Tekst: geef een reden om te klikken, vb. “neem nu contact op” ipv “klik hier”

Veel gedetailleerdere info hier te vinden

Of kijk hier voor winkelwagen/bestel-knoppen, een subspecies van de CTA

Bron: Frankwatching.com

Posted on 02.04.09 to Creative, Design, Website. Subscribe to follow comments on this post.

2 comments. Add your thoughts or trackback from your own site.
Return to top

site of the year @ theFWA

the eco zoo

The eco zoo takes my breath away. Niet voor niets FWA of the year, de site gebruikt Papervision, de Flash 3D engine, om een eenvoudig maar juist verhaal even zuiver weer te geven. FWA (en hotshop), meer van dat graag!

Posted on 01.28.09 to Awards, Creative, Design, Inspiration, Internet, Website, adobe, flash. Subscribe to follow comments on this post.

3 comments. Add your thoughts or trackback from your own site.
Return to top

Adobe MAX Autopsy report: Flash Catalyst

As you may have seen last week, we (Matthias, Pieter and myself) have had the privilege of attending Adobe MAX in the lovely (yet very wet and cold this time of year) city of Milan, Italy.

MAX is Adobe’s yearly conference, held in North America, Europe and Japan, focused on presenting the latest technological advances made by Adobe, as well as providing education on the software currently available. The sessions are presented both by Adobe “evangelists” and members from the community.

In this first blog post, I’ll be talking about the big thing of the show this year, namely Adobe’s upcoming new entry in  the front-end webdeveloper market-segment : Flash Catalyst. Read on after the jump.

(more…)

Posted on 12.08.08 to Congresses & seminars, Creative, Design, Internet, Online hotshop, Technical, actionscript, adobe, flash, seminar. Subscribe to follow comments on this post.

6 comments. Add your thoughts or trackback from your own site.
Return to top

The Orange Balloon Race

orange_title.jpg

orange_race.jpg

Briefing:
Launch Orange’s Animal tariffs for pay as you go customers.

Campaign by Poke London

Idea:
The world’s first internet balloon race.

Flow:
The person whose balloon goes the furthest over the 7 days of the race is going to get a killer prize. The killer prize is an £18,000 holiday to Ibiza for you and 7 mates. Next to that a load of daily prizes too.

The course is made up of sites that have agreed to be part of the racecourse, or are about to agree to be part of the racecourse.

The most clever aspect of the campaign was how it involved site and blog owners. Rather than relying purely on bought media space, which would be the easy way, they were asking site owners to become part of the official racecourse by simply adding a widget onto their site. In return, site and blog owners might even get a bit of extra traffic from people stumbling on their site.

Any participant could easily spread and promote their own personal balloon, using a range of widgets for all the popular online hangouts, thus naturally distributed, using the web as a gamespace. It’s social and personal. It gave you a reason to maintain a conversation over time, as your balloon travels from blog to blog collecting points and that.

Kick-off:
June 25th 2008, 30000 balloons were released out onto the Internet. Balloons floating free, being guided by their owners and boosted by their friends. Balloonacy! If you thought Powerpoint was a productivity killer, you were wrong… watching those balloons made the hours disappear.

Along the way, you we’re able to collect 5 stars and gain extra points or a daily prize. Hitting rainbows and getting warped into the future added up to the game experience.

orange_retail.jpg

Finally, it’s also nice to see that the orange balloony animals were presented in retail, and the whole idea ties in with the actual product offer; Orange’s Animal tariffs for pay as you go customers

Visit: playballoonacy.com

Posted on 11.24.08 to Case, Creative, Design, Inspiration, Internet, viral. Subscribe to follow comments on this post.

One comment. Add your thoughts or trackback from your own site.
Return to top

20 Excellent AJAX Effects You Should Know

You as in “our re-enforced and vastly expanding newly moved hotshop”

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

Things like:

TextboxList meets Autocompletion – Ajax IM – LiveValidation – Inline Editing – Ajax Upload – Fancy Upload – ClickHeat Clicks Heatmap – Ajax Mail Form – Ajax Directory Manager – Ajax Email Client – Improve Form Usability with Auto Messages – qGallery – Ajax Star Rating – CakePHP Ajax Form – Amberjack Site Tours – Prototype UI – Jcrop – jQuery Auto-tabbing Plugin – Sort Table Rows with Ajax – DrasticMap

Via NETTUTS

Posted on 10.14.08 to Design, Geekbytes, Inspiration, Technical, Web 2.0, tips & tricks. Subscribe to follow comments on this post.

No comments yet. Add your thoughts or trackback from your own site.
Return to top

Mentos: Kiss Fight

Prepare for the weekend! It’s kissing time… at Mentos Kiss Fight

Mentos: Kiss Fight

A 2D fighting game (made me think of ol’time Mortal Combat), except instead of punches and kicks, you throw high and low kisses. Kissing while backing up throws fireball kisses, and catching a falling Mentos product automatically activates a special move kiss. If you win the one-round fight by inflicting more pleasure then your opponent, then you’ll finish her off with a special move. The end boss is a cougar, and I managed to overwhelm her only after a couple of tries. Perhaps suitably, kissing her feet over and over proved to be the best technique.

mentoskissfight_2.jpg
mentoskissfight_3.jpg
mentoskissfight_4.jpg
mentoskissfight_5.jpg

Posted on 10.10.08 to Creative, Design, Inspiration, Internet, Web 2.0, viral. Subscribe to follow comments on this post.

No comments yet. Add your thoughts or trackback from your own site.
Return to top

Nokia – Ma headset design

Submit your headphone design to the competition!

Nokia Headset Design

You design it. They’ll make it.

Nokia is giving you the opportunity to design your own headset inspired by a piece of music. So whether you use our Style Palette or choose to Freestyle, your chance to show the world your talent. Designs are uploaded to the Gallery where the public is able to award stars to their favourite. The 10 designs with the most stars are short listed and then put forward to our judging panel of music and design experts.

The 5 winning designers will be invited to travel to the UK where they will see their concepts produced into bespoke fully functioning Nokia headsets. The collection will then be showcased at flagship stores all over the world and returned back to the winners for them to keep.

Posted on 10.09.08 to Design, Inspiration, Internet, Web 2.0. Subscribe to follow comments on this post.

No comments yet. Add your thoughts or trackback from your own site.
Return to top