Awwwards
George Kvasnikov
view project on
Behance Behance

Redesign Concept

Introducing the new UX and UI for Google News platform

George Kvasnikov  ·
News is a direct tool of influence on public consciousness. The goal of the news is to provide to the society objective information about a particular event or action.

News is a direct tool of influence on public consciousness. The goal of the news is to provide to the society objective information about a particular event or action.

In reality, news is often just retelling of events, passed through the prism of an author’s own subjective judgment, beliefs and attitudes. Authorship of the news inevitably leads to inconsistencies in the coverage of the same events.

Moreover, the author often deliberately covers the events from his beneficial point of view, which he thereby can use to manipulate public opinion.

Today, there are a lot of news media and many of them are dependent on the government, radicalized, or critical, and so on. The problem of “point of view”, while reporting the news, is very significant.

It has become very difficult to understand the flow of information. To figure out the truth, to form your own opinion about this or that, is a tremendous challenge for the modern man.

These facts cause the need to create tools that allow the reader to easily handle the news information, analyze it, to screen out unnecessary biases and form their own opinion.

Research

Like most of the services from Google, Google News is a great tool to work with while searching for news, which offers unique opportunities. Google developed a unique algorithm, which allows reading the news on the same topic from different sources.

Analysis of the current site

First of all, news.google.com was carefully analyzed in order to identify the strengths and weaknesses of the current design.

Google News was announced in 2002 and since then has changed only slightly. For 12 years the concept of Usability stepped forward and the user becomes more demanding of usability and appearance.

Research analysis

User Cases

Understanding the target audience is very important thing for any website. In order to test the ideas and hypotheses, I took 4 fictional characters from the task audience of Google News and analysed what needs they are willing to meet on the site, which functions could be useful.

I wrote out all the existing and new features Google News and sorted them according to the characters needs.

Research User Cases

Features and Fuctionality

Based on the analysis of the results and User Cases, I had a brainstorming session to figure out which new functions, which renewed old functions, and which visual approach, could satisfy users needs.

After the brainstorming session, the most important points were selected and sorted by two categories: Functional and Visual.

Research analysis

User Scenarios

To be sure, that the choices of functionality cover the needs of the target audience, I have created a couple of user scenarios, based on user case personas.

Research analysis

UX and Design Principles

Since the user needs and what is needed for the successful redesign of Google News were realized, it’s time to create a site map. The main goal is to simplify the site map, as much as possible, and minimize the number of steps the user needs to do to complete the task.

Sketches and Wireframes

Since I defined the goals and instruments of the redesign of Google News and the sitemap, it is time to define the framework of the new website. I have created hundreds of pages with scribbles to determine the right page content and design layout.

  • UX Sketches 1
  • UX Sketches 2
  • UX Sketches 3
  • UX Sketches 4

Mood Board

While creating wireframes, I’ve been collecting the mood board. It contains everything that could inspire me to find the better, more creative and is easier to use solutions, helps me to define the look and feel of the coming design.

I create mood boards and wireframes usually at the same time. This helps, not only to create the best user experience, but also to have an idea of how it could be designed.

Mood

Typography and Grid

As the main typography, I have chosen the norm for Google, Roboto font, which perfectly represents the simplicity of the Google brand. For articles, I have chosen PT Serif, which is available in most alphabets.

Grid is based on 12 columns and 8px baselines, which is also very typical for all new Google designs and is optimal for most interfaces.

Typography Typography

Design

After a long preparation period, I’ve focused on design. It took about 5 weeks to create designs for each page, settings, and each interactive element separately. The design is fully responsive and represents a well-thought-out UX.
Design desktop
Home page
Design Home page
Home page scrolled down

While scrolling down, the left panel collapse and the top bar sticks to the top. The new Google News uses 100% of place without wasting any pixel of space.

Design Home page scrolled
Add your favourite news sources and languages
Design Favorites
Adding new news category is easy in one click
Design Favorites

Consider different points of view

Follow every story in its context

Coverages are one of central new features of Google News. Now google users are able to create their own coverages and stories. They can collect articles, quotes, media files etc., which represent their point of view and then spread it into the world! With coverages it’s easy to follow every story in it’s context.

Browse coverages
Cover Browse
Coverage cover
Cover Coverage
Coverage cover
Cover Coverage
Coverage overview
Cover Overview

it’s all about

Functionality, Usability, Reading experience

Article view
Usability Article view
Add content to coverage
Usability Add content

it’s very easy to

Create your own Coverage

  • Coverage
  • Coverage
  • Coverage
  • Coverage

it’s all about

Being responsive without limitations

  • Homepage
    Mobile 1
  • Article Preview
    Mobile 2
  • Read Article
    Mobile 3
  • Addition options
    Mobile Addition options
  • Addition options - scrolled down
    Mobile Addition options scroll
  • Addition options - scrolled down
    Mobile Addition options scrolled down
  • Coverages
    Mobile Coverages
  • Coverages cover
    Mobile Coverages cover
  • Mobile
The Google News redesign was done for study purposes only and is not supposed to be implemented. The redesign contain ideas, which I would like Google News to take into consideration to make the news reading experience more rich, interactive and original.

Interested in more?

Recent Case Studies

  • Wikipedia Redesign and Rethinking Concept
  • "Жарим Кофе" Website
  • Watch more works

I am George Kvasnikov

Senior interface and graphic designer from Russia, currently living in Berlin. Working as freelance UX/UI and graphic designer. I am passionate about creating innovative, problem-solving and beautiful design.