Autonomous Endpoint Management

Create a new AEM page to showcase the features of Tanium's autonomous controls and capture the story behind Tanium's autonomous workflows all within a month.

Goal: Define a tier system for product visualization on the website, accurately portray Tanium's autonomous endpoint management, and create an engaging page with a clear page story.

Role
Lead Designer

Areas
Prototyping, Branding, Design

Tools
Figma, LottieFiles, Webflow

Year
2025

Final design preview

Design process

Before building the AEM page, I proposed a tiered visualization system to guide how we present products across the website. The goal was to establish clear, scalable tiers that support consistent design execution while ensuring each product receives the appropriate level of visual emphasis based on its strategic value and user impact.

Product Visualization Tier System Version 1

We defined three tiers:

  • Tier 1: High Visualization – Immersive product experiences reserved for high-value offerings. These include interactive animations, rich video storytelling, or in-depth product walkthroughs.

  • Tier 2: Enhanced Visualization – A balanced approach with moderate interactivity, ideal for showcasing specific features or simplified workflows through contextual, engaging visuals that maintain performance.

  • Tier 3: Basic Visualization – Minimal styling with static imagery, focused on straightforward storytelling and essential product representation.

Finalized Product Visualization Tier System Guidelines

Once the system was in place, we aligned on a Tier 2 approach for visualizing the autonomous control workflow. I partnered closely with the AI product team and our platform design team to ensure the visualization was both accurate and approachable. This involved breaking down individual features, prototyping each component, and connecting them into a cohesive flow within Figma.

Design process for creating the autonomous controls workflow

Tier 3 final product visualizations

Final autonomous controls workflow animation prototype

Annotations for the final AEM page

Autonomous controls workflow assets

Final AEM pages for desktop, ipad, and mobile

Challenges

One of the biggest challenges in designing the page was navigating a tight timeline while managing the transition of my prototype from Figma to LottieFiles and ultimately to the website. Given the time constraints, I wasn’t able to fully optimize the iPad and mobile experiences. Since the majority of our users access the site via desktop, mobile responsiveness often becomes a tradeoff when timelines are compressed.

During development, we also ran into technical limitations with LottieFiles. The animation prototype for the AEM workflow was too large and complex, causing playback issues like stuttering. LottieFiles is typically best suited for lightweight, short animations, so this pushed its capabilities.

To resolve this, we discovered a workaround: by importing the Lottie animation into Webflow, extracting the animation code from Webflow’s library, and then embedding it back into our CMS, we were able to achieve smoother playback and eliminate the stuttering issue.

Impact

This project allowed us to establish a product visualization tier system—something Tanium had never implemented on the website before. It also resulted in a page that’s both engaging and informative, giving our sales team a valuable resource to help customers better understand Tanium’s autonomous endpoint management capabilities.

Performance metrics post-launch showed clear improvement:

  • Before launch:
    • Scroll depth: 42.77%
    • Active time spent: 3.3 minutes
    • Conversion rate: 0.27%

  • After launch:
    • Scroll depth: 58.95%
    • Active time spent: 5.7 minutes
    • Conversion rate: 0.55%

These results reflect stronger user engagement and a more effective storytelling experience.