![[images/The Ridiculous Engineering Of Notion (ft. Notion Team).webp]] **Creator:** Enrico Tartarotti · **Published:** 2025-06-24 · **Length:** 22:05 · [Watch on YouTube](https://www.youtube.com/watch?v=b00sgRR_Vc0) > *Show some love to Notion and Notion Mail by trying it out.* (from the video description) Part of Enrico's behind-the-scenes series, where he talks to the people who built a product. He flies to San Francisco and sits with Notion's designers and engineers, who open up design files and live builds to show the psychology, rejected alternatives and small details behind Notion and its new email client, Notion Mail. Notion sponsors the video, and editing is credited to Seequence Studio and Enrico. The captions give the Notion Mail team only first names (Jason and Andrew), and they mishear Enrico as "Rico" and Notion Mail as "Notion Mill"; corrected names are used below. Chapter times come from the video description, with sub-section times taken from the transcript. ## 1) Detailed outline ### [0:00] Intro - Cold open teasers: a checkbox that still toggles when you click slightly off it, submenu math based on the geometry between the pointer and the menu's corners, and a "quite controversial design decision." - Enrico's question: how did a simple black-and-white app go from nothing to something everyone obsesses over? - Promises the team will open their design files, show alternative versions they didn't ship and their mistakes, explain the psychology principle that makes people attached to Notion (used on purpose), and show why simple, minimal design is the hardest kind. They're doing it all over again with **Notion Mail**. ### [1:20] Notion HQ - Notion's office at 685 Market Street in San Francisco: an old building with "oil tycoon vibes," a very minimal interior and a lot of unusual designer chairs. - Computer-history decor: a picture of **Douglas Engelbart**, who gave what Enrico calls the most important tech demo of all time in the 1960s, and a signed figure from **Alan Kay**, who predicted laptops and mobile devices in the 1970s (Enrico says 1977). Enrico jokes that it's like a museum for computer-history nerds. ### [2:08] How They Manufacture Psychology - **[2:08] Building blocks.** Notion's founders, **Ivan Zhao** and **Simon Last**, studied common patterns on the web (headings everywhere, Excel-style sheets and Wikipedia-like tables) and asked what foundational blocks those sites and apps share. The answer was surprisingly few. Instead of a specialized button that does one thing, Notion exposes a generic, customizable button that users can package into their own apps. - **[3:06] The IKEA effect.** These primitives (databases, lists, tags, board views, links between items) work like Lego; Enrico compares it to building a Lego Millennium Falcon. What you build yourself feels more valuable, which is the **IKEA effect**, named after the furniture you assemble with "annoyingly small wrenches." - **[3:37] Blank canvas syndrome.** The downside is users staring at an empty page wondering what to build. Notion has tried templates and recently an **AI database setup generator** that proposes columns from a typed description. - The core tension: more knobs and levers allow cooler creations but overwhelm people. Simple terms help, but some new concepts are unavoidable ("database" rather than just "table"), and every new block has to work with every other block. - **[4:22] Deciding what to build.** Because every user's system is different, needs vary wildly. Enrico jokes about "incredibly complex algorithms" for prioritizing; the honest answer is partly vibes. The trade-off: a feature that's great for one use case versus one that's decent for five. Notion leans toward more expressive, flexible features across many use cases that stay simple enough to grasp. - **[5:09] Surprising user behavior.** After **Notion formulas** were upgraded into a real formula language, people built video games with it, including blackjack and a 2D shooter. When Notion didn't let users recolor the inbox icon, a community of "grayscale icon people" pushed back until it became a feature. - **[5:39] Notion Mail origin.** Jason and Andrew built the privacy-focused email client **Skiff** until Notion acquired it in 2024, and their work became Notion Mail. - **[6:12] Rethinking email's mess.** Email has layered concepts for 20 to 30 years: inbox, sent, trash, spam, then archive, starred, flagged, pinned, important, checkboxes, labels, folders and nested labels, often five ways to mark an email that do roughly the same thing. Notion Mail collapses them into one Lego block, the customizable **label**, and users build views on top of labels. - **[7:17] Designs that didn't ship.** Enrico notes that Apple products have dozens or hundreds of discarded alternatives, such as an early **iPhone keyboard** prototype, and that his own product has hundreds of concepts. The Notion Mail team rethought the inbox about three times: - A **chat-style inbox**, built about one day into the project: a split view that felt like messaging people, inspired by how much easier it is to send a message in **Slack** than in email. - A **database-style inbox** where subject was a text column and sender a people column, with draggable, resizable columns. One of them spent months on it, but it was so hard to make every window size and column arrangement usable that they simplified to a more rigid structure, realizing only after living with it that it distracted from the main actions. - **[9:18] Build for yourself.** User feedback matters, but Notion Mail was built for Jason and Andrew first. The small, compact default font size reflects startup founders who want a dense inbox to get through email fast. Using your own product lets you trust your own judgment without waiting for surveys. ### [10:32] The Insane Design Behind The Details - **Why products feel good.** Enrico recalls switching from a "crusty" **Nokia** to an **iPhone** in middle school. Examples of small details: Apple icons use a **squircle** rather than a rounded rectangle, **Gmail** lets you swipe on your profile picture to switch accounts, and on Android and iOS you can tap and drag to zoom in maps. A thousand of these add up to something that feels almost magical. - **Menu keyboard navigation.** Arrow keys autoscroll with bottom padding (not native behavior), press-and-hold keeps moving without looping, and hover plus arrow keys resume from the hovered item. A single interactive element can have 100 to 200 details people never notice when they're right. - **[11:00] Submenu geometry.** When the pointer moves diagonally toward a submenu, Notion calculates the geometry between the pointer and the menu's corners so the submenu doesn't close too early. - **[11:21] Bullet-list behavior.** Many hours went into tab, shift-tab and backspace in lists: you can't skip an indent level unless something already exists at it, shift-tab outdents and then removes the bullet, and text lines up across bulleted and numbered lists. - **[12:22] Tabular numbers.** For numbered lists that reach two digits, they use the CSS property `font-variant-numeric: tabular-nums` so digits get fixed widths and align, even in a font that isn't monospaced. - **Click zones and hover states.** Checkboxes have an enlarged click zone because people are imperfect. Notion Mail's hover, open and selected email states update border-radius corners so they fit together. - **[12:53] The mention menu.** In Notion Mail's @-mention menu (about 750 contacts plus Notion pages), typing a name or email shows autofilled placeholder text, and arrow keys move the cursor inside the field without losing the menu until you leave it. The same behavior was matched in Notion itself, which took a lot of code. - **[14:00] Designing in code.** Tools like **Figma** help, but a lot of design happens in code because only a living build shows how it feels. A menu is a simple square in Figma, but in code you must decide focus behavior, keyboard shortcuts, scrolling, hover, submenus, whether Escape closes one or both menus and when to disable the pointer, plus pixel-perfect icon alignment across views and page icons. - **[15:30] The "controversial" placeholder rows.** An empty new database shows several placeholder rows. One row looks small and doesn't show what's possible; five rows are slightly misleading but make a table's purpose clearer. The team debated it. - **[16:31] Why tiny details matter.** On their own they don't matter, but hundreds or thousands of them, each with hours of design and engineering, create a product that feels good. More than the details, people sense that the builders care. One team member says Andrew helps keep the engineering simple, while they'll accept "terrible spaghetti code" if it makes the experience 0.1% better. ### [17:46] Simplicity Is F***ing Hard - **Word 2003 versus Notion.** **Microsoft Word 2003** looks clunky and complex; Notion looks minimal and simple. Enrico quotes "fellow Italian" **Leonardo da Vinci**: simplicity is the ultimate sophistication. - **Limiting views.** Notion has table, board, list, timeline, calendar, gallery and form views and could add map, org-chart and endless others forever. With user-generated content, people always ask for more, so the hard part is deciding where to draw the line. - **[18:36] The user spectrum.** Notion buckets users by experience: - **Residents** (roughly 60 to 70%): give me the tool, I don't want to tweak it all day. - **Gardeners**: willing to learn properties and configurations, such as time zones. - **Builders**: want to build systems. - **Architects**: a smaller group inside builders who dig into formula functions like `if` and `let` to build things like emoji displays or habit trackers. - Every feature is checked against both ends. Would a resident understand it? Can an architect discover all of its power? They also ask what **Thomas Frank** would think. - **[19:20] Don't design for the average.** The US Air Force once built cockpit seats to average body measurements and they fit no one, so Notion designs for specific user types instead. Advanced options like **Customize layout** in database pages are tucked away and learned step by step, after pages, databases and properties. - **[20:09] Autopilot becomes Auto Label.** Notion Mail's **Auto Label** learns from past emails, for example isolating salespeople's emails after you pick examples to train the AI. At **Make with Notion** the year before, it was shown as **Autopilot**, an open-ended sandbox with a prompt field that could label, archive, translate and extract. Open-endedness made its limits hard to discover, "like you don't know where the edge of a video game is until you hit it." Most people used it for labeling, so the team focused there, adding suggestions so you don't have to type and example emails as clickable buttons instead of prompts. - **[21:43] Outro.** Notion and Notion Mail have so far avoided products getting worse as they grow, which Enrico explains with the **law of the marginal user** in a linked follow-up video. ## 2) Things mentioned ### Notion and Notion Mail features - **Notion** building blocks: databases, lists, tags, board views, links, headings and customizable buttons - **AI database setup generator** (proposes columns from a description) and templates for blank canvas syndrome - **Notion formulas** (formula language; user-built blackjack and 2D shooter games; `if` and `let` functions) - Customizable inbox icon color, added after the grayscale-icon community asked for it - Database views: table, board, list, timeline, calendar, gallery, form, plus requested map and org-chart views - **Customize layout** (layout builder for database pages) - Placeholder rows in empty databases - **Notion Mail**: unified customizable labels, label-based views, compact default font size, @-mention menu - **Auto Label** (formerly **Autopilot**, shown at **Make with Notion**) - Abandoned Notion Mail prototypes: chat-style split inbox and database-style column inbox ### Design and engineering details - Submenu diagonal-pointer geometry - Keyboard menu navigation with padded autoscroll, press-and-hold and hover handoff - Bullet and numbered list indentation rules (tab, shift-tab, backspace) - CSS `font-variant-numeric: tabular-nums` for aligned numbers - Enlarged checkbox click zones - Border-radius updates for hover, open and selected states - Icon alignment across views and page icons - Designing in code versus static artboards in **Figma** ### Psychology and design ideas - **IKEA effect** - Blank canvas syndrome - Expressivity versus simplicity, and features for one use case versus many - Building for yourself (dogfooding) - Resident, gardener, builder and architect user spectrum - Designing for specific users rather than the average (US Air Force cockpit study) - "Simplicity is the ultimate sophistication" - Law of the marginal user (teased follow-up video) ### Other products and references - **Skiff** (privacy-focused email client acquired by Notion in 2024) - **Slack**, **Gmail** (swipe to switch accounts), **Microsoft Word 2003**, **Excel**, **Wikipedia** tables - Apple's **squircle** icon shape, early **iPhone keyboard** prototype, **Nokia** phones - Map tap-and-drag zoom on Android and iOS - **Lego Millennium Falcon**, **IKEA** furniture - Douglas Engelbart's 1960s demo and Alan Kay's predictions of portable computers - Notion HQ at 685 Market Street, San Francisco - **Flask** (flask.do), Enrico's video collaboration tool, and **Seequence Studio** (editing) ## 3) Biographies ### Enrico Tartarotti Italian-born YouTuber, designer and entrepreneur whose channel goes behind the scenes of the design, engineering and psychology of everyday tech. He's building **Flask** (flask.do), a video collaboration tool. In this behind-the-scenes episode he visits Notion's office and interviews the people who built Notion and Notion Mail. ### Jason and Andrew (Notion Mail) The two Notion Mail leads Enrico interviews, introduced only by first name. Enrico says they started the privacy-focused email client **Skiff** before Notion acquired it in 2024, and their work became Notion Mail. (Skiff's co-founders were **Andrew Milich** and **Jason Ginsberg**; the video doesn't give surnames.) They demo the rejected inbox prototypes, the mention menu and the Auto Label feature. ### Notion team members Other Notion designers and engineers explain the building-block philosophy, formulas, the grayscale-icon story, the user spectrum and the placeholder-row debate. The captions don't name them. ### Ivan Zhao and Simon Last Co-founders of Notion, mentioned as "Ivan and Simon." Ivan Zhao is CEO. Their insight was that most apps and websites are built from a small set of shared building blocks, which became Notion's core design. ### Thomas Frank Productivity YouTuber and Notion template creator, mentioned as the kind of power user the team pictures when checking whether advanced users can find all of a feature's complexity. ### Douglas Engelbart American computing pioneer (1925–2013) whose 1968 "Mother of All Demos" introduced the mouse, hypertext and collaborative editing. His picture hangs in Notion's office. ### Alan Kay American computer scientist known for object-oriented programming, graphical user interfaces at Xerox PARC and the Dynabook concept, an early vision of laptops and tablets. A signed figure from him is displayed at Notion. ### Leonardo da Vinci Italian Renaissance artist and inventor, credited with "Simplicity is the ultimate sophistication," which Enrico quotes when contrasting Word 2003 with Notion.