Summary: Designer insight into the thinking and considerations that influenced Liferay's newest commerce accelerator.

Last year was a huge one for Liferay. We extended our offerings from a sole product (Liferay Digital Experience Platform) to a managed hosting solution, a digital commerce product and an analytics product. The entire company has worked tirelessly on this transformation. However, as a designer and member of the Liferay Commerce product team I wanted to share my perspective on this effort specifically from a design perspective.

Besides adding necessary admin designs to the Digital Experience Platform, the product design team works on creating solutions for real-world B2B use cases. The challenge is to create a working design that solves the business needs of whatever vertical we are designing for. Most recently, our focus has been on the manufacturing industry, for which we recently concluded the design and development of a B2B automotive parts solution. We call these vertical design solutions like this "accelerators." The goal is to show a prospect in a given vertical that we have already solved many of their problems and that they can get a huge jump start on their project by using our accelerator as a base. Our ultimate goal is to build accelerators for each of the main verticals Liferay Commerce focuses on. Ideally, we would like to build multiple options for each vertical but one step at a time.

Our most recently completed accelerator is named Minium and is designed to meet the needs of manufacturers. For our business use case we chose an automotive parts supplier and included a number of useful features: product catalog, account management, reporting, orders, shipments, checkout, wishlists and more. What differentiates what we created from existing solutions is our modern design thinking. B2B products are notorious for their outdated, clunky, designs, our goal was to present a fresh take on interactions and flows. To get better insight into our latest creation I thought it would be great to hear from one of our Milan-based product designers, Andrea Censi.

Andrea Censi is a relatively new member of the UX design team at Liferay with seven months under his belt as of mid-January. When the entire Liferay Commerce team came to Diamond Bar for a long overdue meet up at the end of January, I took the opportunity to sit down with Andrea and interview him about Minium, design and what the future holds.

Interview with the Designer

andrea cenci headshot Andrea Censi

What requirements did you and the Product Lead discuss?

When I first started to work on Minium, we embraced an atypical project planning path. As Minium is a very extensive project, we started by listing all possible areas of focus and narrow them down by priority. In other words, we defined the specifications priority by priority. We started by defining the macro requirements to arrive at individual details during the journey. It was clear from the beginning that Minium should be of as a tool or a web app and not just a "theme".

What features/sections of the product did you invest the most in?

The section that required the most effort and time was "account management." Defining all the flows and connections while maintaining the right coherence in showing different content was definitely a challenge. Another feature to which I dedicated particular attention is the "Add to Cart" button. When designing and drawing it I tried to create a flow that would make the action of adding a product to the cart simpler and faster but also more consistent.I love using Principle to better define interactions and transitions and found it particularly useful when creating the flows of the "Add to Cart" button.

How is the product catalog more evolved than what we currently see in the market?

When we talk about user experience, one of the advantages of our product catalog is its ease of use. This was one of the fundamental and essential requirements of Minium from the beginning. The "Add to Cart" button is a tangible example of our commitment to look at every single detail as we look to improve this type of interaction. When we talk about features, another added value is the ability to browse the catalog for Exploded-view drawing… a particularly fun to draw section that will be introduced in the future, stay tuned ;)!

Could you tell us your thought process regarding how you designed the process of account creation?

As I mentioned before, account management is probably the most important piece of the whole project.The defining process for each subsection has been linear. Being able to work in close contact with Marco from our office in Puglia (in southern Italy) has been really helpful. This allowed for a constant and continuous discussion between us, leading to a clear definition of each single. We started by creating the "account details" function before going on to define "users," "organizations" "addresses" and "head "offices."The next step was to build out all possible actions within account management, such as "create new account", "invite user" (with contextual selection of the role), "add organization to account", "add new address" and finally "add head office".

What challenges did you encounter while building Minium? What difficulties did you face that you did not expect?

The man challenge was that I had to deal with the dynamics of the B2B world, which is totally different from the B2C environment. Designing Minium was a very interesting experience that allowed me to work on all phases of the project, from naming it, to defining the flows, and drawing the wireframes and mockups. This was all possible thanks to Marco Leo and Ryan Connolly. Thanks Guys ;)

I want to thank Andrea Censi for taking the time to answer these questions. If you have any questions that we didn't address in this quick interview then please feel free to email us at [email protected] `

Previous

Data-Driven vs. Data-Informed Design

More posts by Ryan Connolly

image for Alone. Together.
/images/headshots/connolly-ryan-h.jpg

Alone. Together.

2 Min Read

Liferay.Design

Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify