Design at scale means smaller-scale design by Abel Hancock on November 10, 2020

Building an enterprise website with a digital experience platform

For today’s enterprises, the ability to quickly respond to a changing market is both crucial and extremely difficult. For most companies, a corporate website is at the core of their digital marketing activities. The ability to quickly iterate and evolve a website has become a standard business requirement. Enterprises are building sites with thousands of pages, subsites, gated pages, personalization, localization, the list goes on.

Liferay.com is no exception to this model — slow time-to-market for new and updated content has been a continual challenge for our marketing team. Incoming requests for site changes and new development will always exceed the capacity to fulfill requests. Starting with our DXP gives us a reliable, effective, and localizable platform out of the box. However, creating or iterating on pages requires significant developer and designer involvement. This both slows the time-to-market and creates an ever-growing backlog of work for our team.

A paradigm shift from production to enabling self-service

How does a team maintain, let alone improve, a site with hundreds of existing pages to which new pages are added each week? In short, the answer is to design tools that allow business users to create the pages and content they need with minimal oversight from a designer or developer. In practice, this looks like a drag-and-drop site builder with proper permissioning, flexibility (within guidelines), scalability, and minimal maintenance. For design and development teams, this means building flexible, user-friendly components (building blocks) that business users can create pages with. Teams must shift from building and maintaining thousands of pages to providing tools and building blocks that business units use to create enterprise sites.

The solution is easy to identify, but successful implementation hinges on three key points:

1. Selecting the right platform
2. Designing for the needs of the business
3. Building tools on a strong foundation

The foundational technology

Many products already exist to serve individuals and SMBs (small and medium-sized businesses). Squarespace, Wix, Duda, WordPress, and others offer a platform that effectively eliminates developer involvement and minimizes a designer’s work.

Modern site builders are well suited for individuals and small businesses but cannot yet handle the complexities of enterprise websites.

While these platforms have become standard for SMBs and individuals, they are not designed for large enterprises. For an enterprise, the ability to centrally design, develop, and maintain drag-and-drop elements with highly customized functionality is crucial when tens, hundreds, or even thousands of users around the world are creating pages across multiple interconnected sites. Predefined display options, theming, localization, personalized experiences based on user segmentation, and integration with marketing tools such as Pardot, Idio, HubSpot, etc. add to the complexity of technical requirements. This level of complexity is where Digital Experience Platforms thrive. Site Builder – a supercharged drag-and-drop page builder introduced in Liferay DXP 7.2 — was our product’s next big step in enabling nontechnical users to manage complex business requirements.

Leveraging the platform to fit business needs

Two years ago, Liferay’s web presence was built and maintained by a team of nine developers, three designers, and a project manager. We worked tirelessly to design and develop each page without the help of a design system, reusable components, or a page building UI. Existing code and design patterns were reused when possible (in the form of DXP Web Content), but most pages were designed and developed partially or fully from scratch. This resulted in turnaround times ranging from weeks for a simple landing page and months for a small event site. Building a large-scale website with these methods did allow for small benefits, such as creating custom interactions, it stifled the ability to quickly adapt and grow.

There was a significant need for us to evolve our site in three primary areas to fit the mounting needs of business departments across the company:

1. Implement a design system to streamline and standardize design efforts
2. Build a component architecture to minimize development time and maintenance
3. Enable non-technical users to build and own webpages

Solving these challenges forced us to shift from designing and implementing pages and microsites to building a tool that marketers could use directly.

Implementing a design system

A component library with defined styles and components ensured consistent visual design across pages and projects. This also standardized design patterns, making them reusable and significantly reducing the time required to design each page. With these styles, components, and patterns in place designers were able to collaborate and communicate with developers in a shared language, and work with the confidence that designs would be implemented quickly and accurately.

Close

esc

Building a component architecture

In Liferay DXP, fragments act as components that can be reused on multiple pages and configured with predefined settings.

The dev team created a library of fragments with configurable properties, most of which directly mirror components in the design system. These fragments are used as drag-and-drop elements to create pages in a user friendly UI within Liferay DXP.

Empowering non-technical users

In December 2019, we rolled out the first implementation of the new site building experience with an internal landing page building tool for marketers. The tool enables our marketing team to build, publish, and iterate on pages on liferay.com without developer involvement using drag & drop fragments. Prior to implementing this tool, our marketing team would use HubSpot landing pages to drive event registrations, and landing pages custom built by developers on liferay.com for gated content. The availability of the landing page builder marked the first time marketers were able to directly create and publish content on liferay.com. This has significant, positive implications for how our marketing department is able to utilize liferay.com for digital marketing.

Throughout the course of 2020 we have continued to support and improve the landing page building tool as well as updating the majority of liferay.com’s primary pages to use fragments. Projects with new web pages are often completed in 0.5 or 1 story point (minimal designer and developer involvement). Event sites like DEVCON or webinar events are also built using fragments without expensive custom development.

Immediate and long-term benefits

Improved agility

By leveraging Liferay DXP features with an implemented design system and component architecture we’ve reduced the time-to-market for a web page from weeks or even months to just days. For any enterprise the ability to quickly publish is crucial.

At Liferay, a shift from a single on-premise product to multiple cloud-based offerings means our product release cycles are shorter. Instead of releasing updates once or twice a year, we are beginning to push updates quarterly or more. Unfortunately, this strains our relatively small marketing team, requiring more messaging and feature updates in marketing collateral, including web pages. Three years ago, designing and developing content for a product version launch required almost two months of work from a team of 13. Our Liferay Commerce 2.1 product launch earlier this year required less than two weeks of work from one designer and four developers. Although this recent launch was much smaller in scale, the contrast in effort is significant.

In addition to individual product messaging, liferay.com handles portfolio messaging and campaigns. A shift in portfolio messaging is therefore a time-intensive company-wide effort and enabling our site to quickly adapt as we roll out changes is invaluable. Everything from changing specific sections of pages to creating entirely new sections of our website has become a smooth operation that highlights the value of modern infrastructure and tooling.

Responding to market changes

Aside from reducing the developer overhead for creating pages, the quick turnaround for new content has enabled our marketers to respond to and capitalize on market changes. On July 1, 2019, HCL closed the acquisition of IBM WebSphere. This presented an opportunity to reach WebSphere customers responding to uncertainty in the wake of the acquisition. We were able to create and publish web pages for the campaign in a matter of days after writing copy.

Our previous workflow required marketers to have page requests, copy, images, etc. weeks in advance of the launch date. The team would then work the pages into their sprints to be published weeks later. In an ideal world, this isn’t a problem because campaigns are planned well in advance. Realistically, demand for last minute pages is an unavoidable part of digital marketing. To supplement our website, marketers would build landing pages on Hubspot when they didn’t have the luxury of waiting weeks to publish. This decentralized our content and limited the flexibility and control we had over those Hubspot pages.

Reduced overhead & improved ability to fulfill business needs

With this new tool in place, our current team of five developers, one designer, and one project manager are able to create more efficiently and sustainably than our team of 13 could two years ago. Our marketing team is able to publish content when and where they need it without being throttled by web development. Using the right technology and adapting it for the needs of the organization leads to lower cost, more powerful functionality, and better digital marketing results.

By shifting our focus to creating and maintaining a tool for building a site instead of building the site itself we not only improved the current state of our site but also laid the groundwork for future improvements and scalability. With the recent release of DXP 7.3 new features have become available to our team and the liferay.com sites. As we continue to modernize our approach to designing, building, and maintaining a global enterprise website we will adapt features such as style books, master pages, collection pages, asset libraries, and more to create a tool that fits the needs of our business. These features will be implemented in a way that creates the best possible tool for business users to operate in a modern digital market.