How we redesigned one of the biggest news sites in Hungary

How we redesigned one of the biggest news sites in Hungary

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.

Before and after the redesign
Before and after the redesign. Better typography, improved layout system and of course more image content

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

Subscribe

Like the content?
We let you know when we have something fresh!

Design consistency

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.

Iconset and styleguide of HVG
Working on the style guide and the usage of icons

What did we put in a style guide?

  • Buttons
  • Typography (where and how should it be used — font-sizes, paragraph usage)
  • Use of colors
  • Elements (article elements, content blocks)
  • Grids

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.

Assets of the design
We designed a flexible library for control elements and dynamic assets that can be inserted in the anywhere on the pages - it will fit nicely

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)
Wireframes versus the visual design
Wireframes versus the visual design. We had to make lots of wireframe iterations with real data to test the layout.

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:

  1. 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.
  2. 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)
  3. 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)
First view variation
First view variation. One important lead article rules the page layout.

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.

working with paper prototypes
Working with paper prototypes - we are brainstorming about the placement of ads

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.

Designing the wireframes
Designing the wireframes. First we used paper prototyping to move quicker. Then we moved to digital wireframes which could be easily turned into clickable prototype in UXPin

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.

A few moments from the project
A few moments from the project. And yes, that's a snowball. And yes, it hit the target ;)

What’s next?

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!

Schedule a call with our expert
Seven Step UX

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.

What can we do for you?

  • Product UX/UI design
  • Mobile applications
  • Consulting
  • UX research

Let's talk

Daniel Knaust

Daniel Knaust

Co-founder, CEO
danielknaust@webabstract.io +36 30 626 29 66
David Dorosz

David Dorosz

Co-founder, COO
daviddorosz@webabstract.io +1 314 919 6461
Let's talk
Thank you for contacting us! We will get back to you as soon as possible.
Copyright by Webabstract 2017
Thanks for subscribing!
Want a Free UX Consultation?

We can review your product, get expert feedback or discuss UX and design issues.

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog

Schedule a friendly call with our expert

Enter your email address and we will contact you to schedule the call:

No, I'm fine

Thank you! You are awesome!

We will contact you shortly!

Return to the blog
Free eBook

Improve your product’s UX with these 10 simple steps [FREE EBOOK]

Sounds interesting? Enter your email and download the ebook for free!

No, thank you

Like the content?

We let you know when we have something fresh!

No, thank you