the evolution of photophlow

from a design perspective

background:

problem

Sharing links to flickr photos via IM is a cumbersome process.

Moving back and forth between the Browser and IM client while copying and pasting links removes the user from the conversational flow.

proposal

Initial specification is for a browser based application allowing the real-time discussion of photographs hosted on flickr.com.

Core functionality is decided upon:

People will enter a 'room'
and use integrated flickr search functionality
to find photos that they can click to share with the other people in the room.

Full use of the flick API's user authentication functionality is made, allowing flickr members to sign into the app using their existing flickr accounts.

Some basic problems identified:

"Chat rot". Users sign in and have nothing to do while waiting for other people to show up.
"Scroll Loss". Content shared in a chat window is quickly pushed out of site by comments on that content - the more interesting the content, the more quickly it disappears.
"Comment Redundancy". More time spent discussing a photo in the room means less time leaving permanent comments on photos.

preliminary work:

photophlow origin sketch

The designer begins with a rough sketch of the basic elements of the application.

"Chat rot" is addressed by way of a "Monitor" pane that gives the application RSS feed reader type capabilities when other users aren't around.

"Scroll Loss" is dealt with by displaying posted photos in a "Viewer" pane to the right of the interface, preventing them from being pushed up into oblivion by messages.

revisions before implementation:

rev. 1

In the designer's first revision, attention is paid to the actual pixel dimensions of the app, with careful consideration of screen real estate at smaller screen resolutions. Minimum browser viewport size is set at 800x500 pixels.

A list of the people currently in chat displays their name, flickr icon and the photo the photo they are currently looking at in their "viewer" panel.

Tabs are placed at the top of the interface for switching between various "rooms" within a single browser window. Activity within a 'hidden' room is indicated by a flashing tab within the client.

Considered functionality includes retractable side panels for drag and drop photo uploading, as well as a "contact list" for finding friends who are currently using photophlow and messaging them.

rev. 2 [total rehaul]

The designer now focuses on removing redundancies.

Photo uploading functionality is dropped, while the "monitor" and a "search" panels are consolidated into a single, multipurpose display.

The complex contact list and tab navigation structure is removed, as multiple rooms in multiple browser tabs achieve a similar effect. Importantly, this also allows each room to have its own URL.

"Shared Searching" is added as an additional feature. This allows people to monitor each other's search results as they occur and share what they find interesting.

rev. 3 [polish]

As the final feature set begins to stabilize, the designer now focuses on adding texture and character while defining in detail the user flow into and through the application.

A grey colour scheme is selected, so that the interface does not overwhelm any photos presented within it. Rounded white "frames" are added to increase the sense of the photo as an 'object' to be shared. Hovering over a photo displays the photo in a "photo tooltip" at a larger size for preview before sharing.

Clicking the photo in the viewer displays a larger version of the photo in "magnify view", where users can also submit comments on the photo to flickr.

These comments are also automatically added to the conversation, alleviating "comment redundancy". Any new messages are displayed in the corner of magnify view, so that entering magnify view doesn't require ignoring the ongoing conversation.

An invite panel is also devised to help users initiate conversations with people outside of photophlow.

Removing the contact list and tab navigation in Rev. 2 created a need for new methods of bringing people together in rooms. An "anteroom" page allows people to follow their contacts' activity and find currently active rooms.

An IM notification system is conceived. When someone enters a room you're interested in photophlow will alert you with an Instant Message containing a link to that room.

Copy and pasted into flickr profile pages, "Room Badges" link to rooms on photophlow. Coupled with IM notification, this enables the following:

User A pastes badge into their flickr profile.
User B finds badge, and clicks to enter user A's room
User A receives an IM notification and joins user B in the room

implementation:

initial prototype

The developer builds out the functional client, using Rev. 3 as a guide. It is of fixed width and height, possessing no icons or styling.

revisions after implementation:

from inital prototype to liquid, polished interface

The designer refines the layout, making it liquid. The liquid interface allows a larger photo to be displayed in the viewer when the appropriate browser viewport size is detected.

Graphics from the mockup are repurposed for use in the functional client. The designer also produces new icons, buttons and backgrounds to populate the interface.

final interface

In the final interface implementation, the designer adds details like audio and a mute button, simplified toggles for running private searches, an icon representing the room and messages describing the current search results. These features are then made functional by the developer.

The "sidebar" in magnify view is moved to the right, placing the mouse cursor closer to the comment box after the viewer photo is clicked, and a tab for viewing existing flickr comments is added.

Icons are added to liven up the anteroom, and a badge creation page is built. A Help section and Developer Blog are established. Corners are sanded and a fresh coat of paint is applied.