Animal Rescue NGO Website Redesign, Part 2: The News Page

May 20, 2020 4 min read

This is part 2 in a 10 part series. In the previous post I introduced the project and covered the home page, in this post I will be covering the news page and sharing my thoughts on the current design as well as showing the design I made based on those thoughts. You can scroll to the bottom for the final result if you don't care about the process.

The old header

Since the header is the same on every page, I'll just refer you to my thoughts the first time around.

The new header

The updated header is pretty much the same as it was on the home page, except the language navigation is now on the right instead of being right after the menu as it was on the home page because we no longer have illustrative artwork coming from the top right down. I'm actually not sure if the change in the language menu location is okay or not because I know that navigation should be in a predictable position and this sort of breaks it.

The old news section

Thoughts:

  • If it's clear on what page the user is on there is little point in having a page title. The browser's tab is the title, the active navigation element tells the user where they are and also the content on the page tells the user where they are. That's already three information pieces so I'd say we don't need a fourth one.
  • The colour choices, spacing and typography here are all very badly executed. The contrast of the green title to its white background only gets 2.1 WCAG. Spacing of elements is uneven and thus off-putting creating an unprofessional image even to an untrained eye. The font sizes don't relate to each other well, with the title being big and the meta data being very tiny.

The new news section

In the updated news section I opted for a similar structure I created for the home page "links section", creating a clear trend for the informational content on the site. With decent spacing, contrast and better relative font size for the typography chosen here the new news section shines in its imagery and draws the users attention to the right things - content, instead of the bad design.

The old pagination

Thoughts:

  • The pagination sits at the bottom right corner of a very long page and it is unlikely the user will ever paginate anywhere at all given the pagination is hard to find because of that.
  • Even if the user finds the pagination by scrolling to the bottom of that very long page, it is unlikely the user will interact with it because it entails a new page load, which with the ever-decreasing attention span of the average internet user is unlikely to be something a user wants to do.

The new pagination

The updated pagination isn't a pagination at all. It's just a button that loads more news items to the bottom of the page. The user is already aware that doing this does not entail a whole page load due to it being a popular implementation of a pagination alternative throughout the internet and instead of having this at the end of a very long page, we make the page much shorter and more interesting.

Putting it all together

The end result is this:

I know you were thinking; "but why all the empty space in the header?" when you started reading this post! As you can see, it's because the whole news section got lifted upwards into the header. The news page is now much more interesting because the news posts vary and have imagery. It's also much more likely the user will keep reading older news because of the new and faster pagination alternative and the whole thing now looks professional yet still friendly and hopeful.