Who, what, when, where and why

Built to scale: Brasil 247's responsive online news design gives site new life

Daily news from Brasil

In May 2012 we were approached by Leonardo Attuch, director of a successful chain of online newspapers in Brasil, with a plan. Leonardo wanted to redesign and upgrade the robust online publication, Brasil 247 based in Sao Paulo. With 55 million site views a month, this was to be no small task.

Brasil is currently experiencing a thriving competitive base for online media and Leonardo and his team showed a real commitment to Sourcefabric's Newscoop. They had actually already been using it when they contacted Sourcefabric. Their team had found it when the publication started, installed it on their own and had been using the tool for about a year before they got in touch with us.

Rethinking structures

The project started with a discovery process that included speaking with Leonardo about all the issues and problems that the site was experiencing.

As Brasil 247 grew, the initial structure they designed was not robust enough to serve their needs anymore. For instance, the editing and updating process was creating difficulties and Brasil 247 wanted to come up with new features that would enhance the user experience.  Another important issue was hosting. They had more than a few site crashes and a proper investigation of the site security was under question. 

This project engaged Sourcefabric to rethink the whole site, in order to come up with a suitable solution. They had built the site on Newscoop 3.5.5 and not upgraded. Moving them to the latest 4.0 version was important as Newscoop had significantly improved. In the end, building a new theme from scratch rather than upgrading and fixing the existing templates was a better and faster solution.

A unique brief

The project was defined, but still exciting. As a designer, anytime the brief includes words like "prominent", "eye-catching" and "we like this site much more than ours" you can't help but feel a sense of adventure. Normally, that adventure is tempered once you present your version of the idea, but this time it was different. We had already received a design draft and notes that stated we had the freedom to change it for the sake of improvement. However, they were not quite happy with our version initially and we needed to tie up the agreement.

Their draft was loaded with news and information. They wanted to include a lot of sections, regional issues, columns, huge community space, shopping, tons of small ads, special features, and the list went on. The various sections were all flat and visually of the same (and high) importance. The first thing that came to my mind was "overwhelming". Considering this is an audience of busy professionals, the last thing they have is time.

Less is more

Our first suggestion was to eliminate two-thirds of the content. But that suggestion never goes over well, so the next best thing was to eliminate the feeling of information overload and organize the content to align with the users needs. The first thing we did was eliminate the side ads. On both the left and right sides of the site, a ton of small ads made for a feeling of chaos on the homepage.

Bold designs and long pages seem to be a trend with some media sites. We did not succeed in an effort to shorten an already long page, on the contrary - it became even longer with the new content and features. However, we knew we needed all of the content to have a focus, so we organized this with a colour cue, hierarchy of headlines and page segmentation.

Think mobile, think html5

Our next goal was to create a mobile-oriented design. Our 6+2 responsive column grid gave the pages a sense of order and organization. We created 5 different layouts (default, tablet portrait and landscape, mobile and wide mobile), all based on a single grid. This gave Brasil 247 a fully adaptive website that fits all screen sizes (responsive images, scalable headlines and content organization optimized for different devices).

The pages were built using html5/css3 code, giving the design more freedom but also ensuring semantic order and compatibility. In combination with the Newscoop templates built from zero, and using the latest Newscoop 4.0 features (image renditions, featured article lists, community) we were able to significantly simplify the work flow in their newsroom and enrich the content at the same time. Instead of preparing 10, or even 15 versions of the same image in different sizes, one big image with predefined crops can be used directly on an article edit screen. And instead of using complicated combinations of switches and publish dates, pages now use ordering inside featured article lists (on front page) or section order (on category pages). 

Seeing results

The result is a mixture of bold photography, vibrant colors and a headline hierarchy that makes it easy for users to get a glimpse of what is going on in Brasil. The information is easy to find, the design reflects the audience it's serving and the content can be updated faster and easier than ever before. There is more to the new Brasil247 website than its look and some software improvements. We also rethought their advertisement model. By standardizing ads and dynamically placing them on all pages, increases the number of ads on each page and optimizes the business side of Brasil 247 advertising platform.

The Brasil 247 staff were satisfied with the new platform. It is much easier to control the order of articles on the page, faster to edit articles, and includes small details such as handy shortcuts for last-minute changes on articles.

What did we learn?

Having large volumes of content makes it hard to keep your page simple. It's great to have a lot of choices but the more choices and less hierarchy you offer, the less  your users are able to find anything at all. If users can't see what they want because you give them too many choices, you are letting your content down. If the choice of content is vast, the navigation must be simple and instinctive.

• To get more details about the history of the Brasil 247 website, you can listen to our colleague Kristin Trethewey interviewing Leonardo Attuch, above, or here.