Wonder

A massively multiplayer online workspace for video conferencing and collaborative work that reimagined remote gatherings through spatial interfaces and natural group dynamics.

Most video conferencing tools flatten human interaction, losing the subtle social cues, spatial awareness, and fluid group dynamics of real-world gatherings. Wonder‘s core premise was spatial — using avatars in a shared virtual space. But how do you build an interface on this metaphor that feels genuinely intuitive and socially alive, especially at scale (Wonder could accommodate hundreds of users simultaneously)? The challenge was twofold: establish a coherent design system for the basic UI, and then design a deeper interaction layer that could translate the nuances of physical co-presence — proximity, group formation, conversational energy — into the digital realm.

The work proceeded in overlapping phases, involving a collaboration structure that shifted over time. Ricardo Saavedra, Wonder‘s Design Lead at the time, brought me into the project. Initially, the core team focusing on the design system transition included Ricardo, myself, and designer Son La Pham. Ricardo provided essential context on the existing product and brand goals. Son and I undertook a thorough design audit and formulated the core goals for the new design system, focusing on bridging the brand identity with functional UI needs.

Following this, Son La and I implemented the foundational layer — crucial for consistency in standard UI elements like buttons, menus, and chat interfaces. This involved defining the token system (colors, spacing, typography), establishing core component patterns, and setting accessibility standards. Son focused significantly on developing concrete examples for these UI elements, ensuring the system provided reliable building blocks while I focused on the lower level primitives. More details on the design system work can be found on Ricardo’s portfolio.

While the foundational system addressed standard UI consistency, the unique spatial nature of Wonder demanded something more — an interaction language for the spatial experience itself. This layer existed conceptually below or parallel to the conventional UI components. How should avatars move? How should conversations form and dissipate visually? How could we represent presence and activity? My primary focus shifted here, developing a set of “Kinetic Principles”, informed by proxemics and based on some of my ideas about Embodied Interface Design, aiming to translate physical social behaviors into digital mechanics:

This kinetic layer aimed to make the digital space feel alive, responsive, and guided by our innate social-spatial intuition. The goal was to create an environment where social dynamics could emerge visually and intuitively. Ricardo and the team at Wonder took my initial input further to develop a beautiful spatial experience.

The foundational design system provided the Wonder team with the consistency needed for efficient development. The kinetic principles I developed offered a detailed blueprint for the unique spatial interactions intended to define the Wonder experience.

After my direct involvement concluded, Ricardo managed the handover and led the internal Wonder design and engineering teams in the subsequent, challenging work of integrating these kinetic principles deeply into the core product. This involved significant technical effort, including the implementation of features like spatial audio which were crucial complements to the visual kinetic system, aiming to create a truly immersive and socially nuanced online gathering space. While the kinetic principles originated in my work, their successful implementation was a testament to the efforts of the entire Wonder team that followed. Some of these kinetic ideas also influenced later experiments with physical controls in Trails.