FLIR eComm Redesign

Designing a streamlined eComm experience for higher AOV and better UX.

Summary

In late 2020-2021, we took on a redesign of our eComm experience focused around an Add-to-cart modal, mini-cart, and (eventual) transition to headless eCommerce.

Why

FLIR.com is integrated with a third-party eComm provider (Scalefast). When customers click ‘Add to Cart’, they’re sent to a ScaleFast-hosted cart and checkout experience. Aside from the inevitably disjointed customer experience, analytics shows there are some major business issues with this structure:

• ~85% of customers are bouncing out of the cart and returning to flir.com. Presumably to evaluate other products or find accessories for the products they’re purchasing. A fairly low % of these customers actually return to cart to complete their order.

• Our checkout completion rate hovers around 10%.

In late 2020, we decided to make a long-term move towards headless eCommerce. We would make API calls out to Scalefast’s services (for fulfillment, fraud prevention, denied party screening, etc.), but the cart and checkout process would occur on flir.com. Around the same time, we launched our integration with Zuora which allowed customers to purchase and manage software subscriptions directly on flir.com.

Given these factors, we decided it was time to heavily invest in improvements to our eComm experience.

Role

I was Product Manager on flir.com during this time and pushed for us to invest in these improvements. Since our primary UX/UI designer left the company shortly before the project began, I also took the lead on UX strategy, UI mockups, and prototyping.

The core team included our Director of eCommerce, eComm manager, Digital Merchandising Manager, and account manager from ScaleFast.

Solution

I started by leading regular meetings where the team could review and evaluate the latest trends in eCommerce and generate ideas for changes that would likely drive the greatest ROI on flir.com.

We used Invision’s Freehand service to collaborate together and get a broad understanding of how leading eComm companies handled each step of the buying journey. The core team then added comments next to each screenshot explaining their perspective on pros and cons of each approach:

One of the primary goals of the project was to handle all of our product types in the same cart & checkout experience:

• Physical goods

• Subscription (software) products

• Training courses

• Services (calibrations, extended warranties, etc.)

This required careful consideration of which product data was most important to present to our users at each stage of the buying journey. We knew we would need a highly flexible UI to account for these various product types along with flir.com’s 9 languages.

Modal Design

Our primary goal with this project was to increase AOV by making cross-sells and upsells more prominent. We decided to follow the lead of some of FLIR’s top distributors (TEquipment, Grainger, etc.) along with B2C leaders like Adidas and REI and design a modal that would appear when customers click Add to Cart.

Customers would be immediately presented with top cross-sells along with a link to view all accessories for their product. Many of our products have 10+ accessories available so it was important to send customers to the full list if needed.

I generally prefer to start UI design with low-fidelity wireframes, but because we have a mature Sketch library and some team members had difficulty commenting on conceptual visuals, I opted to quickly create several variations of high-fidelity UI instead.

Here’s the modal solution we eventually selected:

Cross-sells and upsells will initially be generated from ScaleFast (as they are today), but we plan to eventually integrate with a product recommendations tool.

Mini-Cart Design

We also decided to implement a mini-cart that would appear on hover. Our headless eComm project will occur in phases, and we believe a mini-cart will help decrease cart abandons while we work on the full cart & checkout implementation.

Cart Design

We are currently (as of Summer 2021) in the middle of implementation for the mini-cart and modal. Once that is completed, customers will continue to be sent to ScaleFast to complete their checkout. The next phase will be to implement cart and checkout on flir.com.

With the cart, our main goal is to present clear product recommendations to customers that are likely to drive increased AOV. There are a few business drivers that greatly affected the final design of our cart:

• FLIR launched two major software products (Thermal Studio & Research Studio) over the last year and we would like to attach as many of these as possible to our premium thermal cameras. These are sold on a subscription basis (through an integration with Zuora) and we want the cart to clearly present costs of the one-time purchase along with recurring charges.

• FLIR is primarily a B2B company and we want to make it easy for customers to send their cart contents as an email so costs can easily be approved.

• We are in the middle of a major effort to sell more extended warranties, services (such as camera calibration), and training courses. These need to be handled smoothly by the cart.

The below screenshot shows our current plan for the final cart UI:

Here is the team’s working prototype (Sketch > InVision) showing our current plans.

Results

As this is a current project, we can’t yet know the outcome of these changes. Our initial plan was to run a series of usability studies to help validate the investment and design, but those plans were put on hold due to FLIR’s acquisition by Teledyne.

Our success criteria for the project is to 10x our development costs in the first year after full implementation. Based on an analysis of AOV and checkout completion when customers interact with Scalefast’s product recommendations, and the prominence of cross-sells in our treatment, we believe this is a realistic goal.