Home

Next

Jason Spielman

Design Lead

UX + Identity

2024

NotebookLM

I led design for NotebookLM, shaping the product’s core user experience, brand identity, and visual system from concept to launch.

 

This remains one of my proudest projects, and I’m incredibly grateful for the opportunity to design something entirely new from the ground up. It was a chance to explore fresh paradigms, invent new patterns, and bring a product to life that hadn’t existed before. None of it would’ve been possible without the tight-knit, cross-functional team I was fortunate to collaborate with.

Podcast • Sequoia

Raiza and I discuss the journey building NotebookLM.

NotebookLM Winner!

Recognized as one of TIME’s Best Inventions of 2024.

|

Architecture

|

3 Panel

|

Visual Assets

|

Architecture

UI Evolution

Early Prototype

This is what the UI looked like when I first joined the early project.

Notes driven UI

Introduced chat UI as an overlay above a freeform note canvas.

3-Panel Structure

Synthesizes learnings into a scalable and adaptive layout.

Problem + Requirements

One of the core problems we set out to solve with NotebookLM was “tab overwhelm” the scattered, fractured experience of jumping between tools while trying to synthesize ideas. We wanted to create a space where every part of the creation journey could happen in one place.

→ Inputs

  • Source list, Open Source (wide)

Outputs →

  • Notes list, Open Note (wide)

Chat

• Citations

Creation

• Multiple entry points

This visual shows how the core building blocks came together.

Early Sketches

The structure you see now may seem obvious but it took After what felt like 1000 iterations to get there. Trying to put these blocks together in a way that allowed for a clear mental model and digstible UI. These early sketches are from a plane. I ran out of paper and ultimately found the final solution when drawing on a napkin.

Solution • 3 Panel Structure

It’s rare to find a product that brings reading, writing, and creation together in a truly integrated way largely because juggling all three can be overwhelming. But with AI reducing friction, the opportunity emerged to design a space where every part of the creative process could coexist.

 

To make that possible, I designed a responsive panel system that adapts to the user’s needs, scaling fluidly while preserving quick access to key elements like sources and notes, even at the smallest sizes.

  1. Standard

The default layout, offering a balanced view of sources, chat, and notes.

  1. Reading + Chat

Optimized for referencing sources and generating responses with citations.

  1. Chat + Writing

A popular request, designed for users focused on drafting and iteration.

  1. Reading + Writing

Ideal for composing while keeping source material in view.

 

Panel States

To optimize spatial utility, I created a set of responsive panels that scale based on user needs, retaining essential icons for sources and notes even at minimal widths.

Source Panel

This is where all user-provided sources or “inputs” live. It’s the starting point of the user’s journey.

Studio Panel

Where inputs turn into outputs. This is the space for creating, shaping, and capturing work

Chat Panel

The chat panel stays

at the core of the experience, dynamically adjusting its size to accommodate other tools as needed.

Here’s what that looks like:

Panels dynamically adjust based on the user’s focus and current task.

User Journey • Annotated Overview

Brand Identity

Defining the brand identity was a fast-paced effort, made possible by close collaboration with Google Labs and the central brand team. Shoutout Feel Hwang and team.

Visual Assets

From press kits to launch visuals, I crafted the full suite of assets. Here are some of my favorites.

Early animation for Website

Home

Next

Jason Spielman

Design Lead

UX + Identity

2024

NotebookLM

I led design for NotebookLM, shaping the product’s core user experience, brand identity, and visual system from concept to launch.

 

This remains one of my proudest projects, and I’m incredibly grateful for the opportunity to design something entirely new from the ground up. It was a chance to explore fresh paradigms, invent new patterns, and bring a product to life that hadn’t existed before. None of it would’ve been possible without the tight-knit, cross-functional team I was fortunate to collaborate with.

Podcast • Sequoia

Raiza and I discuss the journey building NotebookLM.

NotebookLM Winner!

Recognized as one of TIME’s Best Inventions of 2024.

|

Architecture

|

3 Panel

|

Brand Identity

|

Visual Assets

|

Takeaways

Architecture

UI Evolution

Early Prototype

This is what the UI looked like when I first joined the early project.

Notes driven UI

Introduced chat UI as an overlay above a freeform note canvas.

3-Panel Structure

Synthesizes learnings into a scalable and adaptive layout.

Problem + Requirements

One of the core problems we set out to solve with NotebookLM was “tab overwhelm” the scattered, fractured experience of jumping between tools while trying to synthesize ideas. We wanted to create a space where every part of the creation journey could happen in one place.

→ Inputs

  • Source list, Open Source (wide)

Outputs →

  • Notes list, Open Note (wide)

Chat

• Citations

Creation

• Multiple entry points

This visual shows how the core building blocks came together.

Early Sketches

The structure you see now may seem obvious but it took After what felt like 1000 iterations to get there. Trying to put these blocks together in a way that allowed for a clear mental model and digstible UI. These early sketches are from a plane. I ran out of paper and ultimately found the final solution when drawing on a napkin.

Solution • 3 Panel Structure

It’s rare to find a product that brings reading, writing, and creation together in a truly integrated way largely because juggling all three can be overwhelming. But with AI reducing friction, the opportunity emerged to design a space where every part of the creative process could coexist.

 

To make that possible, I designed a responsive panel system that adapts to the user’s needs, scaling fluidly while preserving quick access to key elements like sources and notes, even at the smallest sizes.

Standard

The default layout, offering a balanced view of sources, chat, and notes.

Reading + Chat

Optimized for referencing sources and generating responses with citations.

Chat + Writing

A popular request, designed for users focused on drafting and iteration.

Reading + Writing

Ideal for composing while keeping source material in view.

Panel States

To optimize spatial utility, I created a set of responsive panels that scale based on user needs, retaining essential icons for sources and notes even at minimal widths.

Source Panel

This is where all user-provided sources or “inputs” live. It’s the starting point of the user’s journey.

Studio Panel

Where inputs turn into outputs. This is the space for creating, shaping, and capturing work

Chat Panel

The chat panel stays

at the core of the experience, dynamically adjusting its size to accommodate other tools as needed.

Here’s what that looks like:

Panels dynamically adjust based on the user’s focus and current task.

User Journey • Annotated Overview

Brand Identity

Defining the brand identity was a fast-paced effort, made possible by close collaboration with Google Labs and the central brand team. Shoutout Feel Hwang and team.

Visual Assets

From press kits to launch visuals, I crafted the full suite of assets. Here are some of my favorites.

Keyword blog

Early animation for Website

Home

Next

Jason Spielman

Design Lead

UX + Identity

2024

NotebookLM

I led design for NotebookLM, shaping the product’s core user experience, brand identity, and visual system from concept to launch.

 

This remains one of my proudest projects, and I’m incredibly grateful for the opportunity to design something entirely new from the ground up. It was a chance to explore fresh paradigms, invent new patterns, and bring a product to life that hadn’t existed before. None of it would’ve been possible without the tight-knit, cross-functional team I was fortunate to collaborate with.

Podcast • Seqouia Training Data

Raiza and I discuss the journey building NotebookLM.

NotebookLM • Winner!

Recognized as one of TIME’s Best Inventions of 2024.

|

Architecture

|

3 Panel

|

Brand Identity

|

Visual Assets

|

Takeaways

Architecture

Design Evolution

Early Prototype

This is what the UI looked like when I first joined the early project.

Notes driven UI

Introduced chat UI as an overlay above a freeform note canvas.

3-Panel Structure

Synthesizes learnings into a scalable and adaptive layout.

Problem + Requirements

One of the core problems we set out to solve with NotebookLM was “tab overwhelm” the scattered, fractured experience of jumping between tools while trying to synthesize ideas. We wanted to create a space where every part of the creation journey could happen in one place.

→ Inputs

  • Source list, Open Source (wide)

Outputs →

  • Notes list, Open Note (wide)

Chat

• Citations

Creation

• Multiple entry points

This visual shows how the core building blocks came together.

Early Sketches

The structure you see now may look obvious but it took what felt like a thousand iterations to get there. I was trying to arrange these blocks in a way that supported a clear mental model and a UI that felt intuitive and digestible.

 

These sketches were done on a plane. I ran out of paper and ended up sketching the final solution on a napkin.

Solution • 3 Panel Structure

It’s rare to find a product that brings reading, writing, and creation together in a truly integrated way largely because juggling all three can be overwhelming. But with AI reducing friction, the opportunity emerged to design a space where every part of the creative process could coexist.

 

To make that possible, I designed a responsive panel system that adapts to the user’s needs, scaling fluidly while preserving quick access to key elements like sources and notes, even at the smallest sizes.

Standard

The default layout, offering a balanced view of sources, chat, and notes.

Reading + Chat

Optimized for referencing sources and generating responses with citations.

Chat + Writing

A popular request, designed for users focused on drafting and iteration.

Reading + Writing

Ideal for composing while keeping source material in view.

 

Panel States

To optimize spatial utility, I created a set of responsive panels that scale based on user needs, retaining essential icons for sources and notes even at minimal widths.

Source Panel

This is where all user-provided sources or “inputs” live. It’s the starting point of the user’s journey.

Studio Panel

Where inputs turn into outputs. This is the space for creating, shaping, and capturing work

Chat Panel

The chat panel stays

at the core of the experience, dynamically adjusting its size to accommodate other tools as needed.

Here’s what that looks like:

Panels dynamically adjust based on the user’s focus and current task.

User Journey • Annotated Overview

Brand Identity

Defining the brand identity was a fast-paced effort, made possible by close collaboration with Google Labs and the central brand team. Shoutout Feel Hwang and team.

Visual Assets

From press kits to launch visuals, I crafted the full suite of assets. Here are some of my favorites.

Early animation for Website