| SUSAN GOV | portfolio :: resume :: about :: contact |
| Visual Designs | Back to Wallop |
|
Shown below are several visual designs that served as the final design of my initial wireframe ideation. These designs were arrived
at after close collaboration with the visual designer, David Shih. All designs shown here are courtesy of David Shih.
" Friend Buzz " In Wallop, the "Friend Buzz" is a dynamic friend tracker that shows users the recent activity in their Wallop social network (akin to Facebook's News Feed and MySpace's Friend Updates). Shown below is the Friend Buzz; the bar at the end of the Friend Buzz indicates the status of the user's current uploads to Wallop. | ||
![]() | ||
| This screen shows the Friend Buzz in its expanded state, which contains a full history of friend activity in a scrollable drawer that pops out on top of the user's profile. | ||
![]() | ||
|
Comments
Shown here is the user's Comments page, which contains all comments the user has made as well as all comments others have made on the user's profile or about the user's content. Comments are shown in their individual threads. In this particular example, every comment thread only contains one comment. Also, new comments are denoted with a star icon and are displayed in a different color. On the left of the comments page are the root objects of each comment thread (in other words, the item being commented on). The profile picture in the root object designates the owner of the object, and the icon designates the object type (e.g. camera for pictures, headphones for songs). A preview of the object is displayed as well (e.g. picture thumbnail, song name, blog post title, etc.). To the right of the root objects are the comments themselves. The profile picture and display name shown in the comment identify the commenter. A timestamp for the comment is shown, followed by the comment itself. Since comments can contain attachments, attachments are shown in the comment as well (e.g. this example shows a comment from Felicity with a picture attached). | ||
![]() | ||
| This example shows a comments page with a comment thread containing more than one comment. Specifically, the picture shown has two separate comment threads attached to it (one started by Felicity and another started by Kelly). | ||
![]() | ||
|
Menus
Below is an inventory of the various object types in Wallop and how contextual menus are displayed for each object type. One of the major goals of the redesign of the Wallop menus was to provide simple, consistent menus across all objects. These menus would appear as a list in a panel that pops up on rollover either below or to the right of the object. | ||
![]() | ||
| The following screen shows how the pop up menu would appear when a user mouses over an enlarged image. | ||
![]() | ||
|
Media Modules
The content in a user's Wallop profile consists of various "modules" (such as the Top Friends, About Me module, Comments module, Pictures slideshow, Music module, and Blog module). Users can move these modules around by clicking and dragging the header of the module. To provide visual feedback to the user, a colored highlight appears around the module on mouseover and as the user is dragging it. Though this has not yet been implemented, users would also ideally be able to resize (represented by the indicator at the bottom right of the module) and hide modules (represented by the "Hide" button at the bottom of the module). | ||
![]() | ||