It’s always a big deal when a news site gets redesigned. HVG — the weekly economic and political news magazine — just rolled out with the new design both in print and online.
As they needed professional help and a different approach for the redesign the product team of HVG hired us, the Webabstract team to help them in the design process.
It was an exciting three months while we worked together closely and also it was interesting to learn how a company at this scale operates.
In this short article, I’ll guide you through our journey of the redesign. How we did what we did and why.
If you have any thoughts on the project, I would love to hear that — drop me a comment at the bottom.
Why was it necessary to redesign?
OK, I know this is trivial but still. Why was it important? Basically, the site design hasn’t been updated for years know but the way we consume information changed.
We want more information, faster, more visually and in a more personalized manner. Images became more important and are playing a crucial role in the understanding of content hierarchy. The old site couldn’t cope with this.
How we read and scan articles changed — there’s a strong need for better typography, more scannable, readable and visually more engaging content.
The goals, objectives, and constraints
One of the biggest problems with the previous site was that it made a feeling like a classifieds website; overly populated with small font-sized text, thumbnail like images and it all made a cheap and crowded feeling.
Also, the articles suffered from the lack of visual engagement. Small font-size — again, no visual anchors, dividers, images, highlights of any sort.
Therefore, the main focus was to give the content a simple but cleaner look and have a structure that allows the editors to create this.
Actually, the print version existed before the online was ever released :)
Since the HVG has a print version the website and the print had to have visual elements in common.
This is difficult since what works well in print might look too harsh on the website and which is gorgeous on a display is weak and odd in print.
Adapting to the project
When we joined the redesign process it had already begun. New designs were made but the project suffered from the lack of a precise design workflow.
One of the biggest challenges in a project of this scale is to reach and keep consistency. If you design a site that will be seen by millions of people in a month you have to be strict on two things:
Design patterns and Design consistency
What are design patterns?
Design patterns are common solutions to design problems which are familiar to the user from others sites and applications.
The best way to understand design patterns is thinking of the placement of the login/logout function. Close your eyes as think about it: if you want to log out from a website where would you go to find the logout button?
Yes, you are right, it’s in the upper right corner. And it should be there! Since millions of sites have user management and you have to create accounts and log in, it would be a pain in the ass to find the login/signup function again and again.
Users know where they should look for a signup or login feature, therefore, it’s essential to follow this pattern when designing your own site.
To uncover design patterns in you area you have to dig deep and do some research.
Which website does your target audience visit on a regular basis? What kind of feature are they using? What solutions are the accustomed to?
The answers to these questions could lead to uncovering design patterns that will ease you users way. Don’t reinvent the wheel just find the best use of the wheel — best for your customers.
Making it work in the project
We made an extensive research in the news site niche — including Hungarian and foreign websites. We gathered the features and solutions that our audience is accustomed to and love using.
This resulted in a list of helpful solutions:
Sticky header for easier navigation
Floating social sharing bars
Bigger, more engaging image content
Like the content?
We let you know when we have something fresh!
And the other important stuff is the consistency of course. What do I mean by that?
Imagine a website where you have different typography on each page, and different button designs for the same purpose. Scary, isn’t it?
But it could be extremely hard to maintain consistency — especially if you have loads of pages with loads of content.
The solution is quite simple: let’s create a style guide!
A style guide is categorized and ordered document which showcases all the visual elements used in a product.
What did we put in a style guide?
Typography (where and how should it be used — font-sizes, paragraph usage)
Use of colors
Elements (article elements, content blocks)
Making it work for the project
We had to put a lot of effort into keeping consistency. We had to think trough all the usage of the elements.
For example, ok this heading type would look great on the home page. But would it suit the listing pages? Should we change the font-size when we display it in the right sidebar?
Of course, designing elements is just the first step. It has to be implemented and looked after carefully during the front-end development — this was when the development team of HVG took over.
Case study: Designing the home page
The home page was an extreme challenge because...
everybody wants to be involved in the homepage — since that’s on of the most important pages (in reality, it isn’t. Those are the article pages but let’s move on)
it is manually edited by the chief editors so it has to be flexible
it has several layout versions to match the communication
we had to design the advertisements — because that’s where the money comes from
But! the advertisements shouldn’t destroy the overall experience (this is an endless debate with at least hundreds of opposing point of views)
Huh, so let’s get started.
This first question is what are our priorities? How should we build up the content structure?
With these questions, we sat down to brainstorm with the key stakeholders within the company. The objectives we came up with:
The first priority is to design a first view (that is, the first section of content displayed on the homepage) that encourages you to immediately dig deeper on the site, and dive into the latest articles.
As the homepage is — at least from an advertisers view — the strongest page it was a high priority objective that we display the advertisements in a way that looks good and is inviting to click on it (of course this is the field of strong debate between content and ads)
Thirdly, the editors wanted to customize the homepage according to the news and content (eg. if there’s a breaking news or story than the homepage should reflect that)
Diving deep: creating the first view
Based on the content structure, we started to sketch wireframes for the home page. The biggest challenge here was to design the first view.
For the first view, we design 3 layouts based on the most frequent usage of the homepage:
Standard first-view (most displayed version; one lead article and parallel articles)
The breaking view (if something groundbreaking happens — like Charlie Hebdo — the first view informs you and gathers all the related content to the homepage)
Large lead view (mainly for the weekend, with big, beautiful pictures)
Two parallels view (when two, almost equal topics or news should be displayed right away when you arrive)
We iterated the first views based on customer feedback and polished the final versions.
Continuing the homepage
After the first view was designed we continued to plan the rest of the homepage.
Since the homepage’s content is edited and refreshed frequently there was a strong need for a flexible and rearrangeable content structure (that is, you should be able to swap elements, reposition them with everything looking good).
To make this work, we created a grid system. That means we divided the homepage layout into equal sections.
This allowed us to design all the elements on this grid and play around with them.
We used a lot of paper prototyping to create the final layout.
Since we had to position a lot of content blocks and also a lot of advertisements, paper prototyping allowed us to brainstorm, and try different layouts to come up with templates for the homepage which are supporting our objectives.
Lessons learned from the redesign
The homepage was just a small part of our work. This redesign was just the first step for HVG to adopt a faster and more precise product design method — and hopefully, they will maintain the continuous design and development on the site — based on user research.
Here are the most important lessons that we learned from this project:
#1 Always try to keep the design consistent
Elements can look good, pages can be designed gorgeously but the whole product could fall apart if you don’t pay enough attention and care to keep the design consistent.
Always create a style guide... like always! (try to create a so-called “living style guide” where elements are coded) and make sure everyone on the product team can access it.
It’s absolutely essential that the designers, developers, QAs, product manager and all the stakeholders could see where the process is right at the moment and they can see and brainstorm with the design elements.
#2 Have a cross-functional product team, and have cross-functional brainstormings
If you read any books on Lean this should be familiar to you (if not, start here). It allowed us to move faster in the design process that we involved internal designers, developers, sales and marketing guys in the design process.
They all added value, they all provided a different angle on the design.
#3 Prototyping is always a good idea — even if you don’t think you have time for it
Trying out different ideas and solutions, creating paper prototypes allows you to visualize ideas before you would fire up Photoshop or enter a single line of code.
We had to work in a fast-paced manner and hand-off quickly for the developers. Therefore, we held brainstormings involving the developers (they could react and plan immediately) and always creating lo-fidelity wireframes, paper prototypes to save time and iterate quickly.
#4 Use a precise design workflow and have everybody involved in it
We like to use a Kanban-like method for the designs. There are states (In progress, Needs Approval, Approved) and versions.
Apply a tool that allows everyone to see the designs and interact with them (we recommend Invision for this purpose). All the designs were uploaded into Invision — there you could comment, interact, see different versions and follow-up the design process.
Well, we hope the team would continue to advance the product :) We’ve spent great hours working together and the development team just released the first version.
If you have any thoughts on the project, I would love to hear that :)
Got a burning question?
Or are you ready for the next step?
Schedule a quick 30 min call with us, we would love to help you!
My life has been organized around the marriage between strategical thinking and visuality. That's what makes me a UX Architect. As just with real architects, both the function and the aesthetics are my domains. If you are curious, check out my articles on our blog, or meet me at varios lectures and presentations I deliver.
SEVEN STEP UX: The Cookbook for Creating Great Products
Our co-founder and UX expert, Csaba, wrote a hands-on, down-to-earth approach to UX design that provides a complete overview of the Seven Step UX product design process that we use every day at Webabstract. This book is a practical, step-by-step guide that will take you through all of the steps and teach you all of the methods you need to know for UX work from planning an app or website to wireframing, research, and design. It is a must-read for understanding user experience design.