Redesigning Reddit with dotjs
What is dotjs? It's a way to customize your favorite website using javascript + jQuery. @defunkt created it. Get it here (firefox)(safari).
For techies, why you might like dotjs instead of Greasemonkey:
It works on Chrome and Safari (Firefox support requires FF4).
It's revisionable using github or dropbox since dotjs is just a folder with a bunch of js files. Write once, effective everywhere on many browsers.
It gives you convenience such as jQuery.
For normals, why you might want to customize your favorite websites:
Have you ever read YouTube comments? Ever wish you never read them, ever?
Have you ever put a duct tape on the right-side of Facebook?
Have you ever wish that Reddit becomes prettier?
This post is for all of you backend developers who are interested in learning frontend programming. I'm not the authority on this subject, as a matter of fact, I'm learning a lot while doing this.
This is the beginning of many posts on how to learn doing site redesign.
In this redesign, there is a type of user (persona) called "Me". Me is the VIP customer and this is how we describe Me:
He reads Reddit more than 5 times a day.
He always click "next" at least 4 times (He will read page 4 or older).
He never click "next" more than 10 times.
He always read top rated comments.
He could care less about statistics, badges, and list of moderators.
He appreciates gimmick ads on Reddit knowing that they need ads revenue to survive.
He likes to explore multiple subreddits.
He comments more than posting.
He will upvote insightfulness.
He really thinks that Reddit footer is ugly and hates it with passion.
Given this persona, we will try to redesign Reddit and limit our scope appropriately. In this redesign, we will assume that Conde Nast is permissive, encouraging, and benevolent.
This is what Reddit site looks like at the moment:
Clearly we have a lot of work ahead of us.
Me hates it with passion so its natural if we starts from here. The footer is not only lame but looks out of place from the overall site design.
The brothers and sisters columns are completely unnecessary since each of them is quite popular already, they don't need Reddit juice. Google doesn't advertise FeedBurner on their footer. YouTube doesn't advertise Google Search on their footer.
about us column is important since it's part of revenue strategy, but what's up with the color? I can understand gold, but red? Also, /store should be group together along with other revenue generating links. It seems sensible.
the help column sounds important to help integrate new users inside the hivemind quicker. Unfortunately three of them raise 404 error. We should remove them.
So, how are we going to redesign the footer? Easy. Trim out useless links and splat important links into one line. See result:
This is the meat of Reddit. It's what separates men from boys. Our redesign should enhance Redditors experience and most importantly maintaining its soul.
Number one complain that Me have is that listing item feels too cramp. Too many things going on in such a tight space. We'll try to address this situation by adding generous negative space between items.
Another thing that I will do is to get rid of the enumeration. Me often misread the voting count of a particular item thanks to this useless enumeration. By doing so, we can reclaim some real estate space.
Ideally, we could/should change the link blue color to something soft, easy on the eye (#369 perhaps?). Unfortunately, due to limited resources and perhaps lack of skills I'm unable to make such enhancement (nerd alert: I'd like to style only non :visited links).
Another cool thing I'd like to have is endless pagination. It would be super cool to not have to click next. But that's too mean to Reddit guys. See result:
Me was adamant that the sidebar doesn't provide him any value, thus have to be removed. But when I brainstorm on where to put the rectangle ads, I couldn't come up with better alternative. Thus, the sidebar stays.
I tackle the sidebar by removing all useless features that Me dislike. Soften the search box and make the subscribe button larger since he likes to follow subreddits.
I removed the crayon-like pointy button because Me thinks it looks gimmicky and lame in general. Those buttons stand out among boxy feeling that Reddit have. We also removed the description for these buttons. Why? Reddit is a household name that's mentioned on mainstream TV. Reddit buttons don't need explanation. See result:
This section is the most important entertainment value that Me get from Reddit. Me also suggests readability style look on this page. So I took on this challenge by giving comments a generous line-height and slightly bigger font-size.
I also expand the make comment box to allow room for greater thinking process. Hopefully this could help reducing meme-ish, one-liner comment. It would be cool to have markdown text editor to enhance the textarea experience, unfortunately, due to lack of resources we are unable to make such changes. The save button is now uniform to the rest of other buttons. See result:
Finally, we are down to the last piece of redesign. The easy target for redesign is surely Reddit tabs. They are too small and look like something out of 2001. I streamlined that and cleanup a few links on gray header bar as well. I removed saved tab since Me uses a different app to remember links.
I also cleanup the user corner by making it blend together into the main banner. See result:
The whole redesign process took about 6 hours. 1 hour planning and 5 hours of jQuery programming. This blog post took 10 hours to write. You can get the redesign code here. See you next time on "Learn site redesign with a backend developer".
Bonus point: Since you guys made it all the way, here's what Reddit looks like 5-6 years ago.