Summary & Context

Livebook is an open-source, interactive code notebook platform for Elixir that enables developers, data scientists, and machine learning engineers to write code, visualize data, and run AI models in real time.

When I joined as the Product Designer, Jonatan Kłosko had built an early, functional skeleton prototype. While the underlying technology was brilliant, the UI was barebones and lacked visual hierarchy, layout logic, and scalable design tokens. The logo existed, but its color palette and visual identity needed refinement to feel like a modern, developer-grade tool.

Working in direct partnership with José Valim and Jonatan Kłosko, I owned the end-to-end UX/UI architecture. Together, we transformed an early technical prototype into a polished, high-adoption open-source platform with over 5,000+ GitHub stars.

Core UX & Architectural Challenges

Designing tools for developers demands low latency, zero visual clutter, keyboard-driven efficiency, and high spatial density.

Challenge A: Real-Time Multi-User Collaboration

The Problem:
Developers needed to pair-program and run live code cells simultaneously within the same notebook without stepping on each other's execution states.

The UX Solution:
Modeled multiplayer visual indicators—such as live multiplayer cursors, user presence badges, and active cell locks—directly into the execution canvas so teams could collaborate seamlessly.

Challenge B: "Smart Cells" (Bridging Code & No-Code UI)

The Problem:
Livebook needed a way for non-ML experts to run complex machine learning models, database queries, and data visualizations without writing boilerplate Elixir code.

The UX Solution:
Designed Smart Cells—UI-driven, no-code block components embedded directly into the code canvas. Users configure AI model parameters or database inputs visually, which automatically generates reactive Elixir code underneath.

Challenge C: Block-Based Content & Execution Editor

The Problem:
Designing a seamless, block-based editor canvas that smoothly handled code blocks, markdown text, rich media output, interactive charts, and terminal execution logs in a unified vertical scroll.

The UX Solution:
Architected a modular cell container system inspired by modern block editors (e.g., Notion/Medium). I introduced contextual hover action bars, keyboard-first insertion shortcuts, inline execution state badges, and collapsible output drawers—allowing developers to inspect dense runtime logs and interactive Vega-Lite data visualizations without breaking their reading flow.

Design System & IDE Craftsmanship

I built a high-density, distraction-free design system optimized for code readability and spatial efficiency:

Ecosystem Color & Typography Tokens
Refined the visual foundation to support crisp readability across both Dark Mode and Light Mode.

Comprehensive Component Library
Designed modular, developer-centric components including execution status indicators, toasted notifications, badge systems, multi-tab execution panels, and error logs.

Design-to-Dev Synergy
Built the system with high component flexibility. The engineering team leveraged my Figma design system tokens to independently construct minor UI edge cases, allowing us to focus core energy on architecting high-complexity screens and major platform features.

Collaborative Process with Tech Creators

Operating alongside José Valim and Jonatan Kłosko required a highly iterative, feedback-driven design cadence:

Feature Ideation
Held direct strategy sessions with José and Jonatan to translate technical Elixir concepts into intuitive UX patterns.

Rapid Prototyping & Feedback Loops
Produced interactive Figma prototypes, gathering continuous peer review from core maintainers until workflows felt completely effortless before handing off to production.

Marketing & Web Presence
Designed the official Livebook website and launch graphic assets to announce major platform releases to the global developer community.

Impact & Industry Recognition

5,000+ GitHub Stars
Established Livebook as the premier interactive notebook environment in the Elixir ecosystem.

Global Community Benchmark & Stage Presence
Livebook became the de facto live presentation platform across the global developer community. Keynote speakers and technical presenters regularly present live on stage at ElixirConf and ElixirConf EU using the exact interface, themes, and interactive execution canvas I architected.

AI/ML Accessibility
The "Smart Cells" design enabled thousands of developers to easily integrate Hugging Face machine learning models into Elixir workflows without complex setup.