Coors Banquet’s Reno Rodeo Bucking Bull WebAR game showcasing bull riding in support of Reno Rodeo.
To create a fun game to engage Coors Banquet’s website visitors as well as Reno Rodeo’s attendees utilizing WebAR.
Approach + Deliverables
Reno Rodeo was taking place within 2 months of project kick-off, so the game needed to be completed before its commencement. The initial part of the process was defining the user experience along with game specifications and rules. Once the main functional game components were designed, 3D rendering and animations were composed.
User Pain Points
By conducting a comparative analysis of existing bull-riding games, we were able to pinpoint what had already been done and what was enjoyable for most users based on their reviews for the existing games. In addition, it exposed us to ways of implementing controls and gameplay. The biggest opportunity available was the fact that none of the games were using AR as a component of their gameplay.
Pain Points + Tech Limitations
Time constraints for project completion
Using the camera at the same time that the game is being played
Hindering user experience by having to turn on gyroscope and accelerometer in iOS
Limited screen space for gameplay and required UI
Developing the game narrative was the initial part of the design process as it allowed us to dive into detailing what the game goals, controls, rules and outcomes would be.
The most important component of the game was probably the controls as it defines the entire experience in the game. We explored several options within our technical constraints.
Meter + Gyroscope
Our initial game control was going to be a meter which the user would balance with the gyroscope component of most mobile phones. By keeping the meter marker in the middle the bull rider would be kept balanced.
Meter + Arrows
This set of controls would still incorporate the meter but be controlled by tapping left and right arrows repeatedly to keep the meter marker in the green and keep the bull rider on the bull for as long as possible.
Joystick + Meter
Similar to using a meter and arrows, this type of game control allowed the user to gauge their control with a meter but provided an alternate to the gyroscope by using an onscreen joystick.
Buttons + Strikes
These set of game controls were the final set of controls decided on. There are 4 onscreen buttons which need to be pressed before they are no longer lit, this would get progressively quicker.
Game rules were heavily dependent on game controls but all stayed within the same goal which was to keep the rider on the bull.
The goal - To keep the rider on the bull for as long as possible.
Tap - Tapping each on-screen button within the time allotted to avoid obtaining a strike.
Three Strikes - After three strikes, the rider falls off the bull.
Optional - Player places initials and time on leaderboard.
Optional - Player may share screenshot of their time and gameplay to social.
Initial User Flow
The initial user flow had several different functions and components that were not included in the final product. The goal of the game remained the same where the user needed to keep their rider on the bull for as long as possible, but the initiation of the game changed several time due to technical constraints as well as ease of use.
The initial user flow took the user from Coors.com to the game’s overview and instructions, where they would be instructed to use the camera to launch the game using image recognition by pointing the camera finder at a Coors Banquet logo. This portion of the flow changed in the final iteration of the user flow to create a quicker introduction to the game.
Final User Flow
The final user flow took the user directly to a game splash screen from Coors.com followed by a screen which directed the user to rotate their phone to landscape for optimal game play.
There were 3 rounds of usability testing before testing the final product, the first being a test of the interactive prototype created using XD. This round was put together to assess game play flow and overall UI functionality.
The second round of usability testing was conducted using a web prototype using minimal components excluding the AR component of the game which was the 3D animated bucking bull and rider. This round proved to be insightful to both myself as the designer and the developer as we discovered limitations within several mobile browsers.
The third round of usability testing included the camera functionality which allowed users to bring in the AR component of the game. This round brought the game UI and 3D animation together which affected usability testing greatly. We found that users were challenged more after adding the 3D animated bucking bull as it posed a greater distraction than the initial prototypes which only included a still image of a bull and a rider. In addition, the leaderboard and sharing feature were added to the end of the game which made for a more competitive, engaging and shareable experience.
There were several iterations for game play functionality as well as UI components. Given that the main platform was mobile, we had several constraints that we did not foresee during the design process. Implementing the designs on the web across several browsers proved to be a challenge in that each screen varied per user and OS.
The actual components necessary onscreen to allow the user to control the game as best possible were revised several times to create the most intuitive experience, while creating a competitive but quick game that users would be inclined to share and play again and again.