Liferay Portal

Trusted Solution for Fortunes and Governments

Conquering Complexity

Liferay DXP is an advanced SaaS solution that allows big fortunes and governments all over the world to create Digital Experience Platforms and evolve their digital transformation.

Liferay DXP allows the management of sites, users, organizations, documents, content, and media. It's possible to build and customize entire sites, portals, and intranets. Users can have different permissions and create pages with no-code technology, manage e-commerce platforms (not only B2C but also B2B), and use the headless CMS features that allow them to define and provide APIs externally.

Results & Impact

I was part of the accessibility team that led multiple improvements which allowed the company to sign a multi-million dollar contract
Defined visual elements for multiple products such as the illustrations and loading spinners
Designed new features such as Translations, File Uploader, Image Editor, and Support for SEO & Open Graph
Mentor of junior/mid designers assigned to multiple projects

Learnings

Liferay DXP has really complex challenges with tons of bureaucracy and politics that allowed me to grow a lot as a product designer working in a multidisciplinary team.

Negotiation with stakeholders and tech leads was crucial in this role to propose new solutions and interactions.

I've learnt how to interact with all the product delivery steps using agile, Jira workflows, and slack messaging.

Image Editor

As part of the CMS features Liferay DXP allowed to edit images using a modal called Image Editor that had advanced settings such as effects, lightning, contrast, crop, resize, and even applying filters to the images like Instagram.

Hypothesis

The idea behind this proposal was born due to the filters and advanced settings allowed by the image editor. I hypothesized that the product was maintaining advanced features for a very small audience.

This brought me to request a focus group with some of our customers (with the help of the research department) to learn how they used these features and be comfortable affirming that most of these settings weren't necessary for our users.

Focus Group

Liferay clients are big companies such as Bank of America and have a pre-defined structure for tasks that include editing images. Thus, the user creating a page is usually different than the user who edited and shared the assets.

This image edition process is often done professionally using external softwares such as Photoshop to cover the different cases of advertising campaigns, so most of the features from the image editor were superficial and not used by our customers.

Refactoring

The research results allowed me to know the client needs and participating in the focus group allowed me to propose removing features with confidence that it would improve the experience.

I planned a refactoring of the image editor with the following results:

Removed features

Effects
Lightning
Contrast
Filters.

Additionally, I also proposed a set of improvements

Cropping Ratios: it now includes the most common screen ratios to help users crop their images.
Cropping Indicator: I also included a size indicator near the mouse to show the final size of the image using pixels.
Rotation: allows the rotation of images with limited steps of 90 degrees to help in specific cases.
Zoom: the possibility to zoom in/out was missing from the original editor so we decided to include it to allow a more detailed cropping.

All these changes allowed teams to keep their flows when editing images but also publishers to easily crop and rotate images when necessary.

Effects
Lightning
Contrast
Filters.

Additionally, I also proposed a set of improvements

Cropping Ratios: it now includes the most common screen ratios to help users crop their images.
Cropping Indicator: I also included a size indicator near the mouse to show the final size of the image using pixels.
Rotation: allows the rotation of images with limited steps of 90 degrees to help in specific cases.
Zoom: the possibility to zoom in/out was missing from the original editor so we decided to include it to allow a more detailed cropping.

All these changes allowed teams to keep their flows when editing images but also publishers to easily crop and rotate images when necessary.

Error Illustrations

When a user creates a new site there are some default pages that the product provides to cover for common errors such as the 404, 500, 502, etc. The goal of this project was to create some illustrations to connect in a fun way with the brand.

I had to involve stakeholders and the brand department to work on these illustrations and also have them approved.