My Role
Solo Product Designer
Timeframe
Overview
Outcome
The Problem
“Get it all down. Let it pour out of you onto the page. Write an incredibly shitty, self-indulgent, whiny, mewling first draft.”
“Perfectionism... will keep you cramped and insane your whole life, and it is the main obstacle between you and a shitty first draft.”
Ideation + Concept Testing
The concept resonated with writers:
Iteration
Sketching a low-distraction space to help writers focus
No ribbons. 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.
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 interactive features at the bottom of the screen
Sketch with interactive features at the bottom of the screen
How should the draft be obscured?
❌ The aesthetics of a fade out didn't match my vision.
When people complain about word processors like Microsoft Word, they often complain about the overwhelming ribbon of options they don’t need.
❌ 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 over the 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).
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.
❌ 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
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.
Prototype of the History page with all existing drafts visible
✅ 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.
Screenshot of the error prevention alert
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.