1. Role
    Product Designer
  2. Timeframe
    2014 to 2015
  3. Industry
    Media, Communication, Digital news

Observador

The whole project was carefully thought to be built with the look and feel of a modern online product combining a clean and simple design with the most advanced technology.

Observador homepage showcasing some of the latest news • Radio • Covid • Lifestyle • Podcast • Premium

The challenge

A lot of News pages in the year of 2014/2015 were not following the technology boom. The vast majority kept the same visual appearance for years and on top of that didn’t adapt their experience to the new smart devices. The challenge was to build a disruptive digital product capable of performing a great human to machine interaction on any device, anytime.

Design process

The global plan of action is a logical and meaningful culmination of the current good practices with an efficient thinking process. Design process was organized like this:

Design process showcasing stages and architectureThe design process used at Observador

Human centric

The overarching aim of the project was to make it entirely adaptable to the needs of every user. Being mobile first, fully responsive and accessible to young or elder people were the permanent premises reflecting the interest in making it Human centric. Before its release, all the decision making was based on our previous professional experiences or on our predictions.

Methodologies

Methodologies like Desk research and Benchmarking were being constantly used to research the market and the competitors. Finding the right UI elements and the UX is a crucial step to counterbalance Observador’s editorial position. Opinion pages were designed with those methods in mind, they contain important issues written with the right balance of fact, analysis and a touch of irony or humor sometimes.

Visual consistency

A 12 column layout was used for mobile, tablet and desktop devices. To calculate the optimal number of columns, the vertical rhythm, the fixed or responsive grids, the gutters/margins and so on, … I’ve researched a lot on how to achieve a visual system that would look harmonious and won’t make users think when making a decision. To help me achieve the final results, Sketch (2014/2015) helped me a lot and since then has been my most used design tool.

Design, front end and back end

At Observador both professionals were always working side by side and sharing knowledge. I had the opportunity to do code and developers were always helping with the design decisions and user experience. We were a really small team at that time and in my case thinking in CSS while doing my designs helped me a lot with limitations and constraints.

Technology

Runs on Wordpress and another powerful open source technologies. In less than a year won the award for the “Best news media website” in the country and after a few more awards was mentioned by the Wordpress community as "A case study around the world" for its very impressive architecture.