Case study
Meta RWC Reels Booth
Designing a social experience at the Rugby World Cup 2023 fan village.
Experience Designer
June 2023 - September 2023
Context
As part of a larger Meta activation at the Rugby World Cup 2023, UNIT9 designed and implemented an Instagram Reels booth in the heart of the fan village in Paris. Working with another UX designer, my main responsibility was to design the booth experience.
The Rugby fan village in Paris where the booth was placed.
STEP 1
Understanding the context: the fan village, its people and its experience.
About the fan village
With yet little information about the context, our team requested a maximum of information about the upcoming fan village at Place de la Concorde in Paris, and the people that were expected to attend the event. We were provided floorplans and imagery by the Mairie de Paris to gain knowledge about the event, and inform designs in the next steps.
Visuals and floorplans of the fan village under construction.
An initial user journey to gain understanding
Using a user journey template I created for the UNIT9 UX team and based on our limited knowledge of the event, I quickly drafted an initial journey mapping of the experience. This already helped us to look for possible pain points and experience opportunities of the booth experience and ensured client alignment with Meta and our project partner Auditoire.
Note: To better empathise with guests of the fan village, I would have spent time to research about rugby culture, rugby fandom, traditions and history of the sport.
Planned journey of the experience, with experience considerations.
STEP 2
Designing the overarching booth and service experience.
From user journey to service mapping
Together with my colleague UX designer Justine Quirin, we felt like the drafted journey wasn't holistic enough to include every aspect of the experience. This led us to transform it into a service blueprint, including user-facing brand ambassador (BA) actions, backstage BA actions and support processes - and more potential pain points and opportunities. While working on the journey, I got the idea of using seemingly long waiting times as an opportunity to explore other Meta branded activations at the fan village, for example the Meta lounge or the Meta AR filters, which leads us to the next step of the process.
Design method: Service blueprint
Service blueprint, including user-facing brand ambassador (BA) actions, backstage BA actions and support processes.
Spatial design
With the service touchpoints taken into account, I sketched different spatial configuration options for the booth. The challenge was to find a configuration that is technically feasible, ensures an efficient flow of guests, and provides a good experience for both guests and brand ambassadors. Our product designer then took the selected configuration as a basis and made a 3D model presented for our partner Auditoire, responsible of the physical production of the booth.
Spatial 2D layout designed by myself, and 3D representation designed by Yu-Chang Chou.
Evaluation of a queuing system
To allow guests to explore other parts of the Meta branded activations while waiting for their turn at the booth, I designed and evaluated different options with the team. I first thought of a number-based queuing system, inspired by e.g. medical services in hospitals which provide guests a unique number that is then called. I also thought of a more accurate, but more complex real-time countdown showing the guest's place in the queue. But the more I talked with technical and production teams,, all while considering the service journey, the clearer it became that we shouldn't create new issues with an additional system - to which both the client and the production team ended up agreeing to as well.
Exploration of the numbered queuing design using wireframes.
STEP 3
Designing the multiple touchpoints.
1.
The mobile web interfaces
The experience is simple: score a try, celebrate, then show your best pose! I iteratively designed a mobile web app that allows guests to customise their experience and their Reel content. After scanning the site-specific QR code, the guest first learns more about the experience, then pick a team mascot and finally, select the celebrations they want to perform with the mascot. To communicate design intents, I used wireframes with written details alongside a flowchart.
Flowchart and examples of wireframes designed for the web app.
2.
The booth screen
After the mobile web app comes the larger screen inside the booth. This is where the chosen mascot appears and all of the instructions are displayed. This is also where the guest is filmed during the experience. Again, I showed design intents using wireframes with written details, and a flowchart.
Flowchart and examples of wireframes designed for the booth screen.
3.
The editing tablet
Finally, the guest discovers their recorded content and assembles their Rugby Instagram Reel using specific editing stations, strategically placed at the exit of the booth. For the Reel editing interfaces, I chose to take the native Instagram Reel editing interface and translate it into a tablet version.
Flowchart and examples of wireframes designed for the editing tablet.
4.
The brand ambassador admin tablet
To pilot the guest experience, my colleague Justine designed a tablet experience that allows brand ambassadors to generate the right content on the booth screen and control the experience in case of an issue. Thanks to the service journey considerations, we strategically implemented additional features such as a help guide, support contact, start-of-day and end-of-day checklists to ensure a good maintenance of the booth.
Flowchart and examples of wireframes designed for the brand ambassador tablet.
STEP 4
Testing and iteration.
Planning the experience testing
With a lot of assumptions and uncertainty involved in the design process, it was essential to test the experience. But with little time and scope allocated for testing, this had to be done quick-and-dirty. Using the approved spatial configuration with measurements of the floorplan, I created a physical prototype of the booth and interactive prototypes of the guest-facing interfaces. The tech team developed a low-fidelity camera capture and QR code experience. Finally, I prepared a series of questions to ask participants after the testing session.
Testing the low-fidelity Unity implementation of the camera recording with the green screen.
Conducting the test
With a pool of 7 people as guests and ourselves as the brand ambassadors, we got to try out a low-fidelity prototype of the experience. One-by-one, each guest went through the pre-selection on their smartphone, then the booth with a brand ambassador, and finally the reel editing at the editing station. At the end, we collected opinions in the form of a focus group facilited with a series of prepared questions.
Note: It would have been preferable to conduct the test with real rugby fans for more accurate findings.
One of our participants using the multi-touchpoint low-fidelity prototype.
Take-aways and iteration
The test allowed us to learn early on about aspects that could show improvements. For example, the duration of each step on the booth screen was considered too long, the editing of the reel was confusing, and participants felt shy dancing and editing in front of other people. As a team, we took each of these observations one-by-one and evaluated the best way to iterate our design, together with the client, to balance user experience with brand goals.
Results
After iteration of the experience design - the visual design, development and tech teams took over the project to work on a high-fidelity build and implement the booth at the fan village in Paris. While we couldn't observe the experience on-site during the Rugby World Cup 2023, the client highly praised the experience design of the project after it was tried by project partners and guests of the fan village.
The wider Meta zone of the fan village, where the booth was placed.
Footage of guests inside the booth.
Examples of interfaces used in the final digital designs.
Credits
Production: Manuela Mesrie
Project Management: Charlotte Favre
Creative Direction: Kate Lynham
Creative Lead: Xuhao Yuan
UX Design: Sebastian Ervi, Justine Quirin
UI Design: Rafal Mierzejewski, Eduardo Amorim
Tech Lead: Daniel Castano, Riess Phillips, Richard Drake, Javier Velazquez Traut
Development: Richard Drake, Tiziano Casu, Andre Mattos, Marcin Kulwicki, Alvian Kurnianto, Patryk Ordon
Hardware Tech: Hugh Boys, William Eden
Art Direction: Chris Christinakis
Physical Design: Yu-Chang Chou
3D: Tony Landais, Daniel Kravchenko, Riccardo Carusi
2D: Ramis Ahmed, Jessica Pezenti, Vero Gomes
Quality Assurance: James Stokes, Helen Peake, Fabrizio Rossi, Pani Nicola, Stephanie Thorpe
And next?
Sebastian is interested in designing more experiences for public spaces and communities within the realm of urbanism, art and live performance.
You can connect with Sebastian on LinkedIn or get in touch with him directly by e-mail.