Website. ANIMATION. Marketing.
Xbox: Every 60 Seconds
An Xbox One X is up for grabs every 60 seconds.
Microsoft (in partnership with PepsiCo & Frito-Lay) wanted to build buzz around the launch of the new Xbox One X console by giving fans a chance to bid and win an Xbox One X - every 60 seconds - before the public sale. The core challenge was designing fair gameplay that deterred bots, cheaters, and sweepstakes junkies.
Our goal was to design and build a robust, fraud-proof auction system and marketplace that rewarded users with 6,000+ consoles and gaming prizes for banking codes from MTN DEW® and Doritos products. HYFN was a great partner for this project as we previously built an online auction system for another Frito-Lay brand (Tostitos) and were able to apply the learnings from the past project. We have also worked with the Doritos team on various projects over the past couple of years and were a trusted partner for them in executing high-profile digital solutions.
CLIENT
Microsoft, Frito-Lay
Year
2017
AGency
HYFN
Role
Creative Direction, Strategy, Design, Animation
Rethinking the auction system.
A per-prize auction system creates a single auction interface for each prize SKU available each night, simplifying the UI and interaction required to participate. Each prize has a leaderboard that corresponds to the number of auctions for the prize that night. When an auction closes, the person at the top of the leaderboard gets the prize and everyone else moves up the leaderboard. Users don't need to be concerned with which particular auction it is when bidding; their bid applies to all auctions tonight for that prize. It also replaces mindless clicking with genuine strategy, opening up opportunities for useful data visualization.
Gamified User Interface
This site required a lot of information to be displayed at once, which called for a dashboard structure. But instead of designing a standard dashboard, it was skinned to reflect common gaming themes. It was important for the site to not only be useful in the information it provides but to be gamified and engaging for users to interact with. For this reason, we approached the site with darker & techier aesthetics and used animation to keep the frequently updated content engaging and emphasize information when most relevant.
A good portion of the site’s aesthetic took inspiration from the Xbox One X launch video, but we also pulled inspiration from all kinds of existing design patterns in the gaming community. This includes things like heads-up displays, dashboards, etc.
The design required an extremely high level of attention to detail. The auction has so many potential outcomes that it was important for both design and dev to think out all possible outcomes and design for that state. In addition to all these states, we needed to make conscious decisions about how interactions animated. There was so much information that needed to be laid out on a single page, that we needed to use animation and transition states to help bring clarity and attention to what was most important. This includes things like placing a successful bid, dropping down a spot on the leaderboard, or being alerted that you’ve been knocked off the leaderboard entirely.
CREATIVE
Nick Boes
Geoff Roseborough
Kruise Sapstein
Austin DeHaven
Jasmine Pae
Tyler Burton
production
Susan Kirksey
Kim Howe
Engineering
Daniel Leavitt
Aaron Buchanan
Troy Curnel
Alex Lamb
Tom Krenzke
Alvin Chan
Owen Masback
Melanie Windh