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.
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:
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.
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.
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.
Gatherings are communities where everybody is connected to everybody
It's about interaction and the exchange of ideas
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.
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.
The visual system that emerged from this phase allowed us to bring a much higher consistency to all of our branding materials. With a robust visual system in place, It was much easier to execute and develop a design system that used these principles but focused exclusively on the UI elements and product behavior. Additionally, the strategy document we produced brought clarity to product teams, providing them with a clear direction on how and what to work on next. Taking a step back allowed the whole product team to see the same picture. The strategy document has had a direct impact on bringing the product from a challenging position to regaining momentum after its original release.