Since Google revealed Material Design in 2014, it has rolled it out across its multitude of services, usually in apps first and then their web counterparts. However, despite having a fully themed YouTube app, the web layout has a poor implementation of Google's own Material Design guidelines and much room for improvement.

Clockwise from top left: Drive, Keep, Docs, Contacts

Clockwise from top left: Drive, Keep, Docs, Contacts

Artboard 4.jpg

Tabs work best on mobile where it is intuitive to swipe between them. However, due to their web environment clicking on a tab instantly brings you to another page without an accompanying transition. They also don't reflect the top-level navigation found in the navigation drawer to the left, with only 3 of the 5 supposed top-level pages.

Artboard 5.jpg

In typical Google fashion, a great idea is marred by poor implementation. Taken right from their own guidelines - "avoid creating too many regions."

Artboard 6.jpg
Artboard 7.jpg
DSC04674 - Edit.jpg
DSC04676 - Edit.jpg
DSC04690 - Edit.jpg

One round of usability testing with the mockups was done to analyze which parts of the interface were unclear and needed to change. Testers were asked to navigate through two tasks and insights were gleamed from their interactions.

Artboard 12.jpg
Artboard 11.jpg
Artboard 14.jpg
Artboard 16.jpg