Google Knowledge Panel

The Google Knowledge Graph is a knowledge base used by Google and its services to enhance its search engine’s results with information gathered from a variety of sources. The special designed feature severing this collective information is called the Knowledge Panel, that helps one quickly understand more about a particular subject by surfacing key facts and to make it easier to explore a topic in more depth and have information about people, places, things and other topics.It’s objective is go deeper and broader on the searched entity. It has amassed over 500 billion facts about five billion entities.

Role: Visual & IxD Designer | Team: Lead Designers & Engineers, other vertical design teams, Material Design |
Duration: May 2018–Sept 2018

How might we help users understand the nature of UI element
and discover its interaction patterns?

Give visual cues for interaction to user by changing the UI and also change information hierarchy.

Three potential Tab IxD comparative analysis

The default page is more clearly delineated as the overview. Feels like it’s integrated into this structured page. Although the tab feels outdated and scrolling pattern isn’t clear

Rounded shape feels like part of the refinement chip family. Containment of tabs lends itself to clearer distinction if you can scroll or not. But still doesn’t relate to the tab below.

Slight deviation from Prod. Separated masthead from tabs, might help with hierarchy and tab visibility. And it will help enhance the relativity with tabs and the content below.

Refined tab and it’s existence

With the new information hierarchy and UI

How might we increase visual appeal across different entity cards
and yet be consistent across Google?

Transition of colors on Google product

Suggested Color Palette

Color should be used as a driver for context, helping people understand tappability and hierarchy. The application of color supports our principles of content forward and build from white.

Hierarchy: Color density testing

Color snapping to palette after extraction with respect to density allotted

Guidelines: Color extraction logic

Color snapping to palette after extraction

Application Logic

Color systems across different knowledge panel


Color extraction application and integrating thumbnails on masthead


Bing Vs Google Search

Type Systems

Introducing Google Sans and its application on Google feature search cards

UXR & Survey

At different areas in San Francisco Bay Area through Google Research Van and in-campus (qualitative and quantitative research)

Want to learn more about cross -collaborations, execution and metrics?

Schedule a 1:1 meeting emailing at