Rob Metzgar's Portfolio

MyAOL

MyAOL is a suite of personalized products that was recently launched into beta: myPage (personalized home page), Mgnet (image-driven content discovery and recommendation engine) and Favorites (feed reader and bookmarking). All three services can be accessed via tabs on the main myAOL page. I worked on the personalized home page and "Mgnet" interface.

myPage is a customizable home page, similar in functionality to products offered by Netvibes, Pageflakes, Yahoo, Google, etc. Users can put just about any content they like on the page, selecting from pre-fab modules or adding a RSS feed. In a nice non-competitive touch, AOL is also allowing Google Gadgets, Goowy Yourminis and other third party widgets to be added to the page. We are also preparing an API to allow third party developers to create their own widgets. Like Yahoo, there is a non-negotiable advertisement included in the page. Home pages are looking very similar, although in this UI we added features like "canned" tab pages with content already put together for faster customized experience.


Here is an example of one of the early framework sketches. We tried to utilize the top area or "tray" area for core functions on each tab.	An example of a typical inline error and messaging that changes the background opacity and presents the user with options. Essentially recreating application like behavior on the web.

Typical interaction for the tabs was created. A user can click and drag the tabs to re-arrange. They also can hover over the tab and get an "x" to delete the tab. If the user drags the tab, a ghost image of the tab will follow the and the tabs will spread apart in order to show a drop target , "a green highlight of the area".

When adding a tab, the new approach we developed was to give the user the choice to either get a head start at setting up the page before adding the tab, or two choose from "themed" pages that are already set up for the user. For instance you could choose a "Technology" page designed with all the current popular feeds.

The module gallery was designed to easily search on a keyword and serve up modules that you may be interested in. I specifically designed this after googles module gallery. It is very basic, and nuthing revolutionary. Once a user finds results, they click "+ my page" button and the module will say "added".

By clicking on the "Add a Feed" link, the user will have the ability to enter a custom feed module to their page. Usually this is in the form of a picture and a headlline. Most services offer this. The reason I call this out is because there is alot of decisions and thought behind how to call this option out, and what options the user has to customize the module.

Mgnet (pronounced magnet) is a news site that tailors itself to what you like over time. It’s also a lot of fun - to start off you are asked to click on pictures that you like, which tells AOL a little bit about your interests.

After that you are presented with a customized news page that continues to learn about your interests over time, both collaborative filtering and active inputs. Users can also click over to “what’s hot” to see the popular news items without individual filtering.

The mgnet interface consists of 3 main sections. The navigational area at the top , the recomendation image area to the left and on the right the stories associated with the topic. The user can easily select images of interest which will bring up stories associated with that topic. After the list appears, the user can "thumbs up" or "thumbs down" stories that will then again inform the system of what is liked in order to serve up new items next time. The more you use the product, the smarter it gets and "knows you".

We applied our thinking outside of the box with Mgnet by focusing on images to grab the readers attention. Forget the headlines, some of the images shown on the page are compelling. Click on one and see the relevant story, and you’ve taught Mgnet a little bit more about what you like.

Hovering over an image gives a description of what the topic is about. Clicking and selecting an image will create a "thumbs up" icon on the image which informs the system to serve up items related to that topic.

The "What Else Ya Got?" button is essentially a refresh button which was created in the case that you do not see images that attract you. Clicking once will refresh and give you a new set of images.

Below is the "Saved" section which only appears if the user has chosen to save a particular article or feed. This way you can always find articles that you viewed in the past and come back to them. Kinda like a snippet section.

2007 - Rob Metzgar Design - All work launched and usable