Rob Metzgar's Portfolio

AOL Pictures 2006

Objective:
The vision and primary mission of the pictures team at AOL was to inspire and enable picture sharing and picture activity for AOL members of all ages. In addition to making picture sharing easy and fun, we provided members with ways to share and enjoy new interactions like one-click viewing and easy navigation of albums unlike any other product out in the industry.

Challenges:

The redesign consisted of:
-Focused navigational tab structure
-Focused action buttons
-Added "Sorting"
-New pagination and icon editing functions
-Drag-and-Drop features throughout the service.

Documents produced:
-100 page product requirement doc
-250 page design doc
-40 page visual design template doc

Integrations with other products
-AOL Email
-AOL Blogs
-Member Expressions
-Snapfish
-Adobe Pictures
-AOL Instant Messenger

Project Owners:
-1 Producer
-3 Product managers
-1 Design Manager
-2 Design Leads
-15 Development engineers

This poster I created showed the process that it takes to get a smile page designed and what players are involved from the beginning to the end. The beginning of the poster focuses on all the collaboration of team members from product, to development to design, and then concept mocks are created. Towards the end of the process, the poster illustrates the fact that usually just the product managers and the designers are the last ones collaborating before handoff. This poster was used to inform visitors what we do in design at the AOL Headquarters in Dulles Virginia.

AOL Pictures was the
first real picture
product that was
pushed out to over
30 million users.
Yahoo quickly
redesigned thier
pictures product to
compete on the web.
Of course yahoo has
more traffic in that
area so I believe
their aquisition of
flicr did well.

Some detailed
interaction that was
fairly new to the web
at the time outside
of flash, was actions
like this one. Click
and drag functions
to select multiple
pictures before a
user drags them to
either rearrange, or
place the photos in
another album. The
thought behind most
of the interaction in
this product was to
make AOL Pictures
interact as though
the user was using a
desktop application.

Instant feedback when dragging items around

When a user selects
the pictures by either
shift-clicking, or the
rubber band effect
above, they will see
a ghost image with
the number of items
they are dragging
when moving their
mouse to the
destination point.
This helps if the user
selects multiple
pictures in a large
album and begins
to drag them around.
They will get instant
feedback as to how
many items they are
placing.

The overall design
was made so it was
easy for the user to
view pictures quickly.
In these screenshots
i am illustrating how
you can click once
to select an image,
double-click to see
the full size image,
and then click once
to go back.

Concept sketching

Of course all design
process start out
with some sort of
concept sketch. I
definately go back to
paper and pencil to
figure out how I will
layout the architect-
ture. If things start
to make sense, I will
go into a more
pollished block flow.

2007 - Rob Metzgar Design - All work launched and usable