Laserfiche® Landing Page Overhaul

• Objectives
• Solution
• Summary

Objectives

The landing page overhaul included project management, design, development, and QA oversight for transferring roughly 250 landing pages and their matching thank you pages from HubSpot to Pardot. This project involved learning Pardot and training others in its use within a non-negotiable timeline. The objective was to update the appearance of the landing pages to align with the Laserfiche website rebranding. Meticulous QA practices were required to transfer the content and maintain identical slugs. Furthermore, the project involved managing a team of three individuals responsible for data entry and conducting QA checks to ensure accurate content transfer.

Solution

Project Management as Lead Designer

When Laserfiche decided to switch from HubSpot to Salesforce Pardot, the marketing team was notified at the last minute, which led to a scramble to organize all the moving pieces. Since these assets were web-based, I oversaw this transition from a design and front-end development perspective. I was thrilled to take on such a multifaceted project.

First, I worked directly with Lead Generation, the project's primary stakeholder, to define the scope and gather requirements. This project also required close collaboration with the Infrastructure team, who managed our previous marketing platforms, HubSpot and ClickDimensions. Once the design and initial templates were set up inside Pardot, I navigated any code issues that arose from the Infrastructure side (see the Dual Submission Code section below).

Armed with this information, I developed a detailed project scope and a two-month timeline encompassing discovery, design, development, and implementation.

UI Design

Although my UI layout decisions felt intuitive, they were grounded in a clear understanding of effective visual hierarchy and user behavior. I relied on fundamental design principles like the Z-pattern eye flow and the strategic use of contrasting colors to guide visitors toward key messages and CTAs naturally. By organizing the content logically—from a compelling hero section to persuasive benefits and a prominent lead generation form—I ensured that each landing page provided a seamless and engaging user journey.

UX Design

During this particular period, I had recently completed the corporate site and brand design for Laserfiche. As a result, an update to the UX design for all landing page assets was required. To accomplish this task, I researched the original landing and thank you pages to identify and consolidate the essential design elements. It was evident that Laserfiche had several disparate layouts due to outdated content that needed updating.

To address this issue, I categorized the landing pages into resource downloads, schedule-a-demo, and event-based formats during the discovery phase. This categorization enabled us to create a cohesive user journey and maintain consistency across all landing pages. Throughout the process, we carefully considered several key factors, including the target audience, user journey, and lead generation.

Understanding the Target Audience

One of the top priorities for any UX design is understanding the target audience. In my role as an in-house designer at Laserfiche, user flows, and personas had already been established. Using this information, I focused on implementing these frameworks and translating research into tangible experiences. While I didn't create these elements, I ensured my designs aligned with user needs and business goals. Unfortunately, I cannot provide specific examples due to non-disclosure and confidentiality reasons.

Crafting the User Journey

The user journey shapes how we present information on landing pages. I carefully considered users' various paths to reach our landing pages—corporate site links, banner ads, social media, emails, and sales representatives. This meant our audience ranged from top-of-funnel to middle-of-funnel, with visitors seeking resource downloads like the "Getting Started with Laserfiche" eBook, scheduling a demo, or finding event-based information like local user groups. The marketing team's goal was to prioritize quality marketing-qualified leads over quantity. Therefore, I chose to create short-form landing pages focusing on quickly driving a single, direct action. To support this approach, the layouts needed to be concise and consistent across all forms of outreach. Additionally, trust in Laserfiche as a brand was paramount, so maintaining brand consistency—from colors to typography—was crucial to ensure uniform messaging.

Improving Lead Generation

I implemented more modern UX design principles to enhance lead generation effectiveness. I transformed the original landing page's form from a two-column to a one-column layout, reducing cognitive load, minimizing friction, and making the form mobile-friendly. This change provided a smoother, more intuitive user experience, increasing conversion rates by offering a more straightforward, accessible way for users to complete their desired actions.

Development

PSD to HTML

The first step in this development process was to create the raw HTML files directly from the PSD. I began by analyzing the design to identify key components such as headers, footers, and content sections. Then, I exported images and icons from the PSD, ensuring visual consistency. I created a semantic HTML structure with assets in hand that reflected the design layout. Once the structure was in place, I applied CSS to match the typography, colors, and spacing of the PSD. Finally, I tested and optimized the page for responsiveness, ensuring it looked great across all devices.

Salesforce Pardot Landing Page Platform

Laserfiche opted to transition from HubSpot to Salesforce to manage all email and landing page operations. Upon finalizing the contract, Laserfiche enlisted the expertise of a Salesforce setup specialist contractor to facilitate the implementation process. The contractor was also tasked with instructing me on Pardot usage, but they lacked the neccesary proficiency with the template and content system. Determined to overcome this obstacle, I took proactive measures by independently completing various Salesforce's Trailhead courses, ultimately achieving the Trailhead Ranger rank with over 100 badges. Equipped with this comprehensive knowledge, I successfully developed functional email templates within the Salesforce environment.

Pardot Templates

Pardot simplifies translating raw HTML files into editable landing page templates. I integrated my raw HTML code into their system, adding the necessary dynamic content merge tags as needed.

Recognizing that the Lead Generation team, with their limited coding experience, would be tasked with creating landing pages instead of the Creative team, I devised WYSIWYG-style templates. These templates were designed to minimize code or rendering issues, ensuring that content creators had access only to the text, not the styles.

Every element needed to be editable to provide maximum flexibility. To achieve this, I converted all icons, pictures, and text into dynamic Pardot tags. For even greater customization with standalone or custom landing pages, I added two blank fields to the template: a blank CSS field and a blank row just above the footer. This level of detail allowed for the unique, one-off cases that inevitably arise.

The most challenging aspect was the responsive background hero image, which required a file name coded into the CSS for proper functioning. However, Pardot's editor didn't directly support this functionality. I devised a creative workaround using a Pardot image tag for image selection inside the editor. While this would ordinarily inject an image on the page, I utilized jQuery to detect the ­file name of the image chosen, inject it into the CSS for the background, and then hide the initial image element.

The resulting templates empowered the Lead Generation team to autonomously and efficiently create customized landing pages while safeguarding against errors.

Optimize Data Transfer

Once the landing page templates were designed, coded, and tested, it was time to migrate the content from HubSpot to Pardot. With no automated way to complete this task, I faced significant data entry. To minimize errors and expedite the process, I started with careful planning and strategizing, including creating a custom HubSpot-Pardot web tool.

First, I gathered a list of landing pages the Lead Generation team wanted to transfer. Then, I saved all the HubSpot landing pages as HTML files. This served as a backup and simplified the copy-and-paste process. The HubSpot-Pardot web tool I created displayed both the HubSpot and Pardot pages side by side, taking a HubSpot URL as input and showing the live page alongside a Pardot creation page. This minimized incorrect data transfer by preventing mismatched source pages from being displayed.

I managed a team of three individuals responsible for data entry, and I trained them to use my HubSpot-Pardot web tool. I had my team organize the transfer of content in batches of 10 landing pages at a time. This method allowed for progressive content review and helped prevent burnout by avoiding a mass review at the project's conclusion. This approach saved Laserfiche considerable time by streamlining the data entry process and ensuring accurate content transfer with minimal errors.

Dual Submission Code

The most technically challenging aspect of the transfer was implementing a dual-system analytics reporting solution to accommodate both Pardot and a legacy home-grown system based on ClickDimensions. Pardot's data collection system supported the Lead Generation team, while the Sales team relied on ClickDimensions to track potential leads. I wrote a vanilla JavaScript to bridge this gap and submit data to both locations. I paused the default submission to Pardot, parsed the collected data into variables, and submitted them to ClickDimensions through their API before resuming the submission to Pardot. During quality assurance testing, I discovered some scenarios where submission failures occurred in ClickDimensions, but the team deemed this an acceptable risk for the project. The solution ultimately provided unified analytics reporting across both systems, enabling efficient lead tracking for both the Lead Generation and Sales teams.

Clean-up HubSpot References

An unexpected challenge emerged with the banner links the corporate website used. The switch to Pardot changed our landing page URLs, requiring updates to every banner link. The Laserfiche corporate site has thousands of blog pages, each with its own banners, making it a daunting task to fix manually. Instead of dividing the links among the team and updating them by hand (an error-prone process), I took a more practical approach using MySQL. Leveraging MySQL Workbench, I quickly queried the WordPress database to locate and revise the outdated links. This transformed a potential month-long project into a one-day solution.

Summary

• Oversaw the transition from HubSpot to Pardot, including designing, developing, and implementing over 250 landing pages and thank you pages.
• Designed landing pages with a cohesive user journey, optimized visual hierarchy, and enhanced lead generation using modern UX principles.
• Created a HubSpot-Pardot web tool to streamline the data transfer process, displaying side-by-side previews of both platforms to minimize errors.
• Developed dynamic and WYSIWYG-style Pardot templates that allowed Lead Generation to create landing pages autonomously while ensuring design consistency.
• Implemented a dual-system script solution to accommodate Pardot and a legacy ClickDimensions system, providing unified lead tracking for both Lead Generation and Sales teams.
• Efficiently updated thousands of banner links on the corporate website by leveraging MySQL to revise outdated HubSpot URLs, reducing a month-long task to a one-day solution.