Liferay Loop

As the product designer for Loop, I was responsible for a major redesign that doubled its number of monthly sessions – from 10k to 20k, within 1 year. As the only designer on the product team, I worked on the whole design process, including the gathering of user feedback, monitoring the analytics data, problem-framing, web and mobile experiences, prototypes, and developers’ hand-off.

Company

Liferay

Timeframe

2016 - 2018

Platforms

Web, iOS, Android

Category

Social

Liferay Loop is an internal Liferay's Enterprise Social Network application designed to help the company Organize, Communicate, Collaborate, and Engage employees. It allows the company to share information based on how it’s organized so that employees, new and old, can quickly find information about people, groups (Departments, Teams, & Offices), and interest topics.

Problem

Fragmented Communication

The communication within the company was too fragmented, leading to misalignment between teams, departments, and offices. The company had previously invested in the development of another solution called “Liferay Social Office” to try to solve the problem, but it didn’t get the employee’s engagement, it was too complex and not designed in a user-centric approach.

The main navigation for the Form Builder is combined in the sidebar: Builder, Rules, and Settings. By grouping everything together in a single place, we make it easy to create a form without increasing the interaction cost.

Data-Informed

Adapting For The Mobile Context

As an internal tool, most of our data to help to shape the product came from the company’s employees' feedback and observation (user testing). But despite that, we also used Usage Analytics tools (Google Analytics and Hotjar) to provide product telemetry offering constant operational and user feedback from the deployed features. After analyzing the mobile data usage, we noticed that it was not making sense to replicate the same information architecture that we had on the desktop application, because people was using the mobile app for quick interactions, like reading a post, clicking in a notification, and searching for a user or group profile. Based on that, we optimized the mobile app navigation to provide a design that makes more sense for a mobile usage context.

Post Types

Communicating With Purpose

As a social network, the core of Loop is its content. Taking it into consideration, we defined 3 post types: Regular, Announcement, and Question and Answer. Each one as a clear communication goal: The Regular is aimed to share general communication, Announcement is for the company managers and leadership to share important information that no one should miss out, and Question and Answer is for technical questions where employees want it to highlight the correct answer.

Curated Content

Highlighting What Is Important

The company leadership as central importance on curating the right information, sharing it timely, and to the right group of people. For this, Liferay Loop provides tools for managers to highlight content that they think is important to their crew to know.

Org Chart

How Things Connect Together

One of the main challenges when designing Loop was to create a better way for people to understand how the company organizes itself, how the different people, roles, and departments connect together to create meaningful work. This was an important problem to solve for the employees, especially for the new ones, in order to make communication more objective and to create a holistic understanding of the company's organizational structure.

With Org Chat functionality, Liferay’s employees can navigate through an interactive chart map and explore the connections and hierarchy between the different departments, teams, and offices.

Pages

A Single Source Of Truth

With the growing number of monthly sessions, we saw a huge increase in the number of daily posts. But there was a problem with the concept of post types that we had: it was too ephemeral. Within some minutes or hours, the users could lose some important information on the steady and even faster flow of their news feed. With this problem framed, we introduce Pages, which is a more formal post type that is stored on the Groups and Topics profiles, making it possible to also group related pages into Collections.

We have made it easy for departments and teams to share and discuss their processes and policies in a single place of truth.

Accomplishments

Some Numbers

After a major product redesign that I led and the introduction of these features, we saw the number o sessions per month doubled, going from 10k to +20k, and the duration of the sessions be increased by 65% within 1 year. After reaching these numbers, the company’s board members decided to make  Loop the official communication tool for Liferay.

Wrapping-up

Tailored Experience

Loop has been a really important tool for Liferay. It has changed the way that the company communicates and aligns in an increasingly remote work environment. The main factor for its success was the fact that it’s a tool completely tailored to the company’s needs and designed in an employee-centric approach.

My Role

What I Was In Charge Of

  1. Design for both mobile and web environments (following Android and iOS guidelines)
  2. Gather and analyze user feedback
  3. Monitoring analytics data
  4. Turn data into actionable strategies
  5. Design from low-fi to interactive prototypes
  6. Review designs with PM and engineers
  7. Developer hand-off
  8. Design QA

Next Up

DXP Forms

Forms is a powerful form tool that helps big organizations to replaced their paper forms with digital ones. It supports a multi-column layout, advanced rules, and can be attached to workflow processes.