The main part of the work consisted of rethinking and simplifing how people consume news on the site, introducing better layouts and information hierarchy, creating new visual language along with new illustration style, updating the account flows, as well as updating the visual language and tone of voice.
One of the main changes was introduced on the home page. Instead of using a 3 column grid, we went for a simpler 2 column one, bundling together multiple content types into the main newsfeed on the left. Top stories, in-depth news commentaries, short remarks, articles on different topics and podcasts, all these are now a part of one single feed.
This solution is especially helpful when dealing with mobile devices, where people are used to consuming different content types in a single feed.
Additionally, visually strong thematic anchor was introduced at the beginning of each headline, making the scanning of the content easier on the eye.
The right column is all about live news reporting that combines feeds from multiple sources, social media posts or embeded videos. As part of the new content strategy, this column is linked to a whole new live reporting section.
Themes are another element that was introduced with the redesign. They are represented by a consistent tagging system throughout the homepage, article details and themes section. The behaviour of themes on the homepage should be dynamic based on the most pressing or popular issues.
User account is another important aspect of this independent medium, as donations are their main source of income. We had another look at the state of the account flows and decided to simplify them, bringing in more of industry standard patterns and interactions. They were reworded for better understanding of the context and user expectations. Separate blogging account was combined into one major account.
The main menu was redone into a simpler one liner version with the primary focus on 'Donate' and 'Login' CTA's. Saved articles is a new element that was surfaced on the main menu, as it's one of the strategies to hook users into coming back and using the website in the long run.
Postoj's brand is known for its underline visual element. Whereas previously it was used throughout the website as just that - a visual element - I was trying to give it another dimension and unite it with the logo itself - by using it to underline author's opinion, author's 'postoj' (Postoj means 'opinion' in slovak).
Illustrations are additional element through which a brand can shine. Adding illustration to otherwise type heavy content, it can bring the serious side of news reporting a breath of fresh air. Coupled with a creative copy and utilising proper context, it can even bring a smile to people's faces, making a potentially deeper connection with the brand.
Although it may not seem like it, a typeface plays an important role in content heavy sites. I eventually opted in for Merriweather to replace Roboto Slab, which felt a bit clunky. These things are always a very subjective matter, but you be the judge.
The overall layout was created with a more 'room to breathe' approach. Larger paddings, larger headlines, larger body copy and updated colours to pass the web accessibility standards to cater to those with visual disabilities. We have to look out for each other.
Talking about a website being responsive these days is like telling people exercise is good for their health. It's a no brainer. Breakpoints lower than 768px required a slight reshuffling of content, losing the articles description and overall number of pieces displayed. Additional A/B testing will be necessary to determine how people consume the redesigned content and additional reiterations may take place.
Although we were basing our redesign assumptions on research of Postoj's user preferences, site behaviour from Google Analytics and our own experience and knowledge of web industry standards, the redesign is just the beginning. Only time (together with data from A/B testing, analytics and consequent research) will tell, where we went right, and where we need to iterate more.
My biggest personal learning is that communication is key. And to bring the pixel perfection to the live implementation of the site, you need to be resilient. It can be a bumpy ride.