Readr for reddit

  • 2014
  • UI
  • Development

At some point towards the end of 2014, I found myself spending a lot of time reading on /r/writingprompts (an online community on reddit dedicated to writing short stories). The fact that I was visiting my parents for the holidays at the time was not helping either. Reading 12 pt. text on a retina screen tends to take its toll.

With a subscriber base of over 1.5 million people at the time, I thought to myself, I couldn't possibly be the only one who faces this issue. As much as I like reddit, it's typography leaves much to be desired.

Reddit.com

I reached out to a couple of friends, explained the problem and explained my solution. It was a simple one too :

A browser addon that displays reddit comments like a Medium.com post.
They loved it.

Having taken care of the validation, I started working with one goal in mind : Ship this in 12 hours. With good reason - I've had one too many side projects die due to feature creep.

Spending a good portion of the holidays browsing reddit helped me shortlist the most important aspects of a reddit comment :

Content
Author
Score
Gold

After exploring a few different layouts, I settled on a single-column text only design for it's innate simplicity, built-in responsiveness and ease of use.

Good typography is an absolute necessity for any kind of text based interface, even more so for one built for reading. I used Google Fonts to create some font pairings that worked well for long-form content.

1. Open Sans
2. Open Sans + EB Garamond

With the font pairings decided, I moved on to designing the user interface on Sketch.

Original Readr for reddit

I spent the rest of the coffee-fueled night alternating between Chrome Developer Docs and my code editor. Once I was done testing Readr on a couple of different dev environments, I submitted it to the Chrome Webstore and posted it to reddit.

When I woke up the next day, I was pleasantly surprised to find my addon on the front page of reddit (where it stayed for the rest of the day). The overall response was very positive, with over 3000 downloads in the first 24 hours.

What I had not expected was the large number of responses giving detailed feedback on Readr. This was an important lesson on the benefits of shipping fast.

Is there any way to use it to combine multiple comments into a single, clean-looking story? - /u/Luna_LoveWell
Hey, is there anyway you can allow pictures to be integrated into the look as well? As of right now you have to exit the read add on to see the picture then re-enter it. - /u/pandizlle
Would be nice to be able to click through to the next top-level comment, so I can read ALL the stories without having to leave the pretty view. - /u/Rimbosity

I collected all the feedback I had received from reddit and started working on the next stable version. During this time, I also started development on a firefox port of the addon.

Readr for reddit

Of all the feedback that I received, one issue came up quite often : The button that opens the Readr interface was hard to find. The original positon of Readr's 'Read' button was under the comment body along with other CTA's. After giving this some thought, I came up with an alternate solution - Show the 'Read' button on top of a comment body, rather than below it. I added this as a configurable setting on the newly added 'Options' page.

The following week, I updated Readr on the Chrome Web Store and launched it on Firefox. I also took some time to design a simple logo and a landing page for Readr.

Readr for reddit is available for download on Chrome and Firefox. You can also visit the website here : http://readrapp.co/.

Up Next

Ami

Restaurant and recipe recommendation app