TTC Labs - Immersive co-creation: Pioneering XR prototyping for the metaverse

Immersive co-creation: Pioneering XR prototyping for the metaverse

Maria Clara Angel Villa

Senior Interaction Designer, Craig Walker Design and Research

In collaboration with TTC Labs at Meta, Craig Walker Design and Research developed a methodology that allows people to step away from the screen and into three dimensions.

A body-based data card to prepare people for XR prototyping

Why we needed a new methodology for XR prototyping

At Craig Walker Design and Research, we have extensive experience prototyping 2D interfaces, physical products and digital services. But when it came to extended reality (XR), we found that existing approaches to co-design and prototyping didn’t account for the particular qualities of the metaverse.

Metaverse experiences incorporate depth, scale, 3D user interfaces and multi-person social interactions, as well as new data types generated from the human body.

Together with TTC Labs at Meta we developed and tested a prototyping methodology that incorporates these unique aspects. This methodology enables designers, stakeholders and workshop participants to collaboratively explore use cases and design challenges, creating resolved XR prototypes and high-fidelity UX design patterns.

Workshop participants engaged in XR prototyping

Creating an XR co-design methodology

Sketching ideas and drawing wireframes is an effective, accessible way to co-design 2D user interfaces, such as those found on phones and computers. Similarly, cardboard and other physical materials can allow for the translation of group ideas into tangible designs for 3D products and services.

The challenge with XR is finding the equivalent of these approaches.

To do this, we knew we needed to go beyond static 2D wireframes and 3D mock-ups. That’s why our focus shifted to narrative methods like storyboarding and scripting

Workshop participants storyboarding their solution

By accounting for time, storyboards and scripts help people to step away from the screen and think in three dimensions. Like sketching, these methods are easy to follow, allowing for a diversity of design abilities in the workshop.

These methods proved effective for depicting 3D interactions, providing participants with an easy-to-use format for expressing, critiquing and iterating ideas before settling on a solution and bringing it to life.

This is the point where workshop participants need to stage their solutions — performing and recording their prototypes, and editing these recordings as required. Creating recordings allows groups to capture depth, perspective and time in their solutions. Using their bodies, participants can show the presence of the user within an experience as well as their interactions with other people in the metaverse.

Together these methods form the basis for XR prototyping: storyboarding, scripting, bodystorming and creating recordings. They allow people to create and test ideas, refine and document solutions, and show how their prototypes work to people outside their workshop group.

XR Prototyping Kit

Workshop participants can be supported to conceive and represent their solutions with an XR Prototyping Kit. The items in this kit don’t need to be prescribed, but can change and evolve to fit the needs of a particular workshop or co-design setting.

XR Prototyping Kit

Encompassing a variety of objects and materials, an XR Prototyping Kit may include:

  • Transparent sheets to depict floating messages and interfaces in 3D space
  • Colored sheets to build surfaces and objects
  • Artist mannequins to show people in space
  • Goggles and glasses to stand in for AR devices and headsets
  • Balloons, tubes and polystyrene shapes to use as floating objects and elements.

XR Prototyping Zone

Defining an XR Prototyping Zone — marking out an area on the floor — is a great way to get participants to start acting out their solutions, while also creating boundaries for them to work within.

These zones encourage participants to use depth and perspective when developing, bodystorming and enacting their XR prototypes.

As with the physical props in the XR Prototyping Kit, these spaces encourage workshop groups to move beyond device-based ideas and into spatial solutions that more closely simulate the feeling of the metaverse.

The XR Prototyping Zone in action

Getting the co-design foundations right

Before jumping into workshopping and prototyping, we recommend that participants have the opportunity to understand and reframe the challenge they are solving. They should also be provided with tools to empathize with the users they are designing for.

Tools like personas and scenarios are crucial for helping co-design participants develop relevant solutions. They also support our work as facilitators and design-researchers, improving our understanding of context-specific use cases and helping us derive high-level themes from workshop outputs.

To prepare participants for XR prototyping, it’s important to ensure they have a shared understanding of augmented reality (AR) and virtual reality (VR) technologies and how they can be leveraged to create new experiences.

In addition to this, they also need to know whether they are being asked to co-design for existing technological capabilities or future hypothetical experiences.


An approach we found particularly effective for preparing workshop participants was to create VR scenarios that enable participants to walk through an experience as if they were the user.

Creating such scenarios requires imagination, time, budget and technical expertise. The benefit is that they immerse participants in the experience, allowing them to gain a first-hand idea of the capabilities of XR technologies.

One example of a persona and scenario we created is a busy mother who takes a financial planning course in VR. In her scenario, she shares her body-based data to receive recommendations for improved learning.

We observed that when participants were immersed in this scenario, they were better able to empathize with the persona and think about the specific concerns she might have in that situation. This allowed them to develop more specific XR prototypes in response to their design challenge.

Workshop prompts

Participants can be provided with prompts to help them adopt an XR mindset when creating prototypes. Some helpful questions might be:

  • What is the purpose of this feature? What does it do?
  • Where is this feature positioned in relation to the user? (e.g. above, below, right, left, near, far away)
  • How does someone interact with this feature?
  • How do people interact with each other in relation to this feature?
  • In what moments is this feature available to people?

Creating high-fidelity XR design patterns

The methodology described above enables people to produce detailed, conceptually resolved prototypes. However, because of the form of these prototypes – recordings of workshop participants acting out interactions – they tend to lack the same level of polish as 2D designs.

To achieve a greater degree of aesthetic fidelity, we took the process a step further, turning these prototypes into 3D animated design patterns.

Still image from a 3D-animated design pattern

Working with Supermarket, a design and development studio specializing in 3D products and services, we refined workshop prototypes into high-fidelity design patterns that use 3D objects and characters to capture the depth, scale and time of the original solutions.

Creating these design pattern animations requires additional time and budget, but it provides a set of high-fidelity outputs suitable for project documentation, publication and even as the basis of further research.

Executed well, 3D design patterns should capture the key concepts and ideas of workshop solutions and co-design findings, bringing them to life with even greater clarity than the original prototypes.

Key takeaways

Designers and product makers are increasingly exploring how to create engaging and immersive metaverse experiences that meet the needs of diverse groups of users.

In collaboration with TTC Labs at Meta we developed and tested a methodology that enables people from a range of backgrounds and with different levels of design expertise to come together and prototype interactions for these experiences.

We offer this co-design methodology for other designers, researchers and product makers to use in their own collaborations. It is intended to provide an accessible, easy-to-adapt approach for exploring different design challenges.

We look forward to further testing and refining the methodology, contributing to the creation of inclusive XR and metaverse interactions and experiences on future projects.

Maria Clara Angel Villa

Senior Interaction Designer, Craig Walker Design and Research

TTC Labs is a cross-industry effort to create innovative design solutions that put people in control of their privacy.

Initiated and supported by Meta, and built on collaboration, the movement has grown to include hundreds of organisations, including major global businesses, startups, civic organisations and academic institutions.