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
My HN Redesign:
TL;DR THE PROCESS I USED
- Heuristic analysis
- User testing
- Sketch the UI
- Redesign in Photoshop
1. HEURISTIC ANALYSIS
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
No pagination, only a “More” button
- The grouping of items
Items of different functions are grouped together – should be separated
2. USER TESTING
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:
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)
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:
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.