FLIR.COM 3.0

Building a scalable platform for FLIR’s long-term digital marketing growth

Summary

From 2017-2018, I was part of the core in-house team responsible for launching a redesigned FLIR.com built on a modernized tech stack. The new site delivered a much-improved customer experience, better brand presentation, and (as of 2021) continues to be a rock-solid foundation for FLIR’s digital marketing success.

Why

When I started at FLIR, we were running a (to put it gently) ancient tech stack with a Bootstrap-based front-end. We often had to pull all-nighters to ensure product launches went smoothly. FLIR had 8 distinct vertical marketing organizations and that broad focus had led to a disjointed website. In many ways, it felt like separate websites - the navigation would even change as you visited different product categories.

The internal justification was that our markets were so distinct, that there was little overlap in our customers’ journeys, and that our customers were sophisticated enough to know which products would solve their problem. The analytics data and customer feedback told a different story: Most customers were confused and had no idea which products might solve their problems. We set out to build a new website that would solve these core challenges:

• Present a unified (One FLIR) story.

• Build the Information Architecture around customer’s fundamental “Jobs To Be Done”. Design product selection features (like spec comparison) that would surface valuable information early in the customer journey instead of forcing users to find a  specific datasheet or Product Detail page.

• Decentralize website authoring so Product Management, Technical Support, and other groups could easily create pages - not just the digital marketing team.

Role

Prior to launch, I was part of the core team of designers and developers that set strategic direction and provided guidance to our development partner on UX / UI design and tech stack decisions. Initial UI design was drafted by the partner with our oversight. The Information Architecture was designed by my Manager and I.

Over the last three years, my job scope has expanded from UX / UI design to Product Manager for flir.com, overseeing future-looking improvements and accountable for growing eComm revenue and leads.

Solution

After a lengthy evaluation process, we settled on a tech stack including EPiServer CMS, Agility PIM, and a close integration with our Digital Asset Management system. We also selected a development partner that could help us through the transition. The front-end would be as modular and flexible as possible to deal with the challenges of a responsive site published in 8 languages.

Building the Landing Page Components

Once the foundational objectives of the project were defined, we worked closely with our development partners over ~9 months of 2-week sprints. We created ~30 flexible components our teams could use to create landing pages without needing to know a scrap of HTML or CSS. The components were designed to fit together like lego blocks and could be added in any configuration needed.

Here’s a sample of the final UI:

Building a Maintainable Product Catalog

The 30 components gave us the flexibility needed to build out landing pages tailored to our diverse set of audiences, but we needed a more rigid system for our Product Listing and Product Detail pages. Over time, FLIR.com had devolved into ~10 different templates for our product pages. Nearly every product launch was a science project, which had massive negative impacts on efficiency as well as our ability to present a consistent look and feel to our customers.

Using a PIM (Product Information Management) system allowed us to fully separate the layout of the page from the database of product information. This makes it relatively straightforward for us to give full access to Product Management, Service & Support, and other teams to update portions of our product catalog (specs, collateral, pricing, eComm links, etc.) without worrying about page layouts breaking. See below a sample of our 1,000+ product detail pages. The template has been designed to flex based on language, asset availability, accessories, related content, and many other variables. 

Our Product Listing pages are also generated based on content managed in the PIM:

Results

We’ve seen extraordinary eComm revenue (200+%) and lead growth since launching the new site in early 2018. And this project formed the foundation for that growth. There are elements I wish we’d done differently such as decreasing our focus on quickly launching an MVP and a greater investment in user testing. But overall, the foundational tech stack and UX/UI design of the site have been extremely well-received by both customers and staff. 

Since launching the site, I’ve taken on a progressively more leadership-oriented role. As my manager likes to say, when it comes to FLIR.com’s success or failure, I’m the “one throat to choke.” 

I’m certainly proud of the business goals we’ve reached (and exceeded) with the new site, but I’m most proud of the incredibly collaborative, unselfish, and customer-centered team we’ve built at FLIR. I’ve learned so much from working with this talented team, and I’m looking forward to bringing those learnings to bear at my next role.

Visit FLIR.com