As users interact with their phone, they become accustomed to the look and layout of their icons. On iPhone, users that wish to communicate with someone, will be looking for a green icon (i.e. Phone, Messages, Facetime). Alternatively, if they seek to use a utility app, they will likely be looking for a grey icon (i.e. Camera, Settings, Calculator).

In the field of cognitive neuroscience, we call this concept pattern recognition. Pattern recognition is the process of retrieving a long-term memory (e.g., memory of the iPhone messages icon) based on a stimulus (e.g., visual representation of the iPhone messages icon). We recognize dozens of patterns every day. From traffic lights to our smartphone home screens, we become habituated to specific patterns that have become quick and easy for us to recognize.

We are coded to contrast icons based on their differences in colour and shape. As we introduce new icons in our daily lives, our brain has to encode this information into our semantic memory for retrieval later on. This allows for swift retrieval later, which becomes extremely beneficial for productivity.

In the case of Google’s new redesign, the concept of pattern recognition was forgone. Feedback from many users highlighted one critical issue: users rely on the icons’ shape and colour to easily differentiate one tab from one another.

‍Now homogenous, Google’s new icons are no longer easily recognizable. Their new shape and colours make swift pattern recognition difficult for many, subsequently threatening productivity.

To bridge the gap between Google’s new redesign and its usability, I had to think of a solution.

Howbeit a simple one, the redesign required that I meticulously select the parts reminiscent of Google’s old design and blend them with the new design in a way that would make it quick and easy for most users to recognize and differentiate them.

The Docs icon was one of the less challenging ones to do. Other than the blue of the original icon, the outline of it did not look so much dated. The gist of it was maintained, keeping the elongated shadow of the fold and then colouring the four lines to Google’s new colours.

Alternative icons were explored, such as adding a picture icon above the lines, adding bullet points before the lines. However, those changes clustered the icon and made the icon less distinguishable when reduced to a favicon size.

The Calendar icon proved to be a challenge when trying to blend the old with the new.

The old Calendar icon had an old skeuomorphic-like look that was hard to refresh without significantly altering it. For this icon I decided to keep the old number look in the centre, but I changed the outline to one that resembled the newer Calendar icon.

This combination of Google’s old and new Calendar icon created an icon that was both refreshing, yet slightly different.

The Meet icon required a different thought process. While it would have been easy to make an outline akin to the Calendar icon and call it a day, it would have been too similar to the Calendar icon when viewed in a tab. I sought to create an icon that had all four of Google’s colours on four different components. Since the old icon only had a camera body and a lens, I had to figure out a way of adding two other components that would complement the icon.

Reflecting on the concept of Meet, I realized that while we record ourselves through our webcam, we also project ourselves on the other participants’ screen. Drawing from that, I decided to have two circles reminiscent of old-school projectors. This alternate shape now fits with the concept of Meet but also allows for four components that can individually be coloured.