Teaching Illustration

Teaching Illustration is a visual preview in an empty state that uses your product's exact interface design to show what it looks like when filled with real content. It teaches users the shape of success without forcing them to read instructions or watch videos. The illustration uses real components from your design system populated with plausible data that matches common use cases. This move turns the empty state into an educational tool that orients users fast and reduces the intimidation factor of a blank screen. It sits alongside sample data as a key tactic in the empty state playbook. While sample data is often interactive the teaching illustration can be static yet still convey hierarchy, possible interactions, and expected results at a glance. The best teaching illustrations feel like looking into the future of your own workspace. They leverage pattern recognition so users see a populated inbox or board and immediately map their own content onto it. The technique matured between 2016 and 2022 as teams realized empty states were conversion surfaces not footnotes.

Teaching Illustration is not a sad mascot with droopy eyes and a punny message. It is not a generic illustration of a person staring at a blank page or an abstract icon that represents nothing specific. Those approaches might win design awards for delight but they fail the user by providing zero information about what the feature actually does or how to use it. A teaching illustration is also not a marketing visual or a concept mockup that deviates from the production UI in color spacing or typography. Any deviation breaks the transfer of learning and leaves users surprised when the real interface appears. It is not an excuse to add easter eggs or clever visual metaphors that require explanation. The best ones need no explanation at all. They never rely on stock assets from Undraw or cute characters from the brand illustration library. Those elements apologize. Teaching illustrations instruct.

Concrete example. Linear's empty inbox uses a teaching illustration that shows a short list of sample issues with titles that reflect real engineering work. One issue is labeled bug with a red dot another is a feature with a blue tag. The assignees are shown with their characteristic circular avatars and the whole thing uses Linear's signature keyboard friendly dense layout. Users see this and immediately know how to think about Linear as a tool. They understand the speed and clarity the product promises. Notion does this masterfully in fresh pages. Their teaching illustration for a new project management board shows three columns with two cards in each. The cards have real looking content about product launch tasks with due dates and owners assigned. The properties match what a real Notion database uses including multi select tags in different colors. New users grasp the power of Notion databases without any tutorial. Figma's empty state for new accounts in 2022 showed a teaching illustration of the draft files area with three example designs. One was a mobile app UI one was a website wireframe and one was a brand style guide. Each had thumbnail previews that used Figma's real file card design including the share status and last edited by information. This visual taught the collaborative nature of Figma before users invited their first teammate. Stripe implemented a teaching illustration in their 2014 dashboard that showed sample charges from companies like Coffee Shop LLC and Online Store Inc with dollar amounts and statuses. The illustration included a chart with test data that previewed the analytics section. Users knew exactly what to expect as their business grew. Things 3 has used a teaching illustration since its initial release in 2017. The illustration is an actual project called Get Started that contains tasks like Create your first project that teach the app by using the app. The visual style is identical to real projects with the same checkbox styles and project hierarchy indicators. Cron which later became Notion Calendar used a teaching illustration that showed a week view with sample meetings including one with a Zoom link and another with attached files. The visual used the exact calendar styling and color coding for different calendars. Replit's empty state teaching illustration shows a code file with syntax highlighting a terminal with output and a preview pane all populated with a simple counter app example. Users click run in the illustration and it demonstrates the workflow. Granola uses a teaching illustration of a meeting transcript with speaker labels time stamps and AI generated summary bullets that match their real output format exactly. Superhuman's teaching illustration for new users shows a clean inbox with sample promotional emails and important threads sorted using their AI categories with visual indicators for what the shortcuts would do. ChatGPT added teaching illustrations in the form of example prompt cards in 2023 that show formatted responses with code blocks and bullet points to set expectations for new users. Each of these examples shares a common thread. The companies spent time selecting content that represents peak value moments in their products. They avoided generic lorem ipsum in favor of realistic names and scenarios that resonate with their target users. The illustrations were built using the same code as the live product to guarantee pixel perfect accuracy. Airtable followed the same pattern in 2019 with their empty base views showing sample records that mirrored common workflows like content calendars or CRM pipelines complete with the exact lookup fields and rollups users would later create.

Use teaching illustrations in first run empty states and zero state situations where the user needs to build a mental model of the feature. They work best in products with intricate UIs or novel concepts that are hard to explain with text alone. Pair the illustration with one line of tone setting copy and two suggested actions for a complete empty state. Test them with five new users and measure time to first action. They deliver the highest lift in complex tools like design software project trackers and analytics dashboards. Do not use teaching illustrations when the screen is conceptually simple like a basic search page or a single input form. Avoid them in post clear states because the user already knows the interface and the moment calls for celebration not instruction. Skip them in error states where plain language about the failure is more important than any visual. Do not use them if they make the empty state feel crowded or if they take more than a few hours to produce and maintain. Never use a teaching illustration that uses different styling than your live product. Consistency is the entire point. Reserve them for surfaces that carry high cognitive load on first visit and retire them once most of your users pass the learning phase.

A teaching illustration turns the empty state from a question mark into an exclamation point that screams this is what winning looks like.