Hero Video for zluri.com's Homepage

The objective is to create an engaging, informative 20-second hero video for the Zluri homepage, highlighting AI app usage analytics and access review—optimized to load instantly and integrate seamlessly into the web experience.

Design Approach

1. Visual Motif

• Focus on Clarity: The visuals present a clear dashboard interface, showcasing real-time insights into AI application usage and user management.

• Color Palette: The use of a cool blue/green gradient background ensures a modern, tech-first feel, while drawing attention to floating interface elements.

• Highlighting Key Queries: A persistent prompt—“Which AI apps are in use?”—anchors the viewer’s focus and ties the animation together as a narrative thread.

2. Motion & Interaction

• Micro-Interactions: UI elements animate in and out smoothly, mimicking natural dashboard interactions—hover, click, and approval/revoke actions.

• Dynamic Overlays: Animated tooltips and notifications (“Jamie has been offboarded”) reinforce real-time feedback, showing how Zluri automates governance.

3. Information Visualization

• AI Apps Table: Displays a curated selection of popular AI tools (ChatGPT, Grammarly, Deepseek, Github Copilot, HeyGen, Otter.ai), each with active user counts and authorization status—in a visually organized format that implies scalability (with 24 apps, 1,291 total in the system).

• Access Reviews: Side panels animate in to display granular user access controls and real-time offboarding, emphasizing security and oversight.

Technical Execution

• Tools Used

  • Figma: For UI mockups, visual design, and layout of dashboard and table components. Design tokens and brand guidelines were leveraged for consistency.

  • After Effects: For advanced animation—transitioning panels, subtle UI micro-interactions, animated glows, and notification reveals.

• Optimization

  • Exported as webm: At ~1MB for 20s, ensuring nearly instant load time on homepage.

  • Font & Asset Efficiency: Only essential assets were rasterized; compositing was prioritized to maintain sharpness and legibility at web resolutions.

  • Seamless Loop: Video is designed to loop visually if required, ensuring continued engagement without drawing undue attention.

UI/UX Considerations

• Accessibility: High-contrast UI elements and readable font selection ensure clarity for diverse users.

• Modularity: Asset structure and animation layers in AE/Figma facilitate easy future updates or localization.

• Brand Alignment: Visuals reinforce Zluri’s trusted, proactive SaaS management identity.

This motion design project delivers an impactful, performant hero section video that visualizes Zluri’s platform value—leveraging AE for animation, Figma for layout/UI, and streamlined export as webm for web-first performance.