The Winning Match
The Winning Match is a web-based augmented reality experience brought by Lay's and Pepsi, engaging fans with world view AR and interactive game play with CG versions of the world’s biggest football stars.
The experience lets users pass a virtual football back and forth with CG rendered versions of champions from Men's UEFA and UEFA Women's football.
ROLE
Lead UX Designer
The Goal
In this case, the main objective was to create a web-AR gamified experience, where users could interact with CG versions of their favourite players.
From a UX point of view, the experience had to be simple in terms of onboarding, so users could go straight to the game, and engaging, so they would come back and try the other football players.
Regarding this, the game didn't involve complex mechanics or a difficult learning curve. By creating a simple back and forth of the ball, and a very simple interaction, users quickly got a sense of achievement.
The Role
As the lead UX/UI designer, my role involved converting the brief into an achievable experience. This included defining the user journey, with a special focus on the onboarding and the AR setup.
Working with 8th Wall made this very easy, as web AR avoids having to install an app, making the onboarding quicker. However, there was an aspect regarding error managing that had to be addressed.
From a conceptualization point of view, it was essential to design wireframes that illustrated the user journey, to be tested early in the process.
The role also included working closely with the Lead Developer, testing in multiple devices to make sure the experience worked as planned.
Designing for Web AR
There were many considerations to be made within this project due to technical components. Designing for augmented reality has a complexity component for users with low-end devices or without much experience.
This meant that the onboarding, error managing and AR scanning and setup had to be done in a very straightforward but clear way. Once the experience started, users were presented with a standard “Turn on Camera” instructions, that would take them to their device settings in case these were denied.
Once in the experience, users would have to scan their surroundings in order to place the plane tracker. This is essential for the experience to work well, but it is usually open to a great deal of issues like low light or difficulty to find a plane. In order for these to be addressed, defining the experience before the wireframing it was vital, in order to be aware of them and make the further development