Web Design, Motion DesignXbox: Every 60 Seconds
Microsoft (in partnership with PepsiCo & Lays) wanted to build buzz around the launch of the new Xbox One X console by giving fans the chance to bid and win an Xbox One X - every 60 seconds - before public sale. The core challenge was in designing a fair gameplay that deterred bots, cheaters, and sweeps junkies.
ClientMicrosoft
Pepsi
Lays
AgencYHYFN
Year2017
RoleArt Direction, Motion Design
I
The AskBuild Excitement for the launch of Xbox One X Launch
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 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 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.
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 leaderboad 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 opportunity for useful data visualization.
Homepage ScreencaptureII
DesignA Gamified User Experience
Rethinking the Auction SystemThis 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 updating content engaging and emphasize information when most relevent.
AesteticsA 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 comunity. This includes things like heads up displays, dashboard, etc.
Platform AnimationDesigning for Every ScenarioDesign 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.
III
MotionUsing Motion to Engage Users
We spent a lot of time building out the homepage animation element. Pulling from the Xbox One X launch video, we built out a motherboard with energy pulsing towards the product lockup centered within it. As auction groups approached their closing time, the energy would ramp up, helping drive home a sense of urgency. This animation required creative use of masking and post processing to stylize the energy along the paths of the motherboard.
Hero AnimationCreativeNick Boes
Geoff Roseborough
Kruise Sapstein
Austin DeHaven
Jasmine Pae
Tyler Burton
TechDaniel Leavitt
Aaron Buchanan
Troy Curnel
Alex Lamb
Tom Krenzke
Alvin Chan
Owen Masback
Melanie Windh
PRODUCTIONSusan Kirksey
Kim Howe