Wonder

Building a foundational visual language and product narrative

Context

Wonder is a new solution to video conferencing that allows large groups to meet online in a way that is more organic and free. Wonder's spatial UI enables participants to escape the rigidity of the video grid system found in applications such as Google Meet and Zoom. I was part of the founding team and worked to bring the product from a small audience to a post-market fit stage. During this period, I was a principal designer and oversaw different aspects of the product experience, such as product strategy, design execution, and design hiring.

Problem

Wonder needed a clearer product strategy, and our design system had accumulated considerable debt. During the early days, the project grew organically without a clear focus on a particular user group. But this lack of direction made it difficult for project teams to execute new features. After many product iterations, Wonder's visual language was inconsistent, which impacted the product experience by making it difficult for designers to expand on new interaction patterns.

This problem had three major consequences:

1. Lack of clear direction impacted execution speed

We knew we had created something that solved many users' problems, but product teams needed clarification on what to execute next. Conflicting product strategies slowed product development substantially.

2. The lack of clear user focus made the experience overly complex

We had too many user groups we were designing for with a diverging set of needs. We needed a clear thesis about what user groups to focus on and why. Because of this, the product became unnecessarily complex and hard to use.

3. No unifying design language

There was no single unifying direction from the core product experience to many different product touch points. The lack of clear design language impacted the product quality and user experience.

Role

As a principal designer, I identified these problems and worked to communicate them across the product teams to highlight their importance. Following this phase, I led the three projects to address these points. The first project focused on establishing a clear product narrative and how it came to light through visual language and brand. For the execution of the brand guidelines and visual exploration, I worked with folks at Design Studio to bring our values, principles, and strategy to light.

Process

We began by investigating and collecting qualitative and quantitative data about the product, competitors, and broad industry trends through workshops and research artifacts. We looked at the competition and tried to understand where we could position ourselves in light of the growing competition. We talked to our users to understand significant usage differences to identify opportunities for us to focus.

Following our immersion phase, I worked with product teams to overlay all the data points we had gathered to create a more comprehensive product narrative that included product strategy and visual design elements. Most importantly, I worked with product teams to identify where we disagreed so we could sharpen our reasoning by considering different ways to understand our problem space and opportunities. This helped to create a more robust product thesis that gave us the confidence to execute in the short and mid-term.

Design Execution

Visual Explorations

After we had synthesized our values and core value proposition, it was time to bring them to light. To better understand how we could activate our core product narrative, we created two initial directions and tested their resonance with our users and stakeholders.

The Power of Many

Concept 1

"
Gatherings are communities where everybody is connected to everybody

"

Color and Type

Energy as Exchange

Concept 2

"
It's about interaction and the exchange of ideas

"

Motion

Color and Type

Final Brand Strategy

Brand Guidelines

"
We empower people with virtual spaces and tools to shape incredible gatherings that leave everyone energized.

"

Following these three explorations, we gathered feedback about what worked and didn't work to converge on a single idea that combined elements from our initial brand explorations. I worked with visual designers to guide the creation of our foundational visual system. Our challenge included balancing the simplicity and elegance that our UI elements required with the vibrance and playfulness that brought our core product message to light.

Wonder's custom wordmark embodies the energy we aim to catalyze within our users. It is playful and sophisticated, and we've carefully crafted its design to be optimized for digital use.

A robust visual language

The final system was tested across many applications to validate its robustness, but the final output left a lot of questions answered. We tried our new system across UI elements, but these were only experiments rather than a fully-fledged UI system. Instead, I chose to split this work into two independent steps to increase focus from the team. The creation of a UI design system added too much complexity to an already large project scope.