GOOGLE FIBER | 2013
Website Brand Identity Style Guide, UX, UI
While working at Left Field Labs, I helped with the team to create the Brand Style
Identity Guide and concept for the home page experience and site.
I chose the “Google blue” to keep with the brand, and the “Google Fiber Silver” to make
the fiber brand consistent, yet different from other google sites.
I chose to showcase the
experience of using Google Fiber in your home living room and devices to give you a
sense of the real product in your hands.
![](https://freight.cargo.site/t/original/i/01cb2adc67ce478c27ff897bdfd3819eb6a0c73cf9699ced9b97183b1125e5fc/Screen-Shot-2014-08-20-at-2.49.27-PM_o.png)
The Device hides on scroll, and the home devices become center focus.
![](https://freight.cargo.site/t/original/i/c2268e07ca2fb3aca43b699f2c4d3f55fcd8d212ba1217b722daf22d8692a731/Screen-Shot-2014-08-20-at-2.49.10-PM_o.png)
Showcasing the Tablet Controller, and TV box system
![](https://freight.cargo.site/t/original/i/32092c4295c51e9ef1cee068adc4aac1e6c070e07e6b0b782604544ec91c1599/Screen-Shot-2014-08-20-at-4.48.31-PM_o.png)
Test your current speeds vs google fiber’s 1gb/s super fast connectivity by watching a race!
![](https://freight.cargo.site/t/original/i/492136ad7562452c7f4089302bfce69815693a2677af612ba83bb0c607f82213/Screen-Shot-2014-08-20-at-4.49.27-PM_o.png)
![](https://freight.cargo.site/t/original/i/159570cf7ee633eb43082e6f8804e7503876caaacf7e9a6bb8b8ab910ffff440/Screen-Shot-2014-08-20-at-5.07.19-PM_o.png)
Showcasing the Fiber App on tablet, with custom icons below to navigate on screen functions
![](https://freight.cargo.site/t/original/i/1115193a97bf1b65995e91a8928df041bdbeb60ae436a9416edb2b9c3f06ee56/Screen-Shot-2014-08-20-at-5.09.40-PM_o.png)
You can press the blue down arrows to move sections, or simply scroll
![](https://freight.cargo.site/t/original/i/cd8de1acdf1f2ee11d4eaeed2b3ae27c0758f5df12c916c217c3638472dea3a8/fiber-fixed.png)
Over 100+ channels to choose from to deliver to the user, so I decided to make a “google search grid” to simplify the potential chaos
![](https://freight.cargo.site/t/original/i/a4391a834289315e560006b072de08aafdb8ca5d1b722aa24c07baf6c1dc90d9/Screen-Shot-2014-08-20-at-4.58.50-PM_o.png)
A search bar + responsive grid system, so the user can effortlessly find exactly
which channels they love
![](https://freight.cargo.site/t/original/i/cc275a801aa05f336b682881b8bd48b975546ab77a0b28175e56a5e5fe3f99fa/Screen-Shot-2014-08-20-at-5.02.25-PM_o.png)
![](https://freight.cargo.site/t/original/i/08369a73ac897265284b544d579a0c7cde4e41b5bd621c3d7d94b1d6c406c26f/fiber-fixed-2.png)
A collapsable grid system so you can get the simple comparison view, or read in depth.
![](https://freight.cargo.site/t/original/i/292837798f988f841981b7dd2a70a7f9fbf297f5cd0ad0afb1a3d346d06b1d9c/fiber2-fixed.png)
The final landing screen is an animated wifi network box showcasing the super fast connectivity across all your favorite google devices!
![](https://freight.cargo.site/t/original/i/e6c0752c16c22badc748543b46a0c6168d66ca4973c00eac4c9a84d60c515968/GoogleFiber_wireframe_o.jpg)
Early wireframe for the site built with adobe illustrator