MTV.com
The focus of this redesign was to create a fresh, user-friendly, customizable set of templates and design standards with the flexibility to adapt rapidly. MTV has many brands to serve, each with high demands online. This system had to help minimize the tech team's ever-expanding production queue while serving the channel with rich branded experiences for MTV shows.
We first focused on usability, incorporating years of research on user behavior and feedback for each section of the site. Then a style-guide was developed to outline the visual design, rules and hierarchy of all elements including navigation, typography, spacing, iconography, buttons, image sizes, ad models and promo systems.
Finally, the style was enhanced by connecting the MTV HATs rotating brand concept to the templates with page themes. This meant designers could drastically change the appearance of any page without using tech resources. Simply specifying a HAT, header bar style, link colors and a background graphic could skin any template and satisfy branding needs for the channel.
MTV HATs
In the first phase of transition from MTV Overdrive to a more SEO-friendly HTML version developers needed templates to start out basic for agile development. The MTV HATs (Header Art Treatment) concept aimed to enhance the site visually without overburdening the tech team with complex stylesheets. The strategy was to simply frame the top of our pages with a wide variety of original MTV logo art that would cycle randomly with each page refresh.
The project was seeded with 25 extremely diverse, talented and established artists, hand-picked to deliver a vast range of style and set a high standard of quality for future creators. Their task was to follow a basic set of rules and express their personal vision of the MTV brand with absolute creative freedom.
From there a blog was launched to showcase these works and call on any artist to submit their own MTV HAT. We received hundreds of submissions from all over the world, the best of which entered rotation on MTV.com and were permanently represented on the blog along with artist information.
Usability research revealed this simple change alone brought a major improvement in users' overall perception of the site.
Friday Night MTV
Hosted by Fall Out Boy's Pete Wentz, this event-level TV show premiered brand new music videos every Friday Night, along with exclusive live performances and guest appearances from the most talked about artists. The FN MTV initiative aimed to put the music back in MTV, reaching beyond the show with hours of music video blocks added to daily programming.
This website was created to pursue a deeper connection with the audience through an online community where users had the power to shape and create on air content. It featured music videos that premiered each week along with their specific calls to action requesting user opinions and videos. Think you can do that dance? Upload your steps. Think you can sing it better? Upload your version and let the community decide. The major categories were reviews, karaoke, dance and lyrics.
User generated videos could be rated or commented on, allowing the best to rise to the top. Members with the most popular content could have their videos represented on air or even get a chance to be in the show themselves.
MTV Video Remixer
This application allowed users to create custom video mixes, share them with friends and submit to MTV contests. The real-time video editing technology driven by the Adobe Premiere Express Engine allowed users to drag & drop elements on the timeline, edit clip length, rearrange, preview instantly and publish.
Supplied with a library of music video segments, interview footage, performance and bonus clips, photos, custom graphics, captions, borders, transitions and effects users were well equipped to realize their own vision of a music video. Tens of thousands of remixes were published ranging from unique spins the plot line, to social commentary, to hilarious parities.
MTV Facebook
This application was developed to provide Facebook users with a simple way to discover, watch and share thousands of high quality music videos and playlists from MTV's massive collection.
It offered an intuitive way to construct, edit, save and share custom playlists, a streamlined video player with fullscreen mode, easy definition of favorites, a comment "Wall", celebrity curated playlists and IAB 300x250 ad inventory to monetize it all. The Facebook aesthetic was mirrored as a design foundation, then amplified by MTV branding and a carefully constructed suite of icons and buttons.
MTV Overdrive
At MTV content is king. This project aimed to prove that statement online with a bold departure from serving traditional HTML towards a Flash experience with ever-present video. The vision was that MTV.com should be a reinvention of the TV channel, not just a promotional site that serves it. The result was a radical new design that redefined the experience of finding and watching music videos, full episodes and web exclusives.
The interface flipped between a large video mode with navigation for the media archive and a watch+browse experience where a small video accompanied a larger content area for search results, artist pages, photos and articles. Users could access any piece of content without interrupting the video they were watching, driving exponential growth of streams. A massive graphical search bar lived at the top and its results arrived in the form of an image wall with information overlays and rollover features.
The ad model was purposefully deviant from online norms, consisting of high quality video ads in the player and static, magazine-quality ads that displayed briefly between sections. The idea was to insert more attractive ads between content rather than locking in persistent, often obtrusive, traditional banners that dominate content and take up valuable real estate.
MTV Overdrive was one of the first instances of playlist creation online, giving users the ability to create and edit cookie-based playlists via simple drag-n-drop functionality.