Hackernews Redesign

media/mockup_720x1981.png

The challenge: adding to a simple thing - but after the additions, make sure it remains simple or even simpler.

To get such a task, it felt like diffusing a bomb - slowly but surely, I made myself familiar with Y Combinator, Hacker News and its community at large.

All in all, I hope I made Y Combinator justice with my new redesign attempt.


Introducing the Y-Meter

  • Visuals: Using a visual cue instead of a textual one for signaling ranking.
  • Ranking System: Defining a numeric system for ranking points - composed of 6 levels.
  • Brand: Keeping the Y-Combinator brand intact.

Visuals

Developers and techies are busy. During the day we're submerged with work and don't have alot of time to get updates on the things we like and find important.

Making information pop out at a glance is important because it removes a psychological friction of evaluating results, and making sure that information is visual rather than textual goes straight up to the visual part of our brain.

Ranking System

6 is a magical number. Human beings have limits on the capacity for remembering information, as George A. Miller wrote in an article that was published in 1956 by the cognitive psychologist.

My Y-Meter system presents 6 extents for ranking (0-20, 21-50, 51-100, 101-200, 201-400, 400+) so that the theory will plug right into practice - and a given reader will quickly understand the hotness of an item.

Brand

The colors I used are originating from the "Y-Combinator" logo. I simply used the scale from #FFFDFC to #FF6602 and derivatives are rooted at that scale.


Original vs New Design

A tweak was also made to the information hierarchy, and ordered by what I thought is important for a Hacker News reader (I came at that by asking a few people and experiencing HN for the last months).


before_after.png

Original

  • Position in list (numerical)
  • Title
  • Domain
  • Points
  • Author
  • Published date
  • Comments (engagement)

New Design

  • Points (the Y-Meter)
  • Title
  • Comments (engagement)
  • Author
  • Domain
  • Publish date

Breaking it down

The information hierarchy in the new design is different. The new ordering allows the reader to find his way around more quickly by a simple horizontal scan of the item, from what I belive is more important.

The Y-Meter which represents the points, is at the begining of the line, follow by the title itself. The title in the new design is bigger and more readable. The font (Helvetica Nueue) is up for a more modern, cleaner look.

Comments - unlike the original version, I belive that the comments should come right after the title becouse they indicate how intersting the article is and how much buzz it has. Follows is the Author, less relevant for majority of readers (although avid HN readers really see it as important) and the same goes for domain.

Finally, the publication date - it's less relevant due to the fact that the articles stacking upward are ordered by a secret HN sauce and not chronologically :).

Readability

One line for all important information and a better separation of information. The background color is 3% of the base color #FF6602 - it's lighter then the original one and provides higher contrast.

Using the horizontal packing of information, in my opinion, eases on the eye that moves in a single motion per item when scanning the line.

Summary

A few of my focus points:

  • Minimal design
  • Re-inventing the HN concept but not overdoing it
  • Exposing new alternatives for the rating system (introducing the Y-meter)
  • A new way of consuming information (hierarchy)
  • Modernizing fonts for readability
  • Brand and color utilization

Thanks for spending time seeing how I evolved the Hacker News design - it was an awesome drill, and I recommend taking a shot at it yourself.

If you'd like to shoot a line, I'd love to see what you think, at hilapeleg@gmail.com