Laserfiche® Website

• Corporate Website
• UI / UX
• Development
• Project Management

Executive Summary

Introduction

The Laserfiche website redesign aimed to enhance user experience, improve visual appeal, and ensure the site’s accessibility and responsiveness. This project was crucial for maintaining Laserfiche’s competitive edge and improving customer engagement.

Objectives

• Create a visually appealing and user-friendly website.
• Improve site accessibility and responsiveness.
• Enhance SEO and overall performance metrics.

Key Actions

• Developed a detailed Gantt chart and RACI matrix to coordinate cross-departmental efforts.
• Revamped the web visual design by refining typography, ensuring color accessibility, and creating cohesive UI elements.
• Designed an intuitive Mega Menu based on user research.
• Conducted extensive usability testing and ensured multilingual support and accessibility.
• Transferred over 2,000 posts from legacy WordPress sites, ensuring data consistency and integrity.
• Achieved significant improvements in Lighthouse scores through optimization efforts.

Results

• Successful on-time launch of a visually appealing and user-friendly website.
• Reduced content revision requests by 22%, enhancing user engagement and improving turnaround times.
• Improved performance scores, increasing Lighthouse scores significantly in performance, accessibility, and SEO.

Conclusion

The Laserfiche website redesign project met its objectives, resulting in a more accessible, responsive, and visually appealing site that has positively impacted user engagement and SEO rankings. The project was completed on schedule, demonstrating effective project management and collaboration.

Project Description

Laserfiche® is the leading SaaS provider of enterprise content management and business process automation. Through powerful workflows, electronic forms, intelligent analytics, document and records management, content capture, and more, the Laserfiche® platform enables leaders to focus on growth across their enterprise. Recognizing the need to enhance functionality, SEO standing, and user engagement and align with our recent rebranding efforts, Laserfiche embarked on a comprehensive website redesign.

As part of this initiative, I was tasked with migrating the outdated site to a modern CMS platform, ensuring it supported multilingual content and offered a fully responsive design. This redesign was essential to reflect our cutting-edge technology and forward-thinking ethos. Our platform empowers people everywhere to work smarter, creating innovative solutions that enrich our world. We pride ourselves on our industry-leading technology and talented people who accelerate how business gets done by creating software that people love to use. This project aimed to inspire and educate, improve lives worldwide, and challenge our industry and customers to rethink what’s possible.

Solution

Content Strategy

In redesigning the Laserfiche corporate website, while the initial directive was to port existing content, the strategic integration and enhancement of this content were essential to the project's success. We undertook a comprehensive content audit to identify outdated information, redundancy, and gaps relative to our target audiences’ needs. This audit informed a targeted content development strategy aimed at filling those gaps and refreshing key sections of the website to better align with current SEO best practices and business objectives. We also prioritized the improvement of information architecture to enhance navigation and user experience, ensuring that users could find information quickly and intuitively. Recognizing the importance of visual engagement, we strategically incorporated multimedia elements, such as custom graphics and interactive videos, to support textual content and improve user engagement. Throughout this process, we maintained a rigorous adherence to legal and compliance standards, particularly in terms of data privacy and accessibility, ensuring that all content met the highest standards of corporate and regulatory expectations.

Project Management

Planning and Setup

In the project's initial phase, I focused on meticulous planning and setup to ensure smooth execution. I spent three weeks creating a detailed Gantt chart using Microsoft Project, which outlined all tasks, milestones, and deadlines. This chart served as the backbone of the project's timeline, allowing for a clear visualization of the project's progress. I also established a RACI matrix to define roles and responsibilities, ensuring every team member and stakeholder knew their contributions and accountabilities. This planning phase involved coordinating with multiple departments, including the Infrastructure team, to ensure our legacy static site generator code continued to function as expected and the IT team to set up redirects, server headers, and pointers correctly. These foundational steps provided a strong base for the project's success.

Execution and Coordination

During the execution phase, I took charge of the complex details of development, design, and content creation. My close collaboration with the Brand team led to the creation of new site content, while my engagement with the Press team resulted in a dedicated section for press releases and updated case studies. I also worked with the Social team to ensure that new social graphics aligned with the new corporate site's visuals. Furthermore, I liaised with the Customer Experience team to guarantee that user personas and research accurately represented our customer base and that the content effectively communicated key messages to users. My role was to maintain the project's scope, prevent scope creep, and keep the team focused and on track. Regular check-ins and updates with both internal and external QA teams ensured our site functioned and rendered correctly. This thorough coordination across teams was instrumental in sticking to our timeline and achieving our goals.

Challenges and Successes

One of the biggest challenges was coordinating across various teams and departments to maintain alignment and ensure smooth communication. However, we overcame these obstacles by establishing clear expectations and a robust project management framework. I worked closely with the Creative team to critique my work, ensuring the design was on brand, visually appealing, and easy to navigate. The meticulous planning and proactive management paid off, as we successfully launched the redesigned Laserfiche site on the predicted day. This achievement highlighted the effectiveness of our project management approach, demonstrating our ability to deliver a complex project on time and within scope.

UI / UX Design

The UI/UX design I developed for the redesign was multifaceted, encompassing architecture design, visual design, and content optimization. This comprehensive approach ensured an intuitive structure, a visually appealing interface, and clear, relevant content. The result was a seamless, user-centered experience that effectively met both business goals and user needs.

Theme selection

We decided to use a preexisting WordPress theme rather than building one from scratch to cut down on our project timeline. This choice helped us tap into the robust features and functionalities of an established theme, allowing us to get our site up and running faster while still adhering to our standards for quality and customization.

I analyzed various WordPress themes in detail, searching for the perfect fit. My main criteria were ease of customization, page optimization, responsiveness, and accessibility. A requirement of the project, I needed a theme that would make content development a breeze for non-developers. After a thorough evaluation, Avada and The7 emerged as the top two contenders, both offering a great mix of flexibility and user-friendliness.

In my head-to-head comparison of Avada and The7, The7 clearly came out on top for several reasons. Both themes boast extensive customization options and support for major page builders. However, The7 really stood out with its seamless integration with WPBakery Page Builder and Elementor, giving me more flexibility in crafting my websites. I appreciated how user-friendly The7 was; its intuitive interface significantly reduced the learning curve. In contrast, despite its robust features and customization potential, Avada could be overwhelming due to its complexity. Additionally, The7 boasted superior performance; it was optimized for speed right out of the box, whereas Avada historically required more fine-tuning to achieve similar performance levels. The inclusion of over 40 pre-made website templates that I could deploy with a single click further enhanced The7’s appeal, making it my top choice for a powerful, versatile, and efficient WordPress theme.

Visual Design

Before starting the website redesign project, our company went through a brand update led by the print design team. They created comprehensive documentation covering brand voice, logos, typefaces, colors, photography, and illustrations. However, since the print team lacked web design experience, there were still design issues that needed to be addressed. I was brought in at the end to review the style guide and ensure it would work for our online properties. In this discussion, I will outline my contributions to the visual design of the style guide.

Typography

The print team did a wonderful job creating a style guide for font sizes, line-height, and tracking. Unfortunately, these choices didn’t translate well to the web, so I needed to create a functional typography style guide that maintained a similar feel to the print choices.

One big challenge was the typeface selections made by the print team—a combination of Aller and Tisa Pro. Tisa was chosen for its humanistic elements, which aligned well with Laserfiche’s brand voice. However, it wasn’t the best choice for the web. As a serif font, Tisa often doesn't render as cleanly as sans-serif fonts, which are generally more legible on screens, especially at smaller sizes.

The pairing of Tisa and Aller was particularly tricky to balance because of their drastically different styles. Tisa visually renders much larger than Aller due to its serifs and inherent weight. Since it was part of the rebranding, I had to find a solution. Moreover, with Aller set as the backup typeface for Tisa in the CSS, it was inappropriate to create a separate sizing guide for Tisa elements.

The solution I decided on was to create a type scale that accommodated the size differences between Tisa and Aller. This approach ensured both typefaces remained legible, adhered to the print choices, and degraded gracefully if font-loading issues occurred. I chose a minor third scale (1.200), which is a medium contrast scale. Medium contrast scales are usually the safest option, working well across larger and smaller screens and being particularly useful for designs with a lot of text. In this case, it acted closer to a high contrast scale, which worked beautifully for larger screens, giving us the best of both worlds.

Color and Accessibility

Overall, the print team's color palette revisions for the rebrand were solid. They brightened the colors to make them more vibrant and modern, matching Laserfiche's rebranded voice. However, I raised two issues about their choices: accessibility and the need for contrasting colors.

Management wanted our brand color, orange, to be the highlight and call-to-action color. This posed a significant issue with accessibility due to its color contrast. Color contrast is crucial for accessibility, ensuring text is readable against its background. According to Web Content Accessibility Guidelines (WCAG), a contrast ratio of at least 4.5:1 for standard text and 3:1 for large text is necessary. Using our orange as a button color meant failing both WCAG AA and AAA standards. Despite raising this issue, it was deemed acceptable. It's essential to be aware of these issues so they can be addressed if problems arise later.

The original color palette included orange for highlights and UI elements, dark blue-grey for type, white for backgrounds, and light blue-grey. Unfortunately, the light blue-grey contrast wasn't strong enough against the white backgrounds, necessitating the inclusion of a darker blue in the palette.

Considering the primary color's hue, saturation, and brightness, I selected a range of complementary blues to our orange. Additionally, I checked the accessibility of these blues before presenting them to the team. We evaluated each option against the brand voice, image guidelines, and illustration. To expedite the process, I created a presentation demonstrating the new colors in marketing collateral. The resulting color selection provided the perfect tonality to match the established colors while ensuring the necessary visual contrast on the website.

UI Elements

Defining the UI elements for Laserfiche was crucial in aligning the digital experience with the newly rebranded identity. I started by thoroughly analyzing the brand guidelines provided by the print team, which included new color schemes, typography, and visual styles. My primary goal was to translate these elements into a cohesive and functional web interface. This involved creating a comprehensive set of UI components that adhered to the brand's modern and vibrant aesthetic, such as buttons, form fields, navigation menus, and illustrations. I ensured that each element was designed consistently, maintaining uniform padding, margins, and alignment to create a seamless user experience.

One key challenge was ensuring that these UI elements were visually appealing and accessible. I conducted rigorous testing to ensure sufficient color contrast, legibility, and usability across various devices and screen sizes. This process included refining the color palette to meet accessibility standards, selecting web-friendly fonts, and optimizing interactive elements for touch and keyboard navigation. By focusing on both design and functionality, I created UI elements that reflected the refreshed Laserfiche brand and provided an inclusive and user-friendly digital experience.

Information Architecture and Content Creation Guide

Before the website redesign, Laserfiche faced a significant bottleneck in creating new web content, which was challenging due to inconsistent and often confusing instructions from various internal departments and stakeholders. Recognizing that this issue would persist post-redesign, I developed a PowerPoint Content Creation Guide to educate, improve, and expedite the process. Designed to optimize content modules for peak results, this guide provided clear guidelines and examples of how to do this, emphasizing a structured and user-centric approach. This enabled departments to produce more coherent and compelling content, significantly improving turnaround times and the overall quality of our web pages. The guide led to a 22% decrease in content revision requests.

The information architecture guidelines were organized into four principal sections: Hero, Problem-Solution, Trust Elements, and Call to Action. Each section was specifically tailored to enhance user engagement and streamline navigation and interaction throughout the site. After finalizing the module templates for the website redesign, I segmented the modules according to these four key categories. For each module, I provided a comprehensive explanation covering the type of content it should encompass, its role within the overarching site design, and examples of practical application.

Additionally, the document provided direction on copywriting and SEO strategies, advocating for a direct and concise style to enhance page ranking and maintain reader engagement. It emphasized the importance of focusing on a single central talking point to prevent dilution of the page’s thematic strength. The guidelines also differentiated between L2 and L3 pages—L2 pages served as cornerstone content hubs, while L3 pages handled more detailed, specific content. This hierarchical structure helped organize content efficiently and enhanced user navigation on the site.

The PowerPoint Content Creation Guide significantly improved communication between departments, enabling a more unified and coherent presentation of content that strengthened the Laserfiche brand with a consistent and compelling voice.

Sample Slides

Strategic Content Rebuild and Optimization

The old Laserfiche WordPress environment utilized a custom theme developed five years ago on WordPress 3.9. This theme was pretty static due to its hardcoded elements and the absence of a visual editor, making it unfeasible to export and import content directly to the new WordPress environment. Regardless, I prefer manually recreating the content rather than just importing it. This method allows me to update and optimize the content. By manually taking charge of the transfer, I can eliminate any HTML/CSS clutter, streamline media usage, and ensure that everything fits in with Laserfiche's new design philosophy. This additional effort is worthwhile, significantly boosting site performance and security. The old Laserfiche corporate website had 65+ static pages to transfer to the new WordPress installation. The key sections are the Home Page, Product Tour, and Solutions. In addition, there are a variety of post entities: the blog, Laserfiche Certification, Resources, Solution Exchange, and Case Studies.

Each page required thorough evaluation, restructuring, and rebuilding to enhance the customer experience effectively. Leveraging the framework from my Content Creation Guide, I adapted the existing content to fit neatly into the four principal sections: Hero, Problem-Solution, Trust Elements, and Call to Action. This structured approach really helped streamline our content. It boosted our site's overall usability, ensuring that every page effectively guides our users from their initial curiosity right through conversion. Below, we can examine an example of this process.

Customized Theme Modules

Hero Section

The hero section captures the user's attention, identifies the target audience, and conveys the page's value, ensuring it resonates with users from the start. Examine section A from the image below. My design introduces a background image that grabs the user's attention and makes the page visually appealing. It also evokes emotions, establishing a stronger connection with the audience and enhancing the hero section's impact. Also, I introduced a subhead to help customers quickly identify if the content is important to them, reducing the time and effort needed to determine relevance.

Problem-Solution Section

The Problem-Solution section is designed to empathize with users by acknowledging their challenges and demonstrating how Laserfiche’s solutions effectively address them. This section guides customers through each stage of the marketing funnel. Understanding that our readers are pressed for time, I put considerable effort into making the content more skimmable. This ensures key information is communicated clearly and swiftly. For example:

Three Icon Row

My redesign included concise headlines and a carefully curated icon selection, enabling users to quickly find the information they need. I also guided the copywriters to ensure the content of the three icon row functioned as an effective quick reference for the page's contents.

Feature Rows

The page's narrative is just as important as its design, so I collaborated with the copywriters to make the content more streamlined and direct. This change directly addresses pain points, allowing customers to immediately recognize the relevance of the content without needing to read in-depth. For example, we changed “Create Sophisticated Custom Solutions” to “Reduce Duplicate Data Entry.”

To improve the user experience, I removed the alternating color backgrounds between each Problem-Solution row. This unifies all the Problem-Solution sections on the page, enhancing the information architecture to better guide the customer through the content.

Icon Bullet Rows

The original design of this section was very unanchored, with open-ended messaging that made it difficult for customers to find the information they needed. To address this, I added keyword headlines like "Payment Gateways" instead of vague statements like "Laserfiche has many prebuilt solutions for everything." I also aimed to strengthen the narrative by identifying known problems of our customer base. By including more relevant bullet points, I ensured users could see that their issues would be addressed, encouraging them to continue on the marketing journey.

Trust Element Section

Customer Testimonial Row

I created a testimonial row to build trust and credibility, providing social proof of positive customer experiences. Real-life success stories validate our product and reassure potential customers. Testimonials enhance emotional connection by sharing relatable experiences and are often more persuasive than marketing copy. They also showcase our product's versatility and improve SEO with user-generated content. This section was not in the original design, but I advocated for its inclusion to enhance the marketability of the page.

Relevent Resource Row

Too much information can cause choice paralysis, so I standardized the Relevant Resource section to include a maximum of four resources, streamlined the headlines, and removed subtext. The resources previously used on these pages were outdated, having been stagnant for three years. I pushed the team to curate more relevant and recent content to address this. Keeping content updated is crucial for communicating relevant content to our customers. From a design perspective, I transformed the resources into graphic tiles. This added visual variety, balanced the icon usage, and captured the customer’s attention. The larger clickable area also facilitated smoother navigation through the marketing funnel.

Call to Action Section

All level 2 pages utilize a call to action (CTA) row at the bottom of the page. CTA rows guide user action, capitalize on engagement, reinforce messaging, and increase conversion rates. The original layouts all featured a “Get a Demo” CTA, which can be problematic. Customers exploring these pages are often in the top or middle of the funnel, so I advocated for a resource download as a softer CTA better suited to this audience. This change improved customer engagement by 23%.

Laserfiche Screenshot Illustrations

Screenshots are essential on a B2B website because they provide potential clients with a clear visual of what they can expect. These visuals simplify complex products or services by offering a snapshot that's easier to grasp than text alone. They enhance a brand's credibility and effectively showcase specific features or updates, ensuring that critical details are highlighted. Additionally, screenshots engage visitors longer, giving them a practical sense of how the product functions, which is instrumental in converting casual browsers into buyers.

The challenge with Laserfiche's product shots was that they needed more visual appeal and cohesion, and the product was complex to grasp at first glance. To tackle these issues, I decided to create a set of illustrations that simplified the content and unified the look and feel to enhance brand cohesion. I collaborated closely with the Product team, who provided the original screenshots. Unfortunately, these screenshots were challenging to understand regarding content and intent, highlighting their ineffectiveness for top-of-funnel customers. To address this, I took the time to understand the purpose behind these screenshots fully. This enabled me to simplify the content effectively, ensuring it communicated the solutions to the customers' pain points.

Sample Screenshot Redesigns

Mega Menu

The VP of Marketing made it a project requirement to use a Mega Menu. Mega Menus enhance user navigation by providing a comprehensive view of available options in a single, organized dropdown. This design element lets users quickly find what they’re looking for without clicking through multiple pages, improving the overall user experience. There is a balancing act—too much information can overwhelm the user, while too little won’t facilitate effective navigation.

Organizing the Mega Menu came naturally to me, thanks to my experience as a designer and the user research previously conducted by Laserfiche. The predefined horizontal and vertical elements guided my intuitive decisions about content grouping, information architecture, and visual hierarchy. I logically categorized items by understanding user behavior and navigation patterns, ensuring a visually appealing and user-friendly interface. This natural ability to structure content effectively helped create a Mega Menu that effortlessly enhances user experience and navigation.

Additionally, I designed the Mega Menu to include up to two flexible promo areas per menu, allowing for dynamic updates based on promotions and events. Strategically placed to capture attention without overwhelming the navigation flow, these areas highlight current offers and upcoming events, enhancing user engagement and supporting marketing efforts. This flexibility ensures the Mega Menu remains an effective tool for user engagement and business growth, effortlessly adapting to changing priorities and strategies.

UI / UX Testing

User Engagement and Usability

One of our main goals was to boost functionality, SEO ranking, and user engagement. To ensure we hit the mark, we did a lot of hands-on usability testing. We watched how real users interacted with the new design to see if it was intuitive and engaging. This helped us spot and fix any issues, ensuring a smooth and enjoyable user experience.

Responsiveness and Multilingual Support

Since Laserfiche serves a global audience, it was key to ensure the site worked well on all devices and supported multiple languages. We tested the site on phones, tablets, and desktops to ensure it looked great and functioned well everywhere. We also checked the multilingual content to ensure it was accurate and easily accessible, which was vital for our international users.

Accessibility and Performance

We took data privacy and accessibility very seriously during the redesign. We performed thorough accessibility tests to meet the Web Content Accessibility Guidelines (WCAG). This involved checking color contrast, font readability, and the usability of interactive elements. We also focused on performance testing to ensure the site loaded quickly and ran smoothly, providing a fast and efficient user experience. Our commitment to accessibility and performance improved the user experience and underscored our dedication to inclusivity and quality.

Content Strategy Validation

Revamping our content was a big part of the project. After a detailed content audit to weed out outdated info and fill in the gaps, we tested the new content to ensure it was easy to navigate and engaging. We added custom graphics and interactive videos and tested their impact on user engagement. This meticulous approach ensured our content was SEO-friendly and aligned with our business goals and user needs.

By focusing on these critical areas during UI/UX testing, we ensured the new Laserfiche site was visually appealing, user-friendly, functional, and accessible to everyone. This thorough testing process was crucial for the successful launch and positive reception of the redesigned site, showcasing our commitment to delivering a top-notch user experience.

Development

2,000+ Post Transfer

Transferring over 2,000 posts from the old WordPress environment to the new one was a complex challenge due to the posts being distributed across individual legacy WordPress sites. This fragmentation was a result of the corporate site’s evolution over time, posing unique difficulties in terms of data consistency and integrity.

Data Standardization

Each WordPress instance had its own set of categories and tags, with no standardization between them. For instance, “Solution” in one database was “Solutions” in another. To resolve this efficiently and safely without resorting to manual data entry, I devised a simple yet effective solution.

Using the built-in WordPress Export/Import functionality, I exported posts from each database into separate XML files. To standardize the category tags in these XML files, I used grepWin with a complex regular expression. Here are examples of the values that needed standardization:

<category domain="category" nicename="solution"><![CDATA[Solution]]></category>
<category domain="category" nicename="solutions"><![CDATA[Solutions]]></category>
<category domain="category" nicename="answer"><![CDATA[Answer]]></category>

I standardized these to:

<category domain="category" nicename="solution"><![CDATA[Solution]]></category>

The regex used was:

<category domain="category" nicename="(solution|solutions|answer)"><!\[CDATA\[(Solution|Solutions|Answer)\]\]></category>

This pattern matched any of the specified variations, allowing for efficient standardization. This approach enabled the creation of a comprehensive, multidimensional filter that handled all 100+ categories and terms seamlessly.

Uploading

After cleaning the XML files, the next step was to upload them to the new WordPress instance. However, due to the large file sizes, the server connection consistently timed out, resulting in incomplete post transfers. To address this, I deleted the posts that had been partially uploaded and then broke the XML files into 3-5 smaller files each. This strategy allowed for successful upload of all 2,000+ posts to the new WordPress environment.

Static Site Generator Update

Before my onboarding with Laserfiche, the company had developed a static site generator (SSG) engine to mitigate WordPress vulnerabilities. This engine, written in C# and maintained by the Infrastructure team, was not a WordPress plugin but legacy code designed to enhance performance and security. Recognizing the value of this homegrown SSG, I needed to collaborate with Infrastructure to update it for the new site.

The SSG relied on hardcoded HTML from the old WordPress to render pages, ensuring a seamless appearance with the rest of the corporate site. Initially, it seemed like a simple HTML update would suffice. However, this approach was no longer viable with the advanced optimization technologies I integrated into the new WordPress site. Furthermore, any updates to the WordPress menu would have required the Infrastructure team to manually update the static HTML used by the SSG. This process was neither efficient nor sustainable.

Another significant challenge was the Events section of the site, which encompassed User Groups, Workshops, Tradeshows, Regional Trainings, and Webinars. The Events team managed these event types using a separate, custom-built system, meaning none of these pages were housed within WordPress. Instead, the content was pulled through the SSG with an API, which I could not modify from WordPress.

The solution I devised was elegantly simple. Instead of using hardcoded HTML within the SSG, I created a template page in WordPress that included only the site's header and footer. I then worked with the Infrastructure team to pull this template dynamically, parse it, and populate the static pages using this template. This approach ensured that all dynamic elements and navigation menus were updated automatically. Additionally, I created CSS to target the elements of the Events page, ensuring they matched the rest of the corporate site. This solution eliminated the need for manual updates and ensured that the page cache and Events section were always up-to-date and aligned with the latest site optimizations.

I successfully integrated the SSG with the new WordPress site by partnering with the Infrastructure team and leveraging a dynamic template approach. This maintained the desired high performance and security and streamlined the process, reducing manual intervention and ensuring consistency across the site. The result was a robust, efficient, and maintainable solution that aligned with Laserfiche's technological advancements.

Multilingual Site

The largest scope creep the corporate redesign project faced was the inclusion of multilingual sites. To handle this efficiently and with confidence, I turned to the WPML (WordPress Multilingual) plugin. WPML, with its efficient translation capabilities, made it possible to translate our content into multiple languages, including Simplified Chinese, Arabic, French, and Spanish, catering to our diverse global audience. Additionally, I negotiated with management to keep the translated variants to just the core pages of the corporate site. I reminded the team that the web is constantly changing, so adding full multilingual sites after the fact is acceptable. This way, we still supported our global audiences while meeting project deadlines.

One of the biggest challenges was ensuring consistency and accuracy throughout the site. To tackle this, I collaborated closely with our small team of professional translators and used WPML's translation management tools to keep everything in check.

Maintaining site performance with all the additional language data was tricky. I solved this by implementing caching strategies and optimizing the database, ensuring the site remained fast and responsive. Specifically, I used WP-Optimize to clean up the database and W3 Total Cache to minify assets.

Additionally, ensuring the layout and design stayed consistent across different languages, especially with varying text lengths, required careful testing and tweaking. Part of this responsibility was outsourced to our Testlio QA team. Thanks to WPML's powerful features and some dedicated fine-tuning, I was able to deliver a multilingual site that was not only accessible but also smooth and engaging for users around the world.

Page Optimization & Lighthouse Scores

Optimization is crucial for a fast and responsive website, directly impacting user experience and SEO rankings. Our old WordPress corporate site had poor Lighthouse performance scores, ranging between 34 and 48. Improving these scores became one of my top priorities, right alongside setting up the new theme and porting over the website content. Using Chrome Developer Tools, I could dive in and perform a comprehensive optimization for the new corporate site.

Optimization Plugins

I used two specific optimization plugins I had successfully used on previous WordPress installations: W3 Total Cache and Perfmatters. W3 Total Cache focuses on robust caching mechanisms and file optimization, while Perfmatters provides granular control over turning off unnecessary features and managing scripts. W3 Total Cache handled the heavy lifting of caching and file compression, ensuring that pages were served quickly and efficiently. Meanwhile, Perfmatters fine-tuned the performance by eliminating bloat and managing resources on a more detailed level. Together, these plugins complemented each other to streamline site performance and effectively reduce load times.

Image Optimization

I presented a few image optimization tools to my Art Director, but he felt they added too much overhead to the site. So, we worked together to establish a manual process for image optimization using TinyPNG. This allowed us to quickly optimize and convert images to next-gen formats such as WEBP. Since individual content creators would also be uploading their own media, we purchased a plan with TinyPNG to create a relatively efficient manual image optimization process.

Caching Policy

To optimize the caching policies of our WordPress site, I coordinated closely with the IT team to ensure that caching headers were set correctly. I implemented HTTP caching headers to control browser caching, ensuring that static assets like images, CSS, and JavaScript files were cached efficiently. This reduced server load and improved page load times for returning visitors. When combined with our static site generator, this further enhanced the site's performance and responsiveness.

Minification and Concatenation

I used the W3 Total Cache plugin to optimize the site to minify and concatenate assets such as CSS, JavaScript, and HTML files. This process reduced the number of HTTP requests and the size of these files, significantly improving load times. The JS and CSS minification proved challenging due to the stack order between custom and theme assets. To ensure everything was rendered correctly, I took an inventory of all the individual files and manually entered them into the W3 Total Cache interface, setting specific controls for each one. Additionally, I coordinated with the IT team to implement gzip compression on the server, ensuring that we served these minified assets compressed, which further enhanced the site’s performance and speed.

Content Delivery Network (CDN)

I wanted to implement a content delivery network (CDN) but faced technological challenges preventing its use. The IT team at Laserfiche was unfamiliar with the distinctions between a static site generator (SSG) and a CDN, mistakenly assuming they were the same. An SSG generates static HTML files from content and templates, while a CDN distributes these files across a network of servers to reduce latency and improve load times. Thankfully, when we transitioned the site to Pantheon, an automatic CDN was implemented, resolving these issues and enhancing the site's performance.

Lazy Loading

I would have implemented lazy loading using the Perfmatters plugin to optimize the site. Lazy loading defers the loading of images and videos until needed, significantly improving initial page load times. By enabling this feature in Perfmatters, I would have ensured that images and videos only loaded when they entered the viewport, reducing the amount of data that needed to be fetched during the initial page load. However, the VP of Engineering didn't like how it looked, so we sacrificed our page speed scores for his preference.

Results

Through these optimization efforts, our Lighthouse scores saw significant improvement. The performance score ranges jumped from 40 to 85, accessibility scores increased from 60 to 95, and SEO scores rose from 70 to 90. Our mobile performance score improved drastically, ensuring a better user experience on smartphones and tablets. These enhancements improved the site’s speed and usability and positively impacted our search engine rankings and overall user satisfaction.

By systematically addressing each area of concern and leveraging the combined power of W3 Total Cache and Perfmatters, we transformed our WordPress site into a high-performing, user-friendly platform.

Usability Assurance Testing

Ensuring the quality and reliability of our WordPress site was a top priority, which meant I had to implement a comprehensive Quality Assurance (QA) testing process. This involved coordinating efforts with both internal and external QA teams to catch and address potential issues early and effectively. Here’s an overview of how I acquired resources, managed the QA process, and systematically tested the site to deliver a robust final product.

Acquiring Resources

To secure internal QA support, I negotiated resource hours with various team leads to ensure we had dedicated time for testing. Unfortunately, our internal QA team was only able to provide limited resources due to an upcoming Laserfiche feature release. So to ensure thorough QA testing, I sourced external QA resources by evaluating several QA platforms, including Testlio, UserTesting, and QA Symphony. I assessed these options based on their testing capabilities and ease of use. Testlio stood out for its comprehensive testing services and user-friendly interface, which enabled efficient issue tracking and resolution. I had our internal QA team use the Testlio interface to track their changes, and the workflow was seamless.

Managing the QA Process

I budgeted time for the QA process in my Gantt chart to ensure we had adequate time for thorough testing and bug fixes. We used the Testlio interface to track all issues that arose during the site testing. As the sole developer for the WordPress site, I was responsible for correcting all identified issues while managing the intake from the QA teams. This involved prioritizing tasks, addressing critical bugs promptly, and ensuring clear communication between internal and external QA resources.

Systematic QA Testing Process

I broke the site up into core pages, blog posts, and responsive states for systematic QA testing. For each section, we conducted rigorous testing to ensure functionality, performance, and user experience. This involved matching slugs to the old site, checking links, verifying content accuracy, and ensuring page load times met our standards.

For the core 65 pages, we tested each one individually. The blog had over 2,000 entries, so my team performed random sampling to QA them. This method efficiently catches errors and maintains quality control, especially with such a large volume of data. For responsive states, we tested the site across various devices and screen sizes to ensure a consistent and user-friendly experience. One issue we encountered was the mobile navigation menu not displaying correctly on tablets. After identifying this problem, I adjusted the CSS and tested the fix across multiple devices to ensure the issue was fully resolved.

WebOps Solution

One of the most pressing challenges I faced during this project was the need for a sandbox environment, a persistent issue plaguing the old WordPress installation. Without a dedicated sandbox, I was forced to make all updates and edits directly on the live site. This precarious situation inevitably led to outages and disruptions, impacting the reliability and user experience of the corporate site. Recognizing the critical need for a safe and isolated testing space, I made it my mission to source and implement a sandbox solution after the initial site launch, providing relief and security for the corporate site's future.

In-House Solution

Due to the dependencies on our static site generator, the most logical option was to explore an in-house solution. After a few weeks of collaboration with the IT team, we scoped out the project. This included setting up another server, creating synchronization scripts, devising a system for multiple editors, etc. However, it became clear that IT lacked the development resources for this project. Ultimately, we agreed there was no reason to reinvent the wheel when external tech solutions could accomplish this more effectively and efficiently.

External WebOps Solutions

I was given free rein to source the appropriate WebOps solution, so I embarked on a comprehensive evaluation of multiple tools. This included WP Engine, Pantheon, and Flywheel, assessed through multiple product demos and presentations. During these sessions, I scrutinized each platform's infrastructure, performance optimization, user interface, scalability, and support capabilities. I looked for solutions that offered high-speed performance through robust infrastructure and efficient caching mechanisms. A user interface that was intuitive and straightforward was essential for quick onboarding and a minimal learning curve for my team. Considering future growth, I prioritized scalability. Lastly, I sought a tool with robust support to compensate for the lack of back-end support at Laserfiche.

After a comprehensive and meticulous evaluation, Pantheon emerged as the best solution for our needs. The decisive factor was Pantheon’s unique multidev environment, which allows for isolated development environments for each team member. This feature facilitated smoother workflows, better collaboration, and the ability to work on multiple features simultaneously without interfering with the live site or each other's work. The multidev capability provided a level of flexibility and efficiency that was unmatched by the other tools, making Pantheon the optimal choice for enhancing our WordPress operations and instilling a sense of confidence and trust in this decision.

Implementing Pantheon Multidev Environments

Through detailed product demos and hands-on experimentation, I clearly understood how Pantheon's multidev feature works. Multidev lets each team member create their development environment, an exact replica of the live site. This means we could work on different features or fixes without affecting the live site or each other's work. The ability to merge these individual environments into the main site was a game-changer, showcasing Pantheon's impressive flexibility and efficiency.

When implementing this with the new WordPress site, I set up multidev environments for each developer on the team. This allowed us to concurrently develop new features, test various updates, and troubleshoot issues independently. I established a standardized workflow to ensure consistency and efficiency across the team. This included integrating the multidev environments with our version control system, setting clear guidelines for pushing changes, and thoroughly testing in isolated environments. Each developer could push their changes to their respective environments, conduct comprehensive tests, and then merge them into the main site once approved. This standardized approach ensured the live site's stability and significantly improved our development speed and collaboration.

Summary

• Spearheaded the Laserfiche website redesign, developing a detailed Gantt chart and RACI matrix, coordinating cross-departmental efforts, and ensuring an on-time launch with a visually appealing and user-friendly site.
• Revamped the brand's visual design for the web by refining typography for improved readability, ensuring color accessibility, and creating cohesive UI elements adhering to updated brand guidelines, resulting in a visually appealing and user-friendly Laserfiche website.
• Developed a comprehensive PowerPoint Content Creation Guide and information architecture, reducing content revision requests by 22%, enhancing user engagement, and improving turnaround times by providing clear guidelines and examples for optimized, user-centric content creation.
• Designed and implemented a user-friendly Mega Menu for Laserfiche, organizing content intuitively based on user research and navigation patterns, and incorporating flexible promo areas to dynamically highlight current offers and events, enhancing both user experience and marketing efforts.
• Conducted extensive usability testing and ensured responsiveness, multilingual support, and accessibility for the Laserfiche website redesign, enhancing user engagement, SEO ranking, and overall functionality, resulting in a successful launch and positive user reception.
• Successfully transferred over 2,000 posts from multiple legacy WordPress sites to a new environment by standardizing data using regex and efficiently managing large file uploads, ensuring data consistency and integrity throughout the process.
• Achieved significant improvements in Lighthouse scores through optimization efforts, increasing performance from 40 to 85, accessibility from 60 to 95, and SEO from 70 to 90, enhancing mobile performance, user experience, search engine rankings, and overall user satisfaction.