Wonder

Creating a fully fledged
design system for Wonder

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

After completing the brand guidelines and product narrative, we had a clear path of where to take the product and well-thought-out brand guidelines. But to have a substantial product impact, we needed a design system that helped product managers, engineers, designers, and researchers to have one shared vision of how design problems should be solved. The combination of micro-interactions, information architecture, motion, icons, and look and feel all helped to make Wonder's mission of bringing people together in ways that feel more natural a reality.

Role

After leading the design and execution of our new branding system, I led a team of two designers through the evaluation, experimentation, design, and validation of a fully-fledged design system that considered the end-to-end product experience. The result allowed us to speed up product execution and elevate the product experience.

Design Systems

A design system is a set of tools and resources that help the team confidently make decisions. Design systems help bring consistency to the product experience by elevating the user experience and increasing the speed and efficiency of designing and building products. They are a source of truth and a system of record for our design decisions while also helping to protect the brand. Sound design systems often go beyond the rules to also include the why, when, where, and how.

Goals

1. Building and maintaining the new brand: The design system is how the brand speaks: a language and a set of tools specific to Wonder. Like any other language, sometimes it is loud, sometimes it is soft, sometimes it is pragmatic, and sometimes it is fun. A design system allows for new things to be added to this language while still adhering to the whole.
2. Bigger than the sum of its parts: To have the product impact we desired, I wanted to look at the brand not only as the logo SVG and colors but as the sum of the experience users have with Wonder at every point, from the Button microcopy to Direct mail. Combining visual design language with other assets (motion, illustration, copywriting) creates a brand that feels unified, coherent, and true to the brand proposition. To create this sense of unity, I first worked to identify the gaps where we can add interactions that bring the experience and the brand together (i.e., more 'alive'). It was essential to focus on both functional elements and the emotional and purely aesthetic aspects of our system to create a coherent experience that matched the brand proposition we had identified earlier.

Process

Instead of setting ourselves to build an extensive design system at first, I focused on delivering the equivalent of the minimum viable design system that allowed the project to gain traction in the team. Because of the high cost of developing a design system, from visual design to engineering, I wanted to keep the project scope in line with product outcomes and wider company goals. It's always easier to expand on a design system once the value it produces across an organization is clear to all produsct stakeholders.

1. Understand and map: The first one focused on understanding and mapping the gaps between the product experience we wanted to create and the users' current experience with the product. We conducted interviews with users and conducted workshops with product stakeholders to take their pain points and perspectives into account.
2. Principles and guidelines: In our second phase, we translated what we heard into principles to guide us in the execution phase. We presented the outcome of this phase to key stakeholders to ensure we were aligned. For example, we needed to resolve the tension between function and aesthetics to define a guiding principle in how to use brand elements to communicate personally and facilitate ease of use from a usability perspective.
3. Build and validate: In the final phase, we used everything we learned earlier as guidance as we began our visual design explorations. We conducted small experiments on different parts of the product experience to build a cohesive set of rules. We looked into type, layout, and spacing across various elements to understand what worked and what elements needed more thought.

Principles and Guidelines

We turned the insights we gathered about the product experience into four principles to help guide our design explorations. These principles were built bottom-up and included the whole product team's input and considerations. We used these principles to clarify the gap between the present and future experience we wanted to create.

Build and Validate

Atomic Design

Aside from principles and high-level design guidance, we broke down the end-to-end experience into small building blocks. We wanted to first start with the smallest blocks, use these small bits, and then assemble more complex components.

Design Tokens

Design tokens are all the values needed to construct and maintain a design system – spacing, color, typography, object styles, animation, etc. – represented as data. These can mean anything defined by design: color as an RGB value, opacity as a number, and animation ease as Bezier coordinates. They're used in place of hard-coded values to ensure flexibility and unity across all product experiences.

We wanted to build a design system based on design tokens. Using tool-agnostic tokens as shorthand, we can be consistent across tools and teams and present consistent rules to UX designers, UI designers, and developers alike.

Design Execution

Once we had a solid base, we began by doing small design experiments to allow us to understand and test how simple rules could be put together to build a more complex set of elements. Every designer created a proto-design system to generate a wide range of options. Our goal was to use simple rules and elements to build more complex components and layouts to see how they behaved. For example, I made experiments that focused on communication (Website) as well as heavy UI work (Meeting Experience). I explored color contrast, spacing, layout, tone of voice, and typographic hierarchy across many elements.

We showed these experiments to the team and presented them to users to validate usability, contract, and look and feel. From the experimentations of all three designers and the feedback we received from the team, we created a final system of building blocks we could begin in a short time frame.