Wonder

Redesigning Wonder's spatial model to create a more human experience

Wonder is an online gathering tool that seeks to create the best experience for large audiences to meet, socialize, and attend presentations online.

Role

Principal Product Designer/Head of Design

Challenge

Wonder's original spatial model was limited, which prevented hosts from adopting Wonder as their go-to conferencing tool. The conversation model was innovative at the product's beginning, but due to growing competition, it failed to deliver a unique experience.

Contributions

I worked from problem definition and research to design execution to deliver a new UX that solved the existing limitations and created a more engaging gathering experience for hosts and guests.

Impact

Hosts found the new model much easier to use and adopt. For guests, the new model enabled a superior feeling of presence and a more engaging UX closer to face-to-face gatherings.

Problem & Context

Google Meet, Zoom, and other online conference tools are suitable for meetings and presentations but don't allow participants to interact freely. Wonder pioneered the spatial model where participants could move freely and start new conversations, but its UX needed a significant redesign.

Process

During this time, I interviewed users to learn how they interact online and what is easy and hard to understand. For example, 1/3 of our user base found Wonddr's UX challenging to learn. Unlike 2D layouts, spatial interfaces are relatively new, posing unique design challenges.

Competitors like Gather Town took inspiration from early computer games, but the result is a UX that is hard to use and understand.

User insights

I focused on structuring granular user insights into individual core problems. Below is a summary of the significant issues I mapped using compiling qualitative and quantitative data.

The circle model created engagement problems

    • Circles weren't inviting to participants.
    • Circles tended to grow to 8-15 participants, which made conversation dynamics unengaging for everyone.
    • The audio was not a vital part of the experience, which made the overall feeling of presence lower for all participants in space.
    • Avatars in space only showed photos; this was a missed opportunity to create a more engaging and human UX through real-time video.
    • It was challenging to know conversation topics before joining a circle, which prevented participants from finding relevant conversations efficiently.

Not flexible enough to enable hosts to create exciting gatherings

    • Wonder's open space was suitable for coffee chats, but Hosts couldn't host more complex gatherings on Wonder.
    • Hosts wished to host many talks simultaneously to simulate small conferences.
    • Wonder's keynote offered nothing new and replicated Zoom's presentation mode.

Balancing agency and control

    • Hosts needed tools to better direct attention in their gatherings.
    • To balance this need, I explored models closer to Miro and Figma, where participants can be brought to a given point in space but can choose to leave if so desire.

Rethinking the role of sound

I wanted to bring spatial sound to the core experience without too much noise. My hypothesis was that background chatter, at the proper levels, can increase the sense of presence for participants as quiet spaces tend to be perceived as "awkward," cold, and unengaging.

Groups, not circles

After much experimentation, I arrived at a solution that prevented large circles from forming by decreasing the level of participants located far away. Participants nearby were always louder.

Intimate vs. shared spaces

Users liked how Wonder allowed them to simulate social experiences, and I wanted to double down on this insight. I began to look for inspiration in how people interact in social spaces such as conferences and bars. Social interactions tend to gravitate around sub-groups of 2/3 people, with many sub-conversations emerging when too many new participants join a small group.

While being part of the whole, sub-conversations are intimate and personal. Sound leaks allow participants to gather context about topics and interests.

To recreate this phenomenon, I experimented with sound and UI together. The final solution allows participants to join groups on many sides and be part of different sub-groups.

Fullscreen

While the new circle mechanics improved engagement, it didn't lead to an intimate experience. To solve this problem, I brought zoom-in/out to create a better space experience. Like Google Maps, I wanted to render the space information differently at different zoom levels.

Fullscreen

While the new circle mechanics improved engagement, it didn't lead to an intimate experience. To solve this problem, I brought zoom-in/out to create a better space experience. Like Google Maps, I wanted to render the space information differently at different zoom levels.

Upon joining clusters, participants would snap around the edges to other participants, keeping a consistent experience between what they see and hear.

The new physics mechanism simplified onboarding significantly. When shown side-by-side, participants understood the new model much more quickly.

Highlighting social cues in space

Interactions in physical spaces are full of non-verbal cues that enable people to adapt better to social situations. It's possible to infer a lot of signals by looking at participants interacting in space. But interactions in virtual spaces are different. Instead, online interactions tend to be transactional and dull, contributing to the "zoom fatigue" effect.

To tackle this problem, I sought ways to bring social cues to the space. I played with rules and algorithms to visualize people's behavior in the space to help participants to understand social dynamics visually. For example, the participant size was dictated by how much they spoke in a conversation. Similarly, I used other elements like the glow to visualize sound activity.

User validation allowed me to confirm that users could create stories about people and how they interacted even before they joined a circle.

Physics

The original Wonder model had no physics dynamics, and the lack of simple affordances affected the participant's ability to quickly create a model of how Wonder worked.

After experimenting with various models, I arrived at the magnet metaphor. In this model, participants were detached or connected to other magnets. Some participants (e.g., Hosts) could have a bigger force giving them special powers to perform some actions.

Upon joining clusters, participants would snap around the edges to other participants, keeping a consistent experience between what they see and hear.

The new physics mechanism simplified onboarding significantly. When shown side-by-side, participants understood the new model much more quickly.

Presenting to Space

Different parts of the application worked differently. The space worked through a spatial model, while presentations used a webinar model imported from Zoom.

I wanted to simplify the app work by creating a closer relationship between conversations and presentation modes. "Present to space" was a solution that allowed me to create a consistent spatial and consistent behavior.

I explored space actions that allowed hosts to bring participants closer to their location. This solution enabled many presentations to happen in space at the same time, which fulfilled the most asked feature on Wonder's feature request board.

Fullscreen immersion

Similar to the conversation view, presentations can be maximized while maintaining the participant's location in space. Spatial sound helps to create a much more immersive experience where attendees can quickly see who's on a call to increase the feeling of emotional connection with others.

Product impact

Instead of joining circles without prior context (old model), users could now feel and understand interactions before joining a group, which helped them to find the right participants or groups to join.

Participants could also overhear conversations near them, which gave them more opportunities to start new conversations with people they didn't know. These changes increased average conversation time and reduced new participants' churn.

From quantitative data, I concluded that the new conversation flow was 2x more engaging, enabling participants to have more focused conversations with fewer interruptions.

The new format created a consistent experience between conversations and presentations, delivering a much more human and engaging UX when in full screen. Users mentioned the ability to feel closer to other attendees by being able to see all participants in a presentation.

This new mode also allowed new gathering types on Wonder, unlocking many more use cases for the product.