Angeleno Online is the first step in a series of online experiences for Modern Luxury Media, the award-winning publisher of regional lifestyle magazines. This site for Los Angeles takes their rich celebrity and fashion photography features paired with Hollywood event photography into a new interactive direction. View the site: modernluxury.com/angeleno/
The Scene in L.A. section displays photos from the latest society and celebrity events. As with the rest of the site, advertising is tightly integrated into the visual experience.
Inside a Scene event, photos scroll horizontally and can be navigated sequentially by clicking the large images or using the thumbnails to jump around. Comments, who's who, and what they're wearing are displayed in transparent blue overlays when the photos are rolled over.
'Who they are' overlays are added editorially, but site users are able to add their own comments, as well as upload their own photos from the event.
The Featured section displays the latest celebrity and fashion photo pictorials.
Features open into full screen or in-page mode to provide a high-res clean slideshow experience with interactive overlay circles that open on rollover to display product, fashion, and beauty information.
Angeleno's weekly Hotlist email recommends 5 dining, shopping, or nightlife locations or events worth checking out.
Youth driven lifestyle and entertainment based brand for the 18-24 audience based on the notion of "everything now." Word aggregates content types and authors it in its unique and immersive module system — groupings of content and information that can be reformatted to fit in many places and links to a deep experience.
The top module feature of Word allows the editorial team to introduce new content and push existing content modules. It allows provides for a premium video advertising opportunity.
As the site name suggests, this is a "word" driven system in which the keyword or search term entered prompts the entire page to refresh by module/content type. In this case, Linsday Lohan was entered and each module reflects her latest content (gossip, movies, music etc.)
The calendar is one of several tool options that live permanently on the left edge of frame. It is populated both manually and dynamically as it learns about user and uses a combination of text and image based information.
Battle Rhymes represents one type of Word original short format video content. It is a weekly 15 animated show that pits celebrities and their scathing words against each other. Drawing from real interactions between celebrities, this is a whimsical animated dramatization. Additionally, each piece of Word original content would offer a sponsorship opportunity.
The Scene module pulls photos from parties ad events based on geo-targeting with Flickr style commenting and the dj mix for a more immersive experience. As with all Word photo modules, users can choose to enter full screen mode to view the set as a slideshow with audio.
Offline advertising posters promoting the Scene Module.
Programmed Music Module Video interstitial featuring Justin Timberlake.
This photos module is another variation that works best with larger sets of similar photos and enlarges any of the images when they are clicked with additional info overlayed.
A sponsored Word page in which every module reflects appropriate Pepsi content.
An in-module sponsored skateboarding game experience.
An in-module interactive advertising experience for MAC Cosmetics — The Word equivalent of a microsite.
An in-module interactive advertising experience for Scion — The Word equivalent of a microsite.
A Gossip Module video interstitial which features a daily gossip tidbit.
A video interstitial promoting the geo-driven Street or Graffiti art module. All Word original content module types provide both sponsorship and video advertising opportunities.
A video interstitial promoting the Hi-fi Dj module which introduces a new web based DJ every week.. All these original content module types provide both sponsorship and video advertising opportunities.
A video interstitial promoting the Hot Shotz module which features a stylized montage of the week’s hottest celebrity photographs.
A video interstitial promoting the extreme sports module of Word.
A video interstitial promoting the overall Word brand which could play both on and offline.
A video interstitial providing another daily gossip fix.
A video interstitial promoting the Word TV based module.
A video interstitial promoting the Word game based module.
Original core Word brand logo explorations.
Secondary Word logo explorations which would be introduced after launch.
Additional logo system.
A series of Word branded t-shirts as promotional collateral.
Where most personalized home pages, including My Yahoo and Netvibes, are generically for everyone, Voltron cuts thru specific demographics to provide an optimized experience before you start customizing.
The page is made up of full-width modules that have a minimum and maximum view state allowing for smaller and greater levels of consumption as you scroll up and down the page. Expanded modules, like the Flickr feed shown above, provide an optimized in-page experience allowing for photos to be viewed more efficiently than on the site the content originates.
There are several initial module types, including quote feeds, stock quotes, Digg news, and custom modules by audience, such as the Spotlight example above.
To reorder modules, click the gripper dots in the top middle of any module and the page shrinks down (as shown above) allowing for each module to easily be dragged into a new location.
By being full width, each module is designed to take advantage of as much monitor real estate as it's given to quickly provide more information in a variable format. Many modules, such as the quotes module above, also have in module search allowing for finding specific information without having to switch to a search results page.
The Digg, Flickr, and Yahoo Most Emailed photos modules.
With news as a core function of any personalized home page, What Matters has several news module layouts to meet each user's consumption patterns. A featured news view displays 2 article titles, descriptions, and photos for certain feeds, while the aggregated headline column view can be configured in multiple columns and rows by source or by combined sources.
The header of the What Matters page displays large graphics created by users and allows you to select one you like, have random ones displayed every time, or have the newest submitted appear as they arrive. Users can vote on their favorite header images as well.
The Netflix module displays the latest releases available on Netflix and expands to display the trailer, rate the movie, or add it to your queue. Additionally you can toggle to other views including your queue, what your friends have rated or suggested, or top 100 lists.
Each module has been designed to accommodate varying content intelligently, like scaling text within the current view so that unnecessary horizontal scrolling is avoided.
The photos modules remember which images you have previously viewed and display a check mark over their thumbnails so it's easier to tell what is new.
Customizing any module in What Matters is easy. By clicking the "EDIT" button in the top right of any module, it flips around in its current location and displays all of its available options in green. Once you're set, click "FINISH" and it flips around again, avoiding the confusion of having to leave the page.
Customization options for each module are well thought out and contextual to the source so that every option is clear and with an enjoyable outcome.
Among the expandable modues is an ad strip which appears from time to time below the header image for relevant advertisers and can be expanded to display the equivalent of a microsite in the page. And when done the ad can be collapsed back down to the thin strip.
Contextual text ads also appear further down the page based on keywords surfacing from the content feeds selected.
As part of the new system of Yahoo Entertainment sites, Yahoo Video was to provide a new approach to integrating professional and user created video.
Yahoo Video shared the module approach oriented around providing immediate access to the latest array of video of varying lengths and with the ability to favorite specific feeds that are of interest. A new video player (see the next project) was also designed and integrated throughout the site.
The role of community throughout the site was reinforced by interweaving how users interact with the videos they like. In the module above a user can see their most active friends and the videos they've recently favorited. Everything on the site is favoriteable — video, channel (feed), and even users — so that you always have access to what you like and what's new in its world.
Although each user has their own page, the emphasis on dynamically and passively adding content to your page based on activity and the ease of favoriting (including video anywhere on Yahoo) keeps user pages alive.
Users could display the videos and channels they like in the same format as the videos they've created.
User pages are customizable and skinnable.
The system as a whole was designed so that user pages could be skinned and populated to be on par with a professional content page (shown above), so that an upcoming band or artist would not be segregated by what the editorial staff designates "professional."
In the same way a user's friend activity appears on their page, a show's cast can highlight their favorite videos.
Branded pages also extend to advertiser content as well. Popular TV ad campaigns can have a home of their own in the context of the site allowing for the same types of favoriting, commenting, and community.
Despite the ability to get absorbed in a single page of the site, many vehicles were created to drive traffic across the site to other relevant areas. And in page ads were kept contextual and in a format that matches the site's design.
A branded professional video page.
A non-branded user video page (although the user could chose to skin it differently to match their self-made brand if desired).
An alternate skin approach for the modules.
A branding bumper motion study (click to view).
Another branding bumper motion study (click to view).
As part of the marketing and cross-site traffic strategy, a dynamic upper-thirds system was designed to periodically appear over the videos displaying dynamic relevant information or links.
Additional examples (weather, new music, exclusive videos, gossip, new mail, traffic, finance, sports, etc.)
When these upper-thirds were clicked, the video below would pause and the upper-third would expand to display more information and/or links.
As part of the Yahoo Video reinvention we redesigned the network-wide video player, with an emphasis on full screen abilities (shown above).
In normal embedded mode, our goal was to create a clean visual style with a unique navigational approach for brand differentiation (along the right side) to favorite the video, share it in numerous ways, see info about the video, or switch to full screen mode.
Once the play button is clicked the video title area is replaced by the scrubber and volume controls, which expand on rollover.
When the cursor leaves the main video area or the side navigation is rolled over, the player controls hide and the navigational overlays provide both functionality hints and quick access controls for certain functions (shown above).
Sharing and information navigation pauses the video while it's overlaid with the related options.
Options available at the end of each video.
An earlier version shown embedded in a page.
An earlier design of full screen — the thumbnails on the left are others watching the video at the same time ordered by those with the most favorited videos in common with you (including any of your friends). And rolling over those users displays their recently favorited videos.
The thumbnails on the right are videos in the same grouping or channel from where the current video was located.
Promotional branding piece for the player features to reinforce their icons.
Promotional branding piece for the favoriting feature.
Promotional branding piece for the full screen feature.
Promotional branding piece for the information feature.
Promotional branding piece for the sharing feature.
Upper-third explorations (see the Video site project for more details).
Launch is the 25-34 counterpart of Word (18-24) with a more minimal visual style and emphasis on more mainstream media content.
Launch's modules include more exposed navigation to easily layer in several filters for each content bucket.
And several list oriented module types, including Showtimes (shown above) with red star/sash indicators for the movies your friends have rated highly.
Top module promotional example.
Top module promotional example.
A style frame from the Launch branded network show package. This element is is part of the Music Video Premiere system which also provides a sponsorship opportunity.
Overall Launch brand and show package. This system continues to play off the "A" theme as both a design and element and visual navigation device and these frames illustrate how different categories (TV, Celebrity etc) of Launch would be introduced via Video bumpers.
Launch Category ID system. This is a video package that runs across the Launch network as a series of promotional ID’s touting each category.
Launch Category ID system look #2. Similar function to ID system one, different aesthetic.
Launch Category ID system look #3. Similar function to ID system one, different aesthetic.
Launch Image campaign. A series of animated ID’s used to promote solely Launch as a brand.
Launch Logo/Identity System. The net result of an extended exploration, this page represents our final logo decisions.
In line with the effort to recraft and revitalize Yahoo Entertainment products, we felt the Yahoo brand itself, starting with the logo, deserved similar attention. Here is as more modern, relevant interpretation with the company's corporate vision statement.
Proposed logo as it is extended across Yahoo verticals.
A playful :15 second video spot for Nintendo’s Wii which ran across the Yahoo network.
Brand package for yahoo music’s original program, Live Sets. Package included logo design and broadcast and HD show package.
A fully graphic video piece promoting Yahoo’s Casual Games property.
a :30 Video piece promoting Yahoo’s very popular custom autos vertical which employs an interesting combination of stylized 2-d animation and photo real elements.
Whimsical use of stop motion photography and animation to create this 30 second peice for the youth driven Yahoo property, Yahooligans.
Video spot promoting the photo-sharing application Flickr.
A sixty second broadcast spot promoting Yahoo Music Unlimited featuring American Idol favorite Katherine Mcphee.
a :30 second video spot that was produced to help launch the Yahoo Tech property and combined ironic, retro graphics to downplay the tech nature of this product and promote its friendly usability.
Show open for Yahoo Music’s "Who's Next" program, a show in which up and coming bands are featured.
Brand package for the cooking program, Cheap and Easy which played on the Yahoo Network.
Identity and brand system for the Contribute initiative which endorses eco or green friendly living.