AOL Portals

When I returned to America Online as art director, I was working on improving AOL.COM - the company’s portal.

We soon convinced our executives that a migration to a standards compliant, css-driven redesign were essential undertakings.

Here is an early design comp of a direction I had imagined for the portal. I had created my own wireframes and sketches before executing.

Highlights -

A header-bound dashboard that ties my screenname with personalized products - mail/aim/myAOL

Minimal use of design assets - extremely efficient usage of css - much lighter than previous versions of the portal.

…………………………………………………………………………………………………………………………………………….

Another early design concept for the portal. In this version I attempted to resolve an area for3 customizable tabs and search within the header to isolate them from the programmatic elements on the page.

Highlights -

Strong header treatment (colors customizable) inclusive of search below the branding is a treatment distinct from other portal products, such as MSN and Yahoo.

This treatment isolates “my stuff” and an ability to search from the traditional portal presentation of content and channels - in directory.

…………………………………………………………………………………………………………………………………………….

Further portal explorations. Here is a study of various header treatments.

The first is an evolution of the design previous to this. The arrow pattern is an AOL branding element used often in print campaigns. Above the mail, weather and video tabs is an area carved out for one’s identity.

The second establishes a header without drawing a full box container around the branding and search elements seen by so many of our competitors.

The third I called magnify. This was the one I was most proud of. The customizable mail/weather and video tabs really pop off the header while working well with the brand attribution and search areas.

…………………………………………………………………………………………………………………………………………….

While playing around on flickr one day, I came across an amazing landscape photo that got me thinking about how cool such elements would be if introduced into the portal.

This design mock shows a photograph rather than color fill/tile to be used for the header’s background. The idea being that members could upload their own photos for use as header backgrounds.

…………………………………………………………………………………………………………………………………………….

The following mocks are attempts at improving the integration of AOL’s community and communication tools within the portal experiences.

I worked on a “drawer” concept that appends to the bottom of the portal’s header. For this concept, I focused on AIM’s integration - looking specifically at one’s status and the status of one’s buddies (social networking).

In its collapsed state, one can see or edit their status (ala Facebook). One can also see across their buddy lists seeing their most recent buddy update.

In its expanded state, one can look deeper into their AIM profile (imagine MySpace/Facebook mashed up) or browse several buddy updates.

I had sketched out a second implementation which addresses email in a similar fashion. In that iteration of this drawer concept, one can preview their most recent emails without having to spin open that web client.

…………………………………………………………………………………………………………………………………………….

One of the last things I was working on at AOL before leaving in January was UI that took into account the past 6 months of usage data for the portal.

This data pointed out several problem areas:

1. The customizable tabs are under-utilized or are getting missed. They were not designed with a very compelling static state. No info is displayed on them, they do not imply clickability (see www.aol.com).

2. Video is a hugely trafficed channel within AOL, but their module on the current AOL.COM experience is not engaging.

In this version, I moved them to the left rail - right above the channel nav and made them much more button-like. A rollover would yield a small dynamic panel providing insight to respective button, ie mail would yield a preview of recent messages. I made a much more prominent video module that lets one browse the channel’s content from the portal.

…………………………………………………………………………………………………………………………………………….

Another pet project that I whipped up in less than a day was this iphone/mobile version of the portal. I know it is stripped down, but the idea was to tie existing APIs and programming into a light-weight portal for immediate consumption.