A look at how 5 developers and 1 designer have scaled up their ability to support marketing operations while being forced to scale down their team size.

Disclaimer: This is a piece written from a designer’s perspective on projects that focus on supporting the marketing department. It is by no means the extent of the work done by the web team this year.

Last year the web team had 9 developers and 1.5 designers working on liferay.com. In the months since, we have steadily decreased the team down to 5 developers and 1 designer, making the current team about half the size that it was. However, we are able to meet the demands of a growing marketing organization more effectively than ever before.

A primary focus in 2019 has been to create tools and infrastructure to support marketing self-service. As our product evolves to enable business user self-service we are evolving as an internal marketing organization. This allows us to spend less time and effort on small-scale, but necessary, production tasks and more time evaluating and optimizing liferay.com holistically as a tool for generating quality leads and helping retain successful customers.

Landing Page Builder

Implementing a new landing page on liferay.com moved from being a developer task that took up to 3 weeks to be prioritized to an on-demand marketer task with an immediate turnaround and increased landing page functionality.


Landing page template example
Landing page template example

The design and development resources available to marketing have historically been insufficient to produce the amount of content required by marketing operations, even when the team was much larger. The first step to alleviate the unattainable demand was our Events Sites Template project in 2017/18 which has been highly successful at freeing up developer resources.

Next, for phase 1 of this landing page project, we implemented a static (single layout) landing page template to unify our landing page design, optimize conversion, and reduce development and design overhead per page produced.

For phase 2, we began by conducting exercises with marketers from all regions to evaluate use cases and the needed functionality of an effective self-service landing page builder. After this, we created our requirements and prioritized features before starting design and development. The end result is a full self-service landing page builder that enables marketers to create, customize, publish, test, and optimize landing pages on their own. This has brought the involvement from design and development to almost zero, while providing marketing with a much more robust solution to capture leads.

Available to marketers today are 18 landing page templates optimized for conversion in various use cases and 30+ configurable fragments to customize the pages with.

Product Launch Support

201820192020 (estimated)
7 developers2 developers (+3 for 1 week)2 developers
3 designers1 designer1 designer
6 new pages/templates6 new pages/templates
8 weeks7 weeks2 weeks
100+ hours overtime~32 hours overtime0 hours overtime

MSB Migration

To enable full marketer self-service on liferay.com the next step from creating a landing page builder has been to move all of liferay.com to modern site building. This involves rebuilding liferay.com using fragments and content pages. In the process, we have also implemented a modular component architecture, Liferay Marketing Design System, which significantly reduces the overhead of maintaining the site and creating new fragments.

While moving the entirety of liferay.com to MSB will be a process, the majority of our new pages moving forward will be built out by marketers using MSB with little support needed from design and development. This means when we launch DXP/Commerce in 2020 we expect minimal designer & developer involvement.

Liferay Marketing Design System

To support and maintain the growing autonomy of marketers and create stability and maintainability across our domains, we created the Liferay Marketing Design System.


Design Components

Figma component library
Figma component library

Creating a solid component architecture for liferay.com both in development and design means less developer and designer involvement today and exponentially long-term. We have created a full component library in our design tool, Figma, consisting of 470+ ready to use components which significantly reduce the turnaround time to create new designs and enables design consistency across the site.





Documentation

style.liferay.design
style.liferay.design

Thorough documentation of components for designers, developers, and marketers enables proper implementation and consistency across our site with minimal effort. The design system is also available for any other Liferay team or project to implement quickly and easily, maintaining brand consistency and reducing turnaround and overhead for new sites/projects.

Documentation Site

Centralized documentation for the entire marketing department reduces errors, increases effectiveness, and optimizes processes.


As part of our goal to enable marketers to work effectively we centralized all marketing documentation for the first time. Instead of processes and tools being distributed through google docs, in.liferay, loop, slack, etc. it is now available to the entire department centrally located and easily editable on a documentation site. This empowers the entire marketing department to be more efficient and operate more effectively.

Product Feedback Loop

We are able to provide value to our customers and marketers by providing product feedback from a real-world application.


Communication with product teams in Slack
Communication with product teams in Slack

Much of the increased efficiency made this year would not be possible without the significant product improvements in DXP 7.2. To continue making these product improvements and adding value to our customers and marketers we are now in a consistent and structured feedback loop with the Echo team. This is the first time a team with a real-world application of DXP is providing continual feedback directly to the product team. Thanks to Brian Chan for pushing this to happen. Both teams are finding this communication invaluable and our marketing team is directly benefiting from functionality and fixes being released.

Smaller Projects

Triblio Templates

Triblio popup template example
Triblio popup template example

We have created 5 Liferay branded Triblio overlay templates in use by marketers across the site. Triblio now offers those templates to their customers as well.




Site Performance Optimizations

Site performance metrics from SpeedIndex
Site performance metrics from SpeedIndex

By removing unnecessary scrips, caching pages and resources, and moving to GCP we were able to cut the average page render time almost in half. This means serving pages to customers almost twice as fast, improving site usability, decreasing bounce rates, and offering a more pleasing experience to customers.





Hubspot form on liferay.com
Hubspot form on liferay.com

Hubspot Form Integration

By updating our forms across the site using the Hubspot embed method we have increased the reliability of lead attribution. While implementing the new integration method we also made improvements to the usability and design of the forms.


Summary

So what about all that time we’re saving?

This year has seen better than expected progress in enabling marketers to do their job with significantly reduced involvement from design and development. As we continue to reduce design and developer involvement in the operational work of marketing we can increase the focus on improving and optimizing our buyer’s experience, retaining existing customers and helping them succeed, and improving the integrity of our systems.

All this and more…

All the projects and successes mentioned have been accomplished while still:

Previous

Optimizing Digital Experiences with A/B Testing

More posts by Abel Hancock

image for Design at scale means smaller-scale design
/images/headshots/hancock-abel-h.jpg

Design at scale means smaller-scale design

6 Min Read

Liferay.Design

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