YouTube styleguide
YouTube had a huge number of pages, none of which reused common elements, nor shared a common grid or video block formatting. Each team built elements from scratch or borrowed elements but then modified them to best suit the individual context. Most users thought of YouTube as one page (the video watch page) and the rest of the site seemed impossible to navigate. Additionally, the site was a nightmare to maintain at a code level. Our goal was to simplify the site, reduce the number of "page types," establish a grid, build common, reusable elements and standardize on typography and functionality such as pagination, sorting and refining, etc.
Initially I started with the goal to simplify the site and worked closely with our VP as I documented issues and explored options for reducing the perception of complexity. One of the first conclusions that I came to was that we needed to standardize on a few types of pages. There wasn't an existing concept of "page type." Teams just used the footer and header and built a page in between. As I clustered the existing pages and functionality, it seemed we could get away with three page types: (1) discovery pages (e.g., home, search, browse), (2) consumption pages (e.g., watch page), (#3) management pages (e.g., uploads, favorites, etc.).
I established a standard grid. Our existing site was 960px wide. We needed to accommodate a 640px wide player as well as 300px for display ad space, as well as potentially mini-layer, which was also 300px wide. Eventually, we landed at a grid that was 970px wide and handled the constraints. This was flexible enough to accomodate the different page types, as well as variations for those pages, as shown below for two potential layouts for discovery pages.
Within this grid system, we also standardized result blocks (videos, channels, playlists) into one, two and four column layouts. The spec for standard videos are shown below. Modularizing the result blocks allowed developers to input the result type (video, playlist, etc.), and the width (one, two or four columns) and have the results rendered appropriately.
I also fleshed out standards for many other common elements such as pagination, refinements, and sorting. Additional team members worked on typography, iconography, messaging etc. I felt very strongly that we needed common building blocks for the site. One of the tensions with any styleguide effort is providing enough structure to make all features and pages look like they are part of the same product, while providing enough flexibility that people feel they can move faster rather than being constrained by a huge set of rules. In addition to a full styleguide, we also created a short "must-adhere to" list and the webdev team built out a stylesheet for many elements, such as headings, buttons, and dropdowns.
Cleaning up and simplifying the CSS noticeably decreased the page load time for search results. The biggest win thought was that standardizing elements and rendering them through common CSS, dramatically improved the efficiency of the web development team. A small change, e.g., adding a badge to a channel result, became a matter of a few minutes instead of several hours.
Initially, I was working on this alone, before became clear we needed to create a styleguide. Once we initiated a formal styleguide effort, we formed a team of designers, web developers and a writer, who also managed the project. We also had advisory PM and Eng presence.
