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 conceived and prototyped during off work hours and free time. I began designing the next generation of Social Office in mid 2013. This design of Social Office introduced the “User Bar” a new way to navigate through Liferay.

Proof of Concept

Social Office Proof of Concept

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.

December 2013
Photoshop, Illustrator, CSS, HTML5, and YUI3/Alloy UI

The Dashboard

Social Office Dashboard

After logging in, a user is greeted in the Dashboard with a conversational update. In the dashboard is an activity stream that automatically filters activities that are relevant to the user. A user can also post a status update or microblogs post to discreetly inform people of news or ask questions, every microblog update can be commented on.

Users are also empowered to add portlets, these are applications that can quickly update users on information that is relevant to them.

2013
Photoshop and Illustrator
None of the portlets on this page were produced

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.

2013
Photoshop and Illustrator
This feature was partially produced

User Bar, Quick Jump (Searching Continued)

Social Office Search

In this view, the quick jump function presents a user with their favorite sites.

2013
Photoshop and Illustrator
This feature was partially produced

User Bar, Quick Jump (Searching Continued)

Social Office Search

User Profile

Social Office User Profile

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.

2013
Photoshop and Illustrator
This feature was partially produced

Site Forum

Social Office Site Forum

A quick rendering of a site's forum page.

2013
Photoshop and Illustrator
This feature was partially produced