Redesigning Instapaper on the Web

“Well-written content is out there, and we do have opportunities every day to read it — just not when we’re in information-skimming, speed-overload mode.”

- Marco Arment, in the old Instapaper FAQ

We rolled out the redesigned Instapaper website today.

When I got the opportunity to redesign the Instapaper website my goal was to do justice to the service Instapaper provides. In the FAQ quoted above, Marco referred to the “information-skimming, speed-overload mode” we often enter while surfing. I think of Instapaper as a place I can go to take a break from that mode, and I wanted the design of the website to signal and support that break.

To do that I focused on simplicity. Your Instapaper tab should be a refuge from the infinite-scrolling, content-suggesting feeds vying for your attention across the web. A place where the content you know you want to see is supported by design that gets out of the way.

Of course that’s easy to say, and it’s even relatively easy to achieve that state of relaxing simplicity at the beginning of a refresh. The real fight is in maintaining it as you add features back in. I was determined both to guard that simplicity and to build a base that could support additional features without collapsing into incoherence. You can see some of how that struggle played out in my previous post on folders, the feature where I had the greatest difficulty balancing feature utility and overall simplicity.

I knew from the beginning that I wanted to fight out the decisions of the new design on the Unread page. Luckily, I had some great models of the content-focused experience I wanted to create in the Instapaper iPhone and iPad apps. One of the first things I did was bring the article preview from the iPhone onto the web, and that preview remained a foundational element throughout the redesign.

image

Early versions of the design focused on incorporating some of the app elements into previous centered page layout. I have a certain amount of skepticism of web pages being app-ified just for the sake of it, but eventually, I made the jump to the current two-column app layout. I was won over by the new layout’s possibilities for consistency across web and mobile, and I also liked the simplicity the two (well, sometimes three) column limitation would enforce.

You can view a relatively complete history of the Unread page iterations on LayerVault.

As the Unread page evolved, I took the patterns from there and applied them to the rest of the site. Fonts, page headers, icons, action menus, all got standardized. The article page view got a complete overhaul, again following the model of the mobile apps  and your reading progress now syncs on the web!

image

On the landing page, I tried to preserve some of the spareness and clarity of the previous design while also having a little fun (and indulging my addiction to drawing devices in CSS).


image

In all of this I was influenced by the great app and responsive web work I saw around me. Our stablemates Digg had their clean and trim Reader app out, MailChimp had just introduced their app-y redesign and Kippt had a nice, flat, two-column app. Looming largest of all in my mind was Rdio, whose thoughtful, context-appropriate consistency across web, desktop, and mobile apps has greatly influenced my ideas about how cross-device coherency can support a great experience.

Overall, I’m very happy with the consistency throughout the website, and excited about the base it provides for further development in conversation with the mobile apps. Thanks for reading, I’d love to hear feedback and answer any questions in the comments below.

-Grant