YouTube.com: User Experience Design Snapshot January 2011

Transcription

1 YouTube.com: User Experience Design Snapshot January Gunthar A Hartwig v1.1 October 22, 2012 Introduction Contents Role In my tenure at YouTube, I worked on a variety of feature areas and was involved in many product launches. These samples focus around four core concept and functional areas: My roles and duties in these projects included: developing product ideas and requirements with product management and technical leads and achieving management buy-in drafting of information architecture and conceptual models, wireframes and interactive design leading visual designers and user experience researchers during the iterative design process working with the engineering teams through development to launch analyzing results and data post launch revising features to account for feedback, data and new product requirements Each of these efforts was the output of a focused team of talented people, and a process that involved extensive design, iteration, testing, and consensus-building on the way to completion. At the beginning of 2011, I wanted to capture a representative sampling of contribution to the site. The examples that follow are all drawn from the live site on January 11, To augment this sampling from the live site, I ve included examples of documents drafted as part of the development process. 1. The global masthead and site navigation 2. Social-web connected accounts and autosharing 3. Personalized discovery on the customized home-page 4. User, partner, and brand channels framework Additional Projects In addition to these areas, I have lead user experience for: A major redesign of the sites video upload and management tools Television and game console applications Private sharing and unlisted videos rd Best practices for 3 party web syndication Professional content management systems Conceptual models and product visioning Gunthar Hartwig me@gunthar.com More information about the projects listed here and my role in them is available upon request. User Experience Design Portfolio: YouTube 1

2 1a. Global Masthead and Site Navigation Goals and Process Analysis By late 2009, YouTube s main navigation needed to be refreshed. There was a strong desire to take a new approach. A haphazard evolution and accumulation of features was making it unwieldy and ineffective, with real estate occupied by underperforming and out of context elements. A mapping of the existing flow (figure 1a) was linked with an analysis of traffic data to get a clear understanding of how the masthead was actually being used. Incremental Updates The team collectively ran a series of exercises exploring a variety of different possible improvements (figure 1b), and ultimately settled on an incremental update that removed some of the visual clutter, but didn t fully address the core issues surrounding the underutilized real estate (figure 1c). Figure 1a: Site Masthead flow analysis 2009 Figure 1b: Design exploration example 2009 Figure 1c: Logged out masthead early 2010 Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 2

3 1b. Global Masthead and Site Navigation Results Slimline Masthead In early 2010, in conjunction with work being done on the video watch page, I took another look at the masthead, gathering materials from previous explorations as well as introducing new ideas. The slimline masthead removed the clutter and under-utilized legacy links. It boils down the available options into calls to action, a significant departure from the previous content type based navigation (figure 1d and 1e). User Pulldown The quick-access user pulldown, required some additional consideration. Technical issues imposed by the flash player restricted the height of the menu. With limited real estate, the items included within the menu need to be carefully selected (figure 1f). Secondary navigation Secondary navigation in many areas of the site lacked unity and was difficult to use. Following the launch of the slimline masthead, I developed a proposal for secondary level navigation based on refined site information architecture, ultimately resulting in the streamlined layout on the site today (figure 1g and 1h). Figure 1d: Logged Out Slimline Masthead (screenshot ) Figure 1e: Logged In masthead (screenshot ) Figure 1f: User pulldown navigation menu (screenshot ) Figure 1g: Secondary Nav: Category Browse Masthead (screenshot ) Figure 1h: Secondary Nav: Account Masthead (screenshot ) Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 3

4 2a. Social-Web connected Accounts and Auto-sharing Goals and Process Concepts and Process YouTube is an intricate part of the fabric of the social web. But this fabric is woven from a wide variety of services, and maximizing utility calls for tight integration and thoughtful ease of use. Find Follow Feed was the mantra of the YouTube social team during 2009 and In addition to striving to increase YouTube account signups and the number of connections within YouTube s own social graph, the team sought ways to allow users to hook in to their existing tools and communities. Connecting their accounts to other services would allow YouTube users to share videos to their contacts across the web and take advantage of other benefits that easy data exchange might provide. Figure 2a: Account connection and sharing setting sketch Via sketchs (figure 2a) and later more detailed flow charts and mockups (figure 2b) the various parts were connected for implementation of the feature set. Figure 2b: Connecting accounts via upload flow document Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 4

5 2b. Social-Web connected Accounts and Auto-sharing Results The final result is a system that integrates a wide network of components, both at YouTube and on other sites. Promotion The value proposition of connecting accounts suggested that a broad approach to promotion would be key to ensuring success, so the feature is promoted on home, video watch and upload pages (figure 2c). Settings and Control A sense of control over what was shared, and how, is a critical component to any social feature. We aimed to make the account settings page as straightforward as possible by using clear action statements to convey what users need to understand (figure 2d). Figure 2c: Account connection promotion on the vide watch page (screenshot ) Figure 2d: Activity sharing controls within account settings (screenshot ) Sharing across the web Today millions of accounts are crossconnected, in turn driving significant traffic both on the sharing destination and on YouTube, as users return to watch additional videos (figure 2e). Figure 2e: An autoshared video as it appears on Facebook and Twitter (screenshot ) Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 5

6 3a. Personalized Discovery Goals and Process The Ecosystem Connecting accounts, subscribing, and friending, in addition to system capabilities such as recommendations algorithms, creates an individualized pool of interesting content. Potentially, this can create a discovery and viewing ecosystem across the site, in which a viewer moves from page to page but continues to carry their personalized context with them (figure 3a). Core Feed Design and Aggregation The teams efforts focused on utlizing the logged in home page to provide a personalized collection dubbed Recent Activity that would highlight actions undertaken within a user s social graph. These would be displayed in an easily scannable, format that would also be flexible enough to accommodate a variety of different activity and aggregation types, such as when multiple users take action on the same video (figure 3b). Variations and Experimentation The project also called for moving beyond the existing infrastructure to create a new interface that combines the previously distinct sections of the home page. In early 2010 following the launch of Recent Activity I designed and proposed a number of variations, and these were launched as first internal and then public experiments to test their viability before a full scale launch (figure 3c). Figure 3a: Personalized discovery system flow Figure 3b: Recent Activity results block mockup Figure 3c: Experimental layout variation Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 6

7 3b. Personalized Discovery Results Recent Activity on the Home Page Recent Activity, which launched in Winter 2009, showcases materials marked by members of a user s social graph. This example showcases several of the methods used to collate and present the material to users: badging the type of activity coalescing the actions of an active user so as not to overwhelm the page grouping similar actions by different users together labeling videos that have been previously viewed Additionally, Recent Activity includes the ability to further customize the feed by removing unwanted items and replacing them with new content, as well as edit or remove a subscription inline. Since the introduction of the feature, there has been steady growth in user engagement resulting in millions of additional video views launched from the homepage. Figure 3d: Recent Activity on the Custom Home page (screenshot ) Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 7

8 4a. User, Partner, and Brand Channels Framework Goals and Process Broadcast Yourself Channels are the public facing aspect of a YouTube user s account, a place to showcase videos and create a community. In 2008 and 2009 we designed and developed a significant overhaul to the previous system, with requirements to meet the needs of casual users, YouTube s content partners, and brand advertisers. Figure 4a: Channel discovery flow Striking the proper balance between these often competing sets of requirements was a challenge, and the team went through a series of iterations of discovery flows and interactive (figure 4a and figure 4b) and layout options (figure 4c) before defining the final configuration. Figure 4b: Playlist Navigator Interactive flow Figure 4c: Channel layout configuration possibilities mockups Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 8

9 4b. User, Partner, and Brand Channels Framework Results Focus on Video Sets A critical aspect of the redesign was a shift towards providing a richer video viewing experience within the channel itself. The Playlist Navigator allows for the focused navigation of a users video collection. (figure 4d) Showcasing Activity For those users who choose, the same information that is displayed in the Recent Activity module on friends and connections home pages is also displayed on the channel. (figure 4d) Inline Editing The system employs a set of WYSYWG tools to allow customization of the look and feel of the site, including the ability to create unique color pallettes, update profile information and rearrange the position of the various content modules (figure 4e and figure 4f) Figure 4e: Pallette editing panel (Screenshot 1/11/11) The editing framework created here established a model later deployed in other areas of the site, such as video management and video editing tools. Figure 4f: Profile and module editing (screenshot 1/11/11) Figure 4d: User Channel Full Page (screenshot 1/11/11) Gunthar Hartwig me@gunthar.com User Experience Design Portfolio: YouTube 9

10 4c. User, Partner, and Brand Channels Framework Extra Capabilities for Partners The framework includes special features for partners and brands that allow extended monetization, branding and navigation options. Customized Content and Features Channel owners can embed custom content widgets or include the Moderator module that allows user video submissions and topic voting. Results Creative Brand Usage These examples demonstrate how varied partners have utilized the tools to create unique channels for their content. Figure 4h: (screenshot 1/11/11) Figure 4g: (screenshot 1/11/11 Figure 4i: (screenshot 1/11/11) Gunthar Hartwig User Experience Design Portfolio: YouTube 10