Hacker News UX+UI Redesign Process

A few weeks ago, I took a weekend to redesign one of my favorite sites, Hacker News. Having not done a redesign in a while, I knew the first thing I had to do was establish some baseline of why I was motivated to redesign the site.

Original HN Design: news.ycombinator.com

Photoshopped articles #7-28 out, or it’ll take up the whole damn post!

My HN Redesign: 

Click on this image to zoom into a full-resolution view
Click on this image to zoom into a full-resolution view



As a regular user of Hacker News, I had to put on a pair of fresh eyes.

I took an image grab of the full page and zoomed in, going slowly from left to right. Did everything make sense if I were a new user?


Heuristics basically means “best practices,” so I evaluated the site to test if the site was designed using UX conventions. I found these to be the biggest issues of HN in my heuristic analysis:

  • The visibility of system status
    The user may not exactly know that the home page is a filter of the most recent, top-voted content
  • Placement of the search bar
    It’s at the bottom of the page
  • Pagination
    No pagination, only a “More” button
  • The grouping of items
    Items of different functions are grouped together – should be separated


I was so used to Hacker News that it was natural to assume others used it the same way I did.

So I asked a few friends who’ve never visited HN before to browse the site. Here are some example tasks in our user test:

  • Tell me what you see
  • Can you show me how you’d view new articles
  • Let’s say you’re looking for a specific article. How would you do that?

Just from doing this with a few users, I found some interesting insights, along with confirming my suspicions from the heuristic analysis:

Content Filter 

Users seemed to understand, after selecting “New” and “Comments” that these were like filters for content.

But when I asked them “Can you show me where to find the most popular content?” 2/3 of users struggled and tried clicking on the other filters Ask, Jobs and Submit.

One user instinctively clicked on the Y Combinator logo and asked “is this it?”

I concluded that it wasn’t clear to new users that the home page of Hacker News is pretty much a filter of the most popular (by upvotes) recent posts.

This also convinced me to make filtering content more obvious by separating these sections from the header and into their own “filter tabs.”


“Can you show me how to see more content on this page?”

Users took a while to spot the “More” button, but got the hang of it.



However, when I asked them to go back to the previous page, they froze for a second. “I guess I’ll use the back button.”

This convinced me that the pages should be paginated, instead of only having a one-directional “More” button.


When users were asked to search for a particular article, they also froze for a bit. One of the users used CTRL+F and said “maybe I’ll find it this way.”

Then after I asked them to scroll down on the page, When I asked them to scroll down to the bottom of the page, they said “Oh the search bar is here? Why not put it at the top.”


That confirmed my feelings about the search bar too.

Submit and Log-on

One of the most telling non-verbal signs is when users squint upon seeing a page for the first time. They squinted hard at the submit and log-in pages:


“This page is kinda ugly.”

I thought so too. We went from a nice gray-orange on the homepage to a stark, utilitarian white.

The thought also occurred to me – why go to a separate page just to log in? Why not just use a pop-up? (You’ll see a design for this at the end of this post)

3. Sketching

With the insights in hand, I started sketching out the UI.


Here’s a quick list of the changes I made in my sketch

  • Grouped similar items together like Search, Submit and Login (all actions)
  • Group filters / content pages in their own section
  • Changed headings to “Show HN” and “Ask HN” so users will have a clearer connection between the site title “Hacker News” and the often-used abbreviation “HN”
  • Added pagination
  • Cleaned up the footer

4. Sketch + Photoshop Time

There’s nothing fancy in this design so any version of Photoshop (or any other tool) would suffice.

Font Used: Avenir
I wanted a versatile typeface with lots of variations (from light to bold) that was also clean and minimalist. I forget where I found Avenir, but definitely remember Googling something like “Nice light readable body type.”

Colors: Used ColorZilla Chome Plugin to pick out Hacker News’ colors. Then I adjusted my colors based off of that to have have more pastel look. I know this is not the brand color for HN, but hell, it’s my redesign :p

Icons: The search icon came from the Glyphish 6 icon set

The most time consuming thing was making sure everything lined up and getting each article to look right, since I’ll be repeating that design 13 times. Replicating things is a fast way to test whether a design can “scale.”

The final design, with a new take on the login function, is here:

Click on this image to zoom into a full-resolution view

Problems with this Redesign:

No design or redesign is ever “done,” so what could I have done to make the design better?

  • *Edit: Text – especially article test is too damn light. Sigh, should’ve had my mom look at the design first :p
  • Could use more user tests (I had 3)
  • Code in HTML+CSS for a functioning prototype for people to play with
  • Brainstorm how to fit more items on the home page (the original had 30 vs my 14) without sacrificing (ideally, the new pagination will offset this a bit and encourage people to view more content.)
  • I should’ve documented my user tests with video capture or at least an audio file that shared what the users said.

It would have been nice for y’all to see real user testing reactions.

Want the .sketch + psd File?

Subscribe below to get the design files, and lots of other freebies.

Hacker News Redesign Files Dropbox Link


7 responses to “Hacker News UX+UI Redesign Process”

  1. I want to implement this! Think we can get a Stylish stylesheet? https://userstyles.org/

  2. Develop a Chrome plugin to fix it, mate. :) I use many chrome plugins that alter the design and add new things to HN everyday. Here’s one of them:


  3. You need a ‘like’ button here so it links to FB. I tweeted this.

  4. Hi, just signed up to your blog. I use Balsamiq for mockups. Once you are relatively happy with your first sketch, you can go an test it on people you can create fully interactive wireframes that you can use for user testing. It can be used for mobile, tablet and desktop designs (it has all the templates and functions). Menus link, buttons link, accordians work etc. It exports to PDF, so you can send it via email to people to use. It’s not free though, $79 once off, but with how much I use it, I was happy to pay for it.

    1. Currently exploring Sketch, thanks for the comment :)

  5. Very Good post. I am HCI student, and I always wanted to do redeisgn project but did not know where to start. Thank you for sharing your design process.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.