The hardest part of creative writing is getting started.
drafty makes it easier to produce a first draft by hiding your writing as you go.
drafty: end-to-end web app design and development
My role
Solo Product Designer
User interviews, usability tests, prototyping in AI and Figma, UI design, coding
Timeframe
Dec. 2024 – Feb. 2025
Overview
Writers need help getting out of their own way when they start a new project. They frequently get caught up editing themselves as they write, losing significant time that they need for creative exploration. Pressure from editors, publishers, and manuscript dealines makes this an especially emotional and stressful process.
Outcome
I designed and developed drafty, a web app that has helped hundreds of writers get to a first draft faster. One regular user said, “drafty must have cut my writing process in half.”
The Problem
In her book Bird by Bird, the author Anne Lamott gives her take on the writing process:
“Get it all down. Let it pour out of you onto the page. Write an incredibly shitty, self-indulgent, whiny, mewling first draft.”
She also explains why that’s so difficult to do.
“Perfectionism... will keep you cramped and insane your whole life, and it is the main obstacle between you and a shitty first draft.”
This is a problem many authors face every day.
It’s not just Lamott.
To validate whether perfectionism is an obstacle many writers face during the first draft stage, I researched other authors’ writing processes. I learned that Lamott captured a very common experience. Here are just a couple of examples of the many I found:
“Writing… always only starts out as shit: an infant of monstrous aspect; bawling, ugly, terrible, and it stays terrible for a long, long time (sometimes forever).” – David Rakoff, Half Empty
“The faster you blurt, the more swiftly you write, the more honest you are… In delay comes the effort for a style, instead of leaping upon truth.” – Ray Bradbury, Zen in the Art of Writing
Ideation + Concept Testing
Rapid prototyping a concept to prevent overthinking while writing
I created a quick physical prototype to help myself visualize the idea of hiding a writer’s text as they go. Then I created a digital prototype in V0 to test it out.
I asked a variety of writers (fiction writers, journalists, academic writers) to use the V0 prototype and describe how it felt. Was it exciting? Uncomfortable? Would it facilitate or stifle their own writing process?
Physical prototype
One of my participant’s drafts in the V0 prototype
The concept resonated with writers:
“I found it a little hard at first to not go back and delete and re-write, but then I got into the swing of it. It’s a really interesting aid. I’d like to use it again.”
“It’s trying to prevent [me] from going back and self-editing… which is more like how I try to write myself. It feels like a good exercise.”
“I’m really intrigued… I like that you’re visually blocking some of the information. It literally keeps you from overthinking.”
Iteration
Sketching a low-distraction space to help writers focus
No ribbon. No distractions.
When people complain about word processors like Microsoft Word, they often complain about the overwhelming ribbon of options they don’t need. drafty strives for the opposite – a stripped down space for people to focus only on getting words on the page.
“It’s like a diner menu with 1,000 mediocre options”
One Reddit user’s take on Microsoft Word
Early sketches played with hierarchy.
This iteration led me to a layout that prioritizes the writing area with large text, negative space, a header with secondary information such as the word count, and a sidebar for customizable settings that my initial user interviewees had asked for.
Sketch with interactive features at the bottom of the screen
Sketch with text that moves left off the screen as the user types
First interactive prototype
How should the draft be obscured?
Early mockup with fade out effect
❌ The aesthetics of a fade out didn’t match my vision.
My first approach was to fade out the text as it scrolled up and off the screen.
But from a visual design standpoint, the fade-out implies that the words are disappearing into the past. Instead, I needed a visual cue that some words are simply hidden from view.
Early mockup with headlight effect
❌ A headlight was distracting to writers.
I also played with a beam of light that illuminates only most recent lines of text.
The beam of light idea was inspired by an E. L. Doctorow’s quote: “Writing is like driving at night in the fog. You can only see as far as your headlights, but you can make the whole trip that way.”
Writers who gave feedback on this mockup enjoyed the playful approach, but found it distracting and difficult to quickly identify the end of a sentence.
Ultimately, I landed on a concept that brings some drama and delight.
I created a “curtain” that falls over the text after the user starts typing, creating a surprising moment of transition into this new mode of writing.
Prototype with a curtain that falls down over text.
Pivot
Wait… what happens after the first draft is done?
I originally hypothesized that writers would want to return to their work in drafty and continue editing it. I prototyped a History page where writers could see their drafts in full, add a title, and format and edit the text.
Snapshot in Figma of the following flow: 1. Visit a History page. 2. Select the draft delete option. 3. Confirm deletion. 4. View next-most-recent history page with delete confirmation module.
But once writers have their first draft, they don’t need my help.
Writers who tested the drafty prototype were excited to improve the process of writing a first draft, but had no reason to cahnge the rest of their writing process (such as editing in Microsoft Word, hand-writing important passages, or printing copies to mark up with a red pen).
“I have my draft… the hard part is over. How do I just do my normal editing now?”
– Usability Tester
So I replaced the History feature with a “copy text” feature.
“Copy text” allows writers to incorporate drafty seamlessly into their existing writing process. Once they have a first draft, they can copy it to whatever word processor they already use to refine their work.
Read about how this decision also addressed an important technical constraint below.
Snapshot of the drafty pattern library, with the button that is used for “copy text.”
Technical Problem Solving
Allowing for saved drafts within the constraints of vanilla JS
There was another issue with the History page concept. Because drafty is coded in vanilla Javascript, history pages introduced a significant technical constraint: Javascript can’t create new page on the server side. In other words, I wouldn’t be able to automatically create a new history page when the user saved their draft.
Prototype of the history page with all existing drafts visible
❌ Solution attempt 1: Create a single history page with anchor links to past drafts
Advantages:
Makes it easy for writers to see how their first drafts evolve as they u
Disadvantages:
Anchor links don’t behave precisely enough. When a short draft sits on top of a long draft, it’s difficult to tell which draft the anchor link points to.
Users reported that viewing all of their drafts in one place was overwhelming.
Screenshot of the error prevention alert
✅ Solution attempt 2: Eliminate history and have only a “copy text” option for writers to bring their draft into their usual word processor
Advantages:
Speaks to the underlying purpose of the site as an aid in getting started – not a replacement for a writer’s entire creative process.
Disadvantages:
While an error prevention protocol helps prevent writers from accidentally losing their work by closing or reloading the browser, they may still lose their work if their browser crashes.
Reflections
They say you should write what you know. In this case, it was design what you know. It’s a truism in my industry that “you are not the user,” which is why I frontloaded research to confirm that this idea resonated with other people — but at the same time, I believe that a designer should let their own experiences and frustrations shape their vision. That’s what brings real feeling and care to our work.
If I were to do it over, I’d start weighing the technical constraints of vanilla JS sooner, so that I had more options to explore regarding draft histories. For future versions of drafty, I hope to speak with users about how they’d like to access their first drafts after producing them and explore frameworks that might allow me to achieve what they need.