Designing Readability

The original Readability bookmarklet took on such a life of its own between 2009-2010, it made this week’s launch of Readability.com inevitable. The tool and the big ideas behind it matured quickly this year, right the midst of an ongoing publishing crisis. The timing, advisory board and innovative pay model set the stage for a pretty exciting launch.

Rich already summed up the new Readability very well, as did Anil Dash:

It’s been extremely gratifying to hear a roomful of coders and entrepreneurs talk passionately and at length about how important it is to them to support great writing, and great journalism. They speak honestly and sincerely about being on a mission, and about building a meaningful business that’s thoughtful about the way it does its work and the impact this product has on the web.

The design process itself was a three-month sprint. The core ideas of the “new” Readability were ironed out long ago, but many new ones crept in during the design process. Things moved so fast that wireframing went from impractical to impossible. There was no existing branding, but the primary guideline was to create something that spoke to the tradition of a calm, comfortable reading experience; a conservative idea with a radical payment plan that aspired to change how we fund online content. Wrapping that message in a restrained design was a big challenge.

In the early phase, my buddy Yaron Schoen came in on a freelance basis to pour the concrete: color palette, logo and style guide stuff. For supporting illustrations, we contracted a Brooklyn illustrator who digitized and “mastered” old public domain images to support the design. The project also introduced us to the talented Erin Kissane who brainstormed with us during the day while editing a new A List Apart book at night.

Today Mandy Brown from Typekit summed up what became the final product:

The new website sports Adobe Minion for a classy look. Subtle shifts in color, placement, and type size create a clear hierarchy, while the subdued color palette suggests a calm, quiet reading room.

When that phase wrapped, I took the building blocks and began laying out the homepage, reading lists and dashboards. As the development scope shifted, the design happened more in the browser than in Photoshop. There are pieces I’d still consider ‘first drafts’, but that is a lesson of working in a startup where the priority is to launch first and then iterate.

After a series of all-nighters, 10 of us gathered in the board room Monday night to begin final testing and deployment. We were coordinating with the NY Times article which published around 10:00pm. We went live to the public around 11:00pm and began immediately tracking questions, blog posts and tweets. Within 20 minutes, the launch was a Top Tweet on Twitter’s homepage. At 2:30am we finally we stumbled out of Arc90 and into the snowfall outside.

Since launch, sign-ups for both Publishers and Readers have been magnitudes greater what we’d predicted. We’re continuing a dialog with users to address any misconceptions and remind folks that the extensions and bookmarklets will always be free. What’s obvious is the desire for converting web content to an e-Reader format with TiVO-like features resonates with many people, especially as publishers struggle to find a model that suits readers and publishers equally. The “new” pay model has worked for generations: pay people directly for their talents in return for a great experience.

I’ve started a reading list here. If you like similar stuff, drop me a line on Twitter and send me yours. In upcoming months, we will have methods to share and recommend that content, so stay tuned.

Read more Readability press from this week: