About this video

• Video Title: Escha Vera - Designing Perplexity’s Comet and Using AI Like an Artist
• Channel: Dive Club 🤿
• Speakers: Rid (host), Escha Vera (guest)
• Duration: 57:47

Overview

This video features an interview with Escha Vera, the founding designer behind Perplexity's Comet browser. Escha discusses her journey into Perplexity, the process of designing Comet's design system, core AI user experiences, and unique features like generative invite codes and onboarding. She also shares insights on using AI as an artist, the product strategy for Comet, and lessons learned from previous design system work.

Key takeaways

• Designing Comet's Design System: Escha faced the challenge of building a design system from scratch for Comet, as Perplexity's existing system was primarily in code. She created a Figma-based design system for Comet, which later expanded to encompass the entire Perplexity product.
• Prototyping with Code and AI: Traditional prototyping tools were insufficient for Comet's desktop environment. Escha found success using tools like Claude, Cursor, and AI to generate initial front-end code from screenshots, which she then refined.
• Innovative Onboarding Experience: The onboarding for Comet was designed to feel like a special "unboxing moment," inspired by video games, incorporating music and animation to create an engaging first impression.
• Generative AI for Unique Features: Escha utilized AI tools like Midjourney, Civit AI, and FAL to create unique, generative invite codes for Comet's rollout, demonstrating a creative approach to leveraging AI for product features.
• Product Strategy for Comet: The initial strategy for Comet focused on familiarity for a broad audience, akin to parents installing Chrome, to reduce cognitive load and allow users to focus on Comet's AI capabilities.
• Designing AI Experiences: Escha emphasizes "productizing AI" by creating user-friendly interfaces rather than relying solely on prompt-based interactions, drawing from her experience at Descript. She advocates for AI as a tool to enhance creativity and capability, not just to automate tasks.
• Lessons from Past Roles: Her experience as a "lone wolf" designer at previous companies like Descript and OpenTable honed her ability to make independent decisions and establish scalable frameworks, which proved valuable for the initial development of Comet.

1. 00:00:00 Intro
2. 00:01:13 How Escha got to Perplexity
3. 00:03:50 Creating the Comet design system
4. 00:11:34 Prototyping in code
5. 00:15:11 Designing the Comet onboarding
6. 00:21:17 Designing generative invite codes
7. 00:27:36 Figuring out who Comet is for
8. 00:31:50 Designing the core AI UX
9. 00:36:53 Whether or not to have a new tab page
10. 00:38:56 Making key decisions as a designer
11. 00:41:38 Lessons learned on previous design systems
12. 00:44:34 How Escha thinks about designing AI experiences
13. 00:51:41 How to use AI like an artist

Escha describes her initial feelings of career uncertainty after leaving Descript, feeling "unhirable" due to her long tenure on a single product. She spent a year exploring various companies and the AI space, seeking alignment on ethical considerations and robust AI integration. This led her to connect with Henry at Perplexity through a mutual contact, initiating a casual correspondence that eventually resulted in her joining as a founding designer for Comet. She joined on the day Comet was announced, initially unaware of the project.

Here's a detailed breakdown of Escha Vera's experience creating the Comet design system, organized as requested:

• Initial Situation:

  • Upon joining Perplexity, Escha was handed the keys to design the new AI browser, Comet.
  • Her first instinct was to look for an existing design system in Figma to leverage for rapid prototyping.
  • She discovered that Perplexity did not have a design system in Figma; the design system was primarily embedded within the code.
  • Many designers at Perplexity contributed directly to front-end development.
  • Existing Figma files were present but lacked a centralized component system, with designers often creating components as needed.

• The "Code is Law" Philosophy:

  • The company operated under a "code is law" principle, meaning the design system resided in the codebase.
  • Designers were accustomed to building components directly in code or referencing existing web components.

• Bridging the Gap for Comet:

  • The Perplexity core product (web-based) had an established infrastructure for UI development.
  • The Comet team, however, used C++ and lacked the necessary tools for mockups, pixel perfection, and prototypes.
  • Escha recognized the need for a tangible design system to facilitate rapid iteration on the C++ and core browser components of Comet.

• Creating a Personal Design System:

  • Escha began by creating a design system primarily for her own use, to quickly iterate on Comet's C++ and browser elements.
  • This initial system focused on core "atoms" of components (e.g., text within buttons, list items with icons).
  • The goal was to avoid componentizing larger pieces, allowing them to remain flexible and at the designer's discretion.

• Team Adoption and Expansion:

  • The Comet team saw the value in Escha's personal design system and recognized its potential for Perplexity as a whole.
  • This led to the expansion of the scope from a Comet-specific system to a company-wide Perplexity design system, ensuring continuity between Comet and the core product.

• Implementation and Collaboration:

  • The design system was developed in both Figma and code.
  • Escha primarily worked in Figma, collaborating closely with Champori, a front-end engineer.
  • They implemented changes to the web-based design system, making small improvements together.
  • The process emphasized high autonomy and ownership, allowing Escha and Champori to make key decisions and push code.
  • The system focused on establishing principles for padding and spacing, often baked into auto layout in Figma.
  • Components were designed to be easily usable by any designer without requiring them to rebuild elements repeatedly.
  • Padding was integrated directly into components to simplify layout, ensuring divisibility by 8 (or 4/2 for micro units).
  • Similar efforts were made on the engineering side to ensure token naming consistency, aiming for a one-to-one parity between design and code.
  • This allowed new engineers to inspect designs in Figma and use the design system components to build interfaces accurately, benefiting from the baked-in padding and spacing.

• Prototyping Code Integration:

  • While the design system was established, Escha noted that "prototyping in code" was still an area she was figuring out.
  • She found traditional prototyping tools lacking for complex desktop flows, often being geared towards mobile interactions.
  • Her approach involved using tools like Claude, Cursor, and AI-generated code based on screenshots to build initial front-end prototypes, which she would then refine.

Escha Vera shares her approach to designing AI experiences, emphasizing a departure from the common perception of AI interactions as solely prompt-based or like ordering from a menu. She highlights that AI is not inherently limited and can be more open-ended.

Her method involves a dynamic workflow that integrates traditional design tools (like Figma and Photoshop) with AI generation tools (like Midjourney). This iterative process includes:

• Using own art as input: Incorporating personal artwork or existing assets into AI models.
• Iterative remixing: Taking AI outputs and continuously refining, remixing, or combining them with other inputs.
• Back-and-forth workflow: Moving between design tools and AI, using AI outputs as inputs for further design iterations.
• Creative exploration: Embracing the possibility of "happy accidents" and unexpected ideas generated through this process.
• AI as a springboard: Viewing AI not as a way to avoid work, but as a tool to enhance creativity, explore possibilities, and communicate ideas.

She likens this approach to how artists use tools, emphasizing that AI can expand creative potential rather than simply replace human effort. Escha also draws a parallel to the initial controversy surrounding Photoshop, suggesting that current skepticism around AI might evolve as the technology matures and its capabilities become more integrated and understood. She advocates for ethical considerations and mindful usage of AI, stressing that the technology itself is not the problem, but rather how it is implemented and by whom. Ultimately, she believes AI offers significant power and opportunity when used responsibly.

Escha mentions "happy accidents" as a potential outcome of using AI as a creative tool. While she doesn't give specific, detailed examples of these "happy accidents" within the transcript, the concept refers to unexpected but beneficial results that arise during the creative process.

In the context of her workflow, a "happy accident" could be:

• An unexpected visual output from an AI image generator: For instance, when generating an invite code, an AI might produce a unique texture or composition that wasn't explicitly requested but is visually striking and fits the brand aesthetic in an unforeseen way. She touches on this when discussing the generative invites, where she experimented with different inputs and parameters, and likely encountered outputs that surprised and inspired her.
• A novel combination of elements: When remixing AI outputs or combining them with traditional design elements, an accidental blend of styles or features might occur that sparks a new design direction or idea that Escha hadn't initially conceived.
• A surprising AI response: In the context of designing AI interactions, an AI might provide an answer or suggestion that is slightly off-topic but prompts a new line of thinking or reveals a use case the designer hadn't considered.

The core idea is that by engaging in an iterative and experimental process with AI, designers can stumble upon creative breakthroughs that wouldn't have emerged from a purely linear or predictable design method.