UI/UX: “Social Office”

Social Office is a social collaboration platform built on top of Liferay. The goal of the product is to streamline communication within enterprises with groups and sites that empowers users to work together easily.

The following mockups were created over a day and a half of sketching and brainstorming for a future iteration of Liferay's Social Office product that would include a mobile capable view.

Upon building the initial mockups for the next generation of Social Office, I built a proof of concept theme that showcased the new look and feel and prototyped a functional User Bar within it. It introduced the company to a better navigational scheme. The User Bar in itself is user centric and is easily identifiable within the interface globally.

Designed and produced: December 2013
Photoshop, Illustrator, CSS, HTML5, and YUI3/Alloy UI. Most of these mockups are based on screen shots of rapid working prototypes & proof of concepts.

Login Screen

Social Office Proof of Concept

The Dashboard

Social Office Dashboard

User Profile

Social Office Site Forum

This is a mockup of a user's profile. This interface introduced a new UI element called a control bar that allows a user to interact quickly within the context of the page.

Site

Social Office Search

User Bar, Quick Jump (Searching)

Social Office Search Initialized

When a user initializes the search, they are given the option to search sites, users, documents, or if allowed, anything that is permissible for the user to search for. This new search feature enables the user to jump to different sites and content.

User Bar, Quick Jump (Searching Continued)

Social Office Search

Site Navigation

Social Office User Profile

User Bar Menu

Social Office Site Forum

User Bar Notifications

Social Office Site Forum

Site Forum

Social Office Site Forum

Site Forum

Social Office Site Forum