Lumina — Distraction-Free Writing App

Overview

Every writing app says it's distraction-free. Most of them just hide the toolbar. Lumina was a concept project to explore what a truly typography-first writing experience could feel like — an editor where the interface disappears completely until you need it, where every pixel serves the act of writing. I designed the full product from concept through interactive prototype, including a complete design system and motion language.

The Business Problem Writers using existing tools (Notion, Google Docs, iA Writer, Ulysses) consistently reported the same frustration: the tools that were powerful enough for serious writing were too visually noisy, and the ones that were clean enough were too limited. The sweet spot — beautiful, functional, and invisible — didn't exist.

The Design Goal Design an editor where zero interface chrome is visible during active writing, where formatting is discoverable through gesture and keyboard alone, and where the typography is so refined that writers feel the quality of the tool in every sentence.

01. Research & Discovery

I started with the writers themselves — not their tools. I wanted to understand the emotional and cognitive experience of writing before I considered any interface decisions.

Methodology:

• 10 in-depth interviews with professional writers (novelists, journalists, technical writers, copywriters)

• Personal workflow audits — each participant screenshared their actual writing setup

• Comparative UX teardown of 8 writing tools (iA Writer, Ulysses, Bear, Typora, Notion, Google Docs, Scrivener, Hemingway)

• Review of academic research on typography, reading comfort, and cognitive load in text editors

Key Insights:

1. The Setup Tax: Writers spent an average of 4 minutes configuring their environment before writing — adjusting window size, hiding sidebars, changing fonts, entering "focus mode." Every app forced writers to manually construct the calm they needed.

2. Formatting Anxiety: 7 of 10 writers avoided formatting while drafting because toggling bold/italic/heading broke their flow. They'd write in plain text and format later — a workaround for a design failure.

3. The Font Gap: Writers cared deeply about the typeface they wrote in but were limited to 3–5 built-in options in most tools. Several had purchased fonts specifically for writing and couldn't use them.

02. Framing the Problem

I crystallized the research into a design principle that became the project's identity — a single sentence that every decision was tested against.

What if the editor had literally zero chrome by default — no toolbar, no sidebar, no menu, no rulers — and every feature appeared only at the moment you reached for it?

03. Ideation & Prototyping

This was a solo design project, so I replaced the traditional sprint format with a rapid diverge-converge cycle — 3 days of exploration followed by 2 days of ruthless editing, repeated twice. The constraint was absolute: if a UI element was visible during typing, it needed to justify its existence.

Architectural Shifts:

• Ghost Chrome: Every interface element — toolbar, sidebar, file browser, settings — exists but is invisible by default. Elements materialize through contextual triggers: hover the top edge for the toolbar, swipe from the left for files, right-click for formatting. The UI is a ghost that appears when summoned.

• Typographic Souls: Instead of a font picker, Lumina offers "souls" — curated typographic presets that set font, size, line height, and paragraph spacing as a unified mood. "Academic" feels different from "Editorial" feels different from "Personal." Writers choose a feeling, not a font.

• Markdown-Native Formatting: Typing ** triggers bold inline, ## triggers a heading — no toolbar interaction required. But the markdown syntax disappears after rendering, leaving clean formatted text. Writers who know shortcuts never see chrome; writers who don't can summon it.

04. High-Fidelity Execution

With the interaction model validated through 6 moderated prototype sessions, I moved into high-fidelity design. The visual system was built entirely around typography — no icons in the writing view, no color except the cursor and selection highlight, and a background tone calibrated to reduce eye strain across 4+ hour writing sessions.

05. Outcomes & Impact

As a concept project, Lumina's impact was measured through prototype testing with 12 writers rather than production metrics. The interactive prototype was built in Framer with full motion design.

The Results:

• 0 seconds Setup time — writers started typing immediately, with no environment configuration needed.

• 92% Of test participants completed a 15-minute writing session without touching the toolbar once.

• "Best writing tool I've never been able to buy" — direct feedback from a participating novelist.

• Full design system delivered: 48 components, 6 typographic souls, complete motion language documentation.

Reflection: The biggest challenge was discoverability. Ghost chrome is elegant for power users but invisible features are invisible problems for new users. If I were taking this to production, I'd design a 60-second onboarding flow that teaches the three core gestures — the one piece I deliberately scoped out of the concept phase but would be essential for adoption.