Take 2D Apps To Quest - A Journey to Turn Mobile Developers into XR Innovators

Case Study: L+R, Meta

L+R, with a decade of experience creating mobile applications for their clients, is now evolving into spatial computing. As a trailblazer in many emerging technologies, they collaborated with Meta to develop Media View, an open-source media player for the Quest designed to help mobile teams explore XR. By leveraging ShapesXR, L+R streamlined its workflow, enabling rapid prototyping and real-time collaboration, effectively bridging their mobile expertise with spatial innovation to craft immersive user experiences.


Background and Objectives

L+R, a global design and technology consultancy founded in 2012 by Alex Levin and Ryan Riegner, has built a strong reputation for innovation in strategy consulting, design, and digital product development. Operating from offices in Brooklyn and Barcelona, they have served prestigious clients such as Louis Vuitton and Amazon Web Services. L+R’s mission to improve life through design and technology, alongside their commitment to staying at the cutting edge of emerging technologies, led them to explore VR and AR as early as 2015, when they developed the LookSee app for iOS and Android to prototype user interfaces in virtual environments. 

L+R’s previous “Experience Sketches” design system they had developed in 2015 using Adobe Illustrator

Meta approached L+R to collaborate on open-source projects aimed at leveraging mobile application frameworks to develop non-gaming XR applications. Recognizing L+R’s expertise in human-computer interaction and their robust design process for mobile devices, both teams were eager to exchange knowledge. However, as L+R immersed themselves in the project, they faced challenges in communication and design workflows. Their prototyping methods relied on both in-person and virtual collaboration, often revisiting foundational tools like Adobe Creative Suite and a proprietary mockup framework they had initially developed in 2015. This fragmented process—from early sketches to high-fidelity UI screens—created a significant gap between 2D designs and fully realized 3D spatial environments, resulting in inefficiencies and limited iteration.

L+R’s used Adobe Photoshop and After Effects to mockup concepts for design, engineering and the Meta team before finding ShapesXR

To overcome these hurdles, L+R sought to streamline their spatial design workflow. Their main objectives were to enhance collaboration among design, strategy, and development teams, improve stakeholder alignment (particularly for those without access to spatial computing devices), refine spatial interactions within the development environment, and accelerate rapid prototyping in 3D environments.

In their quest for a more cohesive and efficient workflow, L+R, as trailblazers in the field, discovered ShapesXR, a tool that not only streamlined their design process for immersive experiences but also enhanced collaboration, ultimately enabling them to successfully build the Media View application using Meta's new spatial framework.

“ShapesXR has been essential in helping us prototype spatial designs with precision and collaborate effectively across design, engineering, and strategy to deliver higher value for our clients.“ - Alex Levin, Founding Partner, L+R

Implementation and Use

L+R's implementation of ShapesXR marked a pivotal advancement in their design and collaboration process for spatial applications. The team leveraged the platform’s ability to prototype and iterate directly in a mixed reality environment, which was essential for their work on Media View. This feature allowed them to visualize and test designs in a realistic context without requiring full development, significantly enhancing the efficiency of their workflow.

A key element in their process was the integration of ShapesXR’s Figma plugin, which proved transformative. It enabled L+R to seamlessly transfer designs from familiar 2D tools into the 3D spatial environment, effectively bridging the gap between traditional mobile design and the immersive XR landscape.

Collaboration also took on a new form, with team meetings conducted within ShapesXR. Both in-office and remote team members could join these virtual sessions, creating a dynamic workspace that connected L+R’s global studios and the Meta team. This facilitated real-time communication and problem-solving across time zones.

A defining moment in the project occurred during the design of Media View’s core UX panel. Using ShapesXR, the team prototyped various aspects of the panel—such as dimensions, scrolling orientation, and naming conventions—and tested these with target users, many of whom were new to Quest headsets. This immersive testing environment provided immediate feedback, allowing for rapid iteration.

With ShapesXR’s capabilities, L+R was able to quickly prototype, gather user feedback, validate with engineers, and present polished designs to clients for approval. The ability to extract precise coordinates directly from the ShapesXR prototypes streamlined the handoff from design to development, ensuring accuracy and efficiency in the final build of Media View.

No items found.

Results and Feedback

L+R’s adoption of ShapesXR was instrumental in their transition from 2D mobile app design to spatial computing. The tool allowed the team to leverage their extensive experience in mobile application development and apply their humanistic design principles to spatial computing far more efficiently than traditional methods would have allowed.

The impact on the final design and user experience of Media View was substantial. The ability to rapidly prototype and gather immediate feedback from focus groups and engineers ensured that the final product was both functional and closely aligned with user needs. The app’s UX became contextual and polished, offering users an immersive experience that would have been challenging to achieve with traditional design workflows.

Feedback from users and stakeholders was overwhelmingly positive. Focus group participants, including those new to spatial computing, found the experience intuitive and immersive, praising the ease of navigation and interaction. The Meta Reality Labs team, already familiar with ShapesXR, appreciated its role in aligning on features across multiple planned releases.

Specific features of ShapesXR, such as live meeting modes, presentation tools, and the ability to manipulate objects in real-time during sessions, were highlighted as especially valuable. These capabilities streamlined communication and collaboration, ensuring smooth integration of features across teams.

Following its completion, Media View was published on the Meta Horizon store and as an open-source project on GitHub, with L+R making their Figma and ShapesXR files publicly available as well. To further engage the developer community, L+R also plans to host Twitch streams within their ShapesXR project file. 

The project’s launch at Meta Connect 2024 exemplified L+R’s growing expertise in spatial computing and their continued leadership in immersive design, solidifying their position at the forefront of this rapidly evolving field.