UX: Draft User Experience Mockup for the Contacts List

As I was redesigning Social Office, we were

The following wireframes show the user interactions to manage contacts and edit a user's profile.

I wrote, designed, and drafted the stories associated with these interactions.

Designed and partially implemented for Liferay Inc.
2011-2013

A Draft User Experience Mockup for The Contacts List

Social Office Proof of Concept

The conceptual UI mockup of a contacts list and profile.

2011
Illustrator and Photoshop
Not currently fully implemented

Contact List
(Page 1)

Social Office Proof of Concept

Initial view and definitions.

  1. Search Box
  2. List viewer
  3. Name Navigator
  4. User list sorted header
  5. Mini User Card
  6. Contact Action Bar
  7. Viewing Pane

2011
Illustrator
Not currently fully implemented

Contact List:
Search Behavior
(Page 2)

Social Office Proof of Concept
  1. User Performs a Query for “John” in context to Fig. 2.
  2. Fig. 2:
    1. The List viewer filters the results based on contact grouping. A user can search for a particular list for faster navigation. (Future Implementation?)
    2. or searches from within all contacts.

2011
Illustrator
Not currently fully implemented