The ask.
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.
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 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.
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 updating content engaging and emphasize information when most relevent.
Aesthetics.
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 comunity. This includes things like heads up displays, dashboard, etc.
Animation.
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.
Designing for every scenario.
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
Tech
Daniel Leavitt
Aaron Buchanan
Troy Curnel
Alex Lamb
Tom Krenzke
Alvin Chan
Owen Masback
Melanie Windh
Production
Susan Kirksey
Kim Howe
Business Development
Ben Cole
Scott Mallone
