How I Redesigned Google Search

How to redesign a product that already exists? My case study shows…

My Google Redesign

I would like to share my case study on how to redesign a product. As an example, I will share my Google redesign work to show how a UX/UI designer can think and overwork existing products.

My full work is available here, so it is easier to navigate over my design.

Redesigning online product is always a challenge. Updated design and functionality should be clear for users.

Whether it is a popular product or not, it is always important to listen to target audience. But in case of Google product, it does not work, because Google search is for everyone. So how it looks and work in my concept?

Start Page

Start Page

I started my journey from the start screen and realized that it might be improved in multiple ways. My very first thing to concentrate on was a complicated menu.

I realized if I can present elements in a simple way, it might improve the whole user experience.

The other thing I wanted to design and improve — color. Why search engine can`t be another color, then white? If we take a look at the Google corporate branding, we find a blue tone, which is a perfect fit for the start page.

Color Versions

White Google Redesign

But what if new users won`t be so happy with my blue color decision? As an alternative version, I allow users to select a classic white Google start page, so they can make their transition to a blue version after.

Users always need some time to get used to new product look and functionality.

I always think about redesign as a smooth process, so providing options for users is a convenient way to tell them that you care about their way of interaction and feedback.

Search Text Results

Search Results — List View

But Google search engine is not a thing about UI only. The main purpose of it is to provide users with the information they are looking. After search people used to get text results as main priority for them.

Information search must be convenient for users. Otherwise, Google search engine can`t exist.

Understanding these fundamentals allows me to create 2 main versions for text results — list and tile view. These options give easy to switch and can be used for all devices, so it is a universal way of information view.

Search Results —Tile View

I suggest that my tile view is more useful for tablet and mobile devices, and the list view is more applicable to the desktop versions. But, again as far as Google does not specify its target audience, it is good to give options to people to select from.

Search Picture Results

Search Results — Pictures

Okay, I have created text results. But Google has many types of results, which need to be included in my work. By priority, the next stages were pictures and options for them.

Visual content is important, people psychology works with colors and responds quickly to product level of satisfaction.

As a starting point, I designed general picture page results, which shows related to keyword pictures. But I also implemented an update. This is the AI-based similar picture search (small thumbnails under the header).

Picture Results — Actions

Another thing to consider about pictures are actions that user can do after selecting one of them. I invented a new way of the same functionality. I didn`t want to overwhelm people with new functions.

You do not invent a vehicle if you have the wheel.

So why I didn`t include new options here? From my and other people's experience, I found that current functionality does provide 90% of all user needs (we do not have a target audience, remember?:).

Search Books & News Results

Books Search Results

Universal way of design is a great thing — users get used to repeating views and functions. So why not use this rule in some parts of my work? Actually what that is exactly this.

Repeated actions and visual part of the product are easy to remember for users — they understand them on a subconscious level.

That`s why FAANG companies use this rule when they work on big products with 100+ screens or pages with library and component help. Consistency is good for developers too.

News Search Results

As for the news I tried to use YouTube inspiration — this is the 2 most popular Google product, which everyone knows. So, it means it will be easy to navigate and take actions for users.

Always think about affiliated company products if they exist.

Saying that I inspire of YouTube simplicity style. The minimalist style is very popular due to UX-friendly, so I combined it with Youtube. As a result, I got a unique video presentation page with a friendly UX.

Maps

Google Maps

Maps, maps, maps. I use them every day And what is irritating currently is interaction with places and it's detailed. So I decided to improve that by providing more details about places.

Maps can be used not only as a tool with directions but also as general place info with feedback.

I developed a view, where places are available via simple scroll. The entire map is still visible for users, while they are searching for places in a particular area.

Place details

Once the user has selected a particular place, he/she will see detailed information about it. It gives a general understanding of the selected place and also provides people`s ratings.

The user needs quickly to understand if he selected a correct place due to similar results.

Also, the whole details are grouped by sections — general info, contact details, description, and other pictures of the selected places. This way of composition gives people more accuracy and efficiency in comparison with the current solution.

Google Translate

Google Translate

When I created this design in 2018, there were a lot of changes, so I am happy to see a similar result today in 2020. By this, I mean bigger attention to table size and improved functionality.