Motivation

With the web as one of the major frontiers and resources of our day, promoting accessibility and ease of navigation is key. In order to gain practice in so-called responsive web development, I redesigned the news section of YCombinator's website, Hacker News. I chose to redesign YCombinator’s Hacker News section in particular because it was interesting to me that a site that is by and for software developers–people whose job is to design simple, intuitive systems–fails to follow so many integral design principles. My redesigned site can be found here. Below, I detail the development process that allowed me to transform a website with poor usability and accessibility into a site that is more user-friendly (for all user!) and responsive. This is a photo of the original site:

Usability Problems

I began this project by making detailed note of the usability and accessibility problems I saw with Hacker News, listed here:

1. Small text (usability, accessibility)
2. Low-contrast text (usability, accessibility)
3. Unintuitivefunctionality and system status for upvotes (learnability)
4. Unvote functionality is difficult to employ after vote functionality, as it appears in a different location (learnability)
5. Inconsistent language between number of comments and “discuss,” which appears when there are zero comments (learnability)
6. Clicking on the time posted directs to the discussion, which is not intuitive (learnability)
7. Search is located at the bottom of the page (learnability, usability)
8. Clicking the link to the right of a story title directs one to search for other articles from that source rather than directing to the story itself (learnability)
9. No ability to unhide hidden articles (usability)
10. Not obvious that many links are, in fact, links (learnability)
11. “More” (bottom of page) isn’t very clearly a link (usability, accessibility)
12. No clear way to navigate back to the previous page of posts (usability, accessibility)
13. Lack of label on search form (accessibility)
14. Lack of margin or another visual separator to discriminate between posts (usability)

After noting these problems, I also employed WAVE to identify more acessibility issues. WAVE identified the same issues that I did, as well as a few additional ones. Some detected accessibility issues were not visible to the naked eye, such as having many empty links (could be bothersome for people using screen readers), images without alt text, use of layout tables (often don’t work w screen readers), lack of heading structure (no clear hierarchy for assistive tech users); this shows the disparity of web accessibility between people with disabilities and people who don’t. WAVE did note that the site's HTML had the language attribute set to English, which is a good start, as it helps those who use screen readers.

Low-Fidelity Wireframing

The next step was to create low-fidelity wireframes in Balsamiq with the intent of addressing the various usability issues identified. These are presented below for the following sizes: phone, tablet, and desktop. Wireframes are annotated with magenta callouts, which correspond to this list of fixes to usability issues:

1. Made top-level navigation collapse into a “hamburger”-style menu on smaller screens, making the UI more responsive (rather than clunky text wrapping)
2. Added a search bar at the top of the page, making it easier to find articles on specific topics
3. Added visual separation between menu/search and posts to differentiate functionality and make reading the site easier on the eyes
4. Changed article titles to better demonstrate they are hyperlinks
5. Changed display for upvote and comment buttons to make them analogous to other well-known UIs (YouTube, FaceBook, Instagram) and better reflect the state (has a user liked? Have they commented? Has anyone commented?
6. Increased whitespace between post title/author and other post details, made all of these clearly links, and more clearly described functionality
7. Kept a search bar at the bottom of the page as well but moved it up from the footer and made page navigation clearer than “More,” which was not even clearly a link.
8. On the mobile phone, removed links in footer that were irrelevant to the news portion of the site in order to fit it better and added “More” option to keep that information accessible, kept footer on other sizes the same. The prediction is that mobile users aren’t very interested in filling out applications or reading up on legal information, uses of the site that are more likely to occur on larger screens.

Phone Wireframes

Tablet Wireframe

Desktop Wireframes

Visual Design Style Guide

Before moving on from creating wireframes to high-fidelity prototypes, I created a style guide in Figma to enforce consistent conventions across prototypes.

High-Fidelity Prototyping

Lastly, I developed high-fidelity prototypes for phone, tablet, and desktop screen sizes (below). The desktop prototype is annotated with information regarding the CSS and HTML needed to produce the prototypes such that they are responsive. A large portion of the HTML/CSS for this project can be made simpler using Bootstrap, a library that provides pre-built HTML/CSS elements, javascript plugins, and more. I used Bootstrap for a majority, but not all, of this project.

Phone Prototype

Tablet Prototype

Desktop Prototype

Conclusions

Though there are some small differences between my final layout and my wireframes/prototypes, overall this project was a success. I was able to identify and address the usability issues that I had identified, and I was able to create a responsive layout that is easy to use and looks good on all screen sizes. Moreover, it gave me an appreciation of the effort that goes into designing a site that is truly responsive.