Google Fiber

Fiber is Google’s high-speed initiative, bringing 1 gigabit internet speeds to the pilot city of Kansas City, KS and Kansas City, MO, with future plans to expand to cities throughout the U.S. Because Fiber involved the building of new infrastructure in residential and commercial neighborhoods, the initial phase of the project became a sign up “rally” in which communities would compete to be the first to reach a sign up threshold. Users could use the Fiber web site to check their address eligibility, sign up for Fiber, compare the progress of their community against others, and read news about Fiber advancements.

The final mock shows the resulting Fiber sign up page for Kansas City. Fiber has since expanded to multiple cities, as shown in the link to the live site.

Google Fiber →

1. Early stage brainstorming wireframes showing the steps that might be needed for sign up. The home page provided information, address checking, community exploration, and news.

s01

2. An eligible address took users to the community page, where early mocks suggested a map and facts and news about the community.

wireframe_s02

 

3. The package selections had not yet been decided upon at this stage, so I made suggestions to encourage discussion amongst the team.

wireframe_s04

 

4. Later stage mocks provided a method of browsing through communities and viewing progress across the board.

communities_v6_s01

5. The community page, showing a specific community’s details and progress.

communities_v6_s02

 

6. Second iteration of the top-level community page showing a timeline of events above an enlarged map of all communities in Kansas City.

communities_v8_s01

 

7. Second iteration of an individual community page, showing activity and details about what is needed to reach the sign up threshold.

communities_v8_s02

8. For this project, we worked with a third party visual design firm outside of Google. They skinned my mocks and created a unified visual theme for Fiber. This is an example of their limited color wireframe demonstrating early visual design.

hellomonday_s03

9. This visual design wireframe shows the top level community page with a specific community selected on the map.

hellomonday_s03

10. The final web site, launched, showing communities that have reached sign up threshold and are ready for construction (screen capture).

fiber_final