Are popups evil? Use them the right way!
There are lots of misconceptions about popups. Here's a definitive guide: how to use popups, tooltips, popovers, etc. Best-practices and guides with lots of illustrations.
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.
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.
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.
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
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.
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:
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.
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.
The home page was an extreme challenge because...
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:
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:
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.
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:
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.
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.
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.
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 :)
Schedule a quick 30 min call with us,
we would love to help you!
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.
Enter your email address and we will contact you to schedule the call:
We will contact you shortly!Return to the blog
Sounds interesting? Enter your email and download the ebook for free!
We let you know when we have something fresh!