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. I was the only designer allocated on the product team – but had the support of the design team on strategic decisions. I worked across the whole design process: problem-framing and ideation methods with stakeholders, prototyping low and high-fidelity designs for web and mobile, defining developers' hand-off process, validating implementation through design QA, and collecting and analyzing quantitative and qualitative data to inform design decisions.

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 given problem – both externally (customers) and internally (employees), but without success once the solution was too hard to use and not designed in a user-centric approach.

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.

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.

Curated Content

Highlighting What Is Important

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

Org Chart

How Things Connect Together

One of the main challenges when designing Loop was creating a better way for people to understand how the company organizes itself and how people, roles, and departments connect to create value. This was an important problem to solve for the employees, especially for the new ones, 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

New Case

Alloy Automation

Alloy Automation is a no-code tool for ecommerce brands to set up automated workflows that eliminate the time-intensive tasks associated with running their stores, reclaiming time and focus on growing their business.