Novlr — Creative Writing Platform (May 2022 - Present)
Redesigns, rebuilds, and products that contributed to 950% active user growth.
My Roles — Most likely in VS Code and Figma.
- Designer & Engineer (May 2022 - Jul 2023)
- Head of Product (Jul 2023 - Present)
The Novlr Team — A small team of great humans.
Kim Montgomery (Co-Founder)
Thomas Muirhead (Co-Founder)
Pamela Koehne-Drube (Community Lead)
Me, Josh Allen (Head of Product)
Zak Kempson (Design & Engineering)
Sarfraaz Talat (Engineering)
Novlr is a creative writing platform focused on helping writers achieve their goals throughout every stage of the writing journey.
At Novlr, we shipped a complete redesign and front-end rebuild of the existing platform whilst adding valued products and performance. We launched products like integrated courses, author websites, writer services, co-ownership and writing analytics.
Within two years, we contributed to 950% growth in monthly active users (those writing 2+ days per week/month). Shifting to freemium was a primary contributor towards this result. We capitalised by reworking our pricing strategy.
(1/3) Active Users / Month
As of May 2024, 122k writers have hand-written 645 million words across 212k projects. Every 24 hours, around 600k words are written.
“I love Novlr. It is quite simply the most beautiful interface out there for writing tools, and I've tried them all. Scrivener, Atticus, Reedsy, Living Writer, you name it. I didn't write the meat of this novel until I got settled and comfortable on a platform. I did more in two months with novlr than I did in the prior two years with all other tools combined. I appreciate the rare combination of form and function you folks have achieved....It's the most immersive platform I've used.”
Dashboard
The dashboard is a gateway into Novlr's suite of products. For some, it offers fast-track navigation to their latest project. For others, it's a stopover for deeper exploration — goals, learning, motivation, analytics, publishing, and more. The execution surfaces relevant high-traffic components whilst letting writers delve into the details.
“I've been struggling to get my first novel back on track, and having discovered Novlr early last week, you've helped me kickstart my writing in a way I couldn't have imagined possible.”
(1/2) Dashboard — Light
The dashboard promotes a comfortable and supportive environment by blending productivity with community. This approach helps writers feel supported and creates a nurturing space.
“I finished and edited my first novel on Novlr.”
(1/2) Writing Goals & Sprints — Light
“It’s addictive. I’ve been using it for six years and I can’t describe how straightforward it is for writing.”
(1/2) Writing Streaks — Light
We're proud of this: From October 2022 to May 2024, the volume of goals achieved monthly grew 1962%.
Goals Achieved / Month
A well-travelled upgrade path is gaining access to writing analytics. It’s an example of the dashboard facilitating data analysis. We aimed to provide a simple, clear and comprehensive experience.
(1/2) Writing Analytics — Light
Many writers seek isolation, others enjoy community.
(1/2) Communities — Light
Project Editor
Creative writers often spend years working on their manuscripts. They deserve an environment that lets them do their best work.
“I was trying to find a way to help me focus. I found Novlr. Simple, clean, but most importantly intuitive and surprisingly powerful...I smashed out 10,000 words - I didn't know I had it in me! And I can assure you, without the ability to focus on the chapters...there is no way I could have hit those numbers...this software is incredible. Life changing.”
(1/2) Navigation & Formatting — Light
“I fell in love with Novlr’s simple UI, and the ability to easily rename chapters/shift scenes around. Novlr helps me focus on the writing, not the “fluff,” and I greatly appreciate that.”
(1/2) Project Sidebars — Light
Early versions of Novlr had on/off toggles for Focus Mode. We produced a more fluid UI that naturally forms focus. Headers fade in/out with keystrokes/mouse moves, and sidebars fully collapse. You no longer toggle focus. It just happens.
(1/2) Focus Mode & Motivation — Light
“I've typed it before...but I just love @novlrtweets. They're the best writing program, IMO. I hit 2K today. Thank you for making it incredibly easy to NOT procrastinate!”
An example of the right sidebar is Version History. Writers can jump back through previous manuscripts.
(1/2) Version History — Light
“I spend every day on Novlr. It's where all my worlds and characters live.”
Our modular design lends itself to using dynamic widgets within the project editor. This conceptual design shows a "Writing Sprint" experience. We shipped Integrated Courses using the same approach.
(1/2) Writing Sprint & Notification — Light
Using a "DocumentContext" allowed us to overcome an engineering challenge whilst building the project editor. This context is responsible for storing and saving all unsaved document data. With this abstraction, writers can freely navigate the entire app without waiting for saves on specific pages.
{/* Root Layout */}
{/* Store all unsaved document data */}
<DocumentContext>
{/* Document layout */}
<DocumentLayout>
{/* TipTap editor */}
<TipTap />
{/* TipTap bubble menu */}
<BubbleMenu />
</DocumentLayout>
<DocumentContext>
Integrated Courses
The Integrated Courses and "Floaty Player" projects were a highlight. We produced an engaging learning experience where writers can learn whilst writing and taking actions in-app.
(1/2) Course Navigation — Light
We shipped the project in May 2023 with two high-quality video and audio courses. The following month, 187% more writers enrolled in courses.
Course Enrolments / Month
The interactive "Floaty Player" permits navigation between in-app pages. For example, changing lessons within the player prompts related navigation to the suitable pages in-app. Writers can resize and reposition the player like a picture-in-picture window.
(1/2) Resizable Video Player — Light
(1/2) Audio Player — Light
Bringing the "Floaty Player" to life was one of my favourite challenges. Many interaction points had to play nicely within components and across the app. We used a combination of React contexts and popular libraries to build the first version.
{/* Root Layout */}
{/* Store all unsaved document data */}
<DocumentContext>
{/* Track all floating components */}
<FloatyContext>
{/* react-draggable */}
<Draggable>
{/* react-resizable */}
<Resizable>
{/* Floating component */}
{...}
</Resizable>
</Draggable>
</FloatyContext>
<DocumentContext>
Redesign Aesthetic
The journey from old to new aesthetics and the rationale behind design decisions. There are old and new versions of Novlr to follow.
We backed the direction that our design should complement, not overshadow, the creative writing process. The goal was to create a calm, inspiring and homely atmosphere where aesthetics enhance the writing experience without becoming a distraction. A subtle and accessible design empowers writers to focus deeply on their craft. These principles originated 10+ years ago when Kim and Thomas started building Novlr.
“I love Novlr because it just works from the get-go. I didn't need a huge, in-depth tutorial - I learned how to make a project, found the button to add a new chapter, and there it was: a place to write.”
(1/2) Old Project Editor
We felt the powerful gradients in early versions of Novlr didn't contribute to our refined values. Our approach of a sky-blue with delicate saturation stuck a balance between pastel tones and vibrancy, creating a subdued yet accessible foundation. We used hue 209 for Sky and Ink colours across light and dark themes.
“I'm obsessed with this redesign.”
Colors — Sky & Ink (209 Hue)
The old Novlr logo didn’t feel at home. We composed a dynamic logo that embodies forward movement and conveys a sense of progress.
Logo — Old & New
Here are the old and new hero sections. Notice how the illustration style is similar? More on that next.
(1/2) Old Marketing Hero
(1/2) Old Marketing Map
The characterful illustrations in earlier Novlr were loved by writers and team. Fittingly, we learnt that these illustrations came from the British Library collection, which boasts over a million images. Colour-blended illustrations (starting yellowed) became a cornerstone throughout the redesign and helped us pave new territory. It was a goldmine.
(1/2) Blend Modes — British Library Illustrations
We took British Library art further than before and entangled it through in-app pages. These illustrations injected personality into the muted palette and supplied brand uniqueness.
(1/2) Old Dashboard
“Really impressed with the super clean interface on @novlrtweets as I take it for a test run in preparation for #NaNoWriMo. So far, it's totally blowing all the years I've squabbled with Microsoft Word out of the water.”
In dark mode, the Ink colour with Sky hue creates depth and softens contrast.
(1/2) Old Project Editor — Dark
Marketing Site
Marketing Menu Demo
Homepage
(1/2) Hero Experiments — Dark
(1/2) Pricing Plan Cards
Engineering
Zak, Thomas, Pamela & Myself
At Novlr, I wrote my first-ever web code. Over the following two years, I added 111k+ and removed 87k+ lines of production code. A great team and prior experience with Swift (iOS/macOS development) kept my time to proficiency minimal.
(1/2) Lines of Code Added / Week
When Zak and I joined Novlr, the tech makeup was Angular, Node.js and MongoDB. We worked with this setup but experimented with a Next.js, Tailwind CSS and TipTap (an exciting new headless content editor) project on the side. It became apparent that investing in the Next.js project full-time was the right move. Novlr was more performant, and our rate of development was faster. Together, we rebuilt Novlr's entire front-end.
Main Tech Stack
This also made Googlebots happy...
Search Performance / Day
While checking out potential technologies, I built a fun AI color-shifting TipTap editor. Under the hood, I debounced OpenAI's GPT-3 API and asked for a hex code that best matches the document content. White or black text is chosen depending on the contrast score with the dynamic background colour.
Jul 2022 — TipTap & OpenAI Experiment
Document versioning is the most complex chunk of Novlr's codebase. Similarly to Git, document versions reference each other. They can be previewed and reverted. Projects have multiple documents, and documents have many versions.
Versioning System
Writers have offline protection whilst in environments with unstable internet, like when travelling on a train. We achieved this using the browser's IndexedDB for storage and offline branches. When the internet reconnects, data stored in IndexedDB syncs with the server.
Analytics System
Another tricky engineering challenge was building real-time writing analytics on top of document version histories. There are over 30 million document versions in existence. We settled on an approach where analytics calculations "bubble up" from document versions to construct daily, monthly, yearly and all-time totals.
Up Next
zwo.fyi — Building Workouts with AI->
Getting noticed by industry leaders, coaches, and athletes.