Work

SecurEdge — Lottie Widgets for a SaaS Website

Twenty-three Lottie widgets that explain features of SecurEdge Networks' IT service platform (now TechGrid) on its website, organised in three tiers and delivered with resized variants.

Client: SecurEdge

SecurEdge Networks (now TechGrid) / Website / 2022

Twenty-three small explainers.

My role: UI illustration, animation and Lottie export

Delivered: 23 Lottie widgets in three tiers plus two dashboard animations, resized variants and a frame-duration sheet

Tools: Illustrator, After Effects, Bodymovin (Lottie)

The brief

SecurEdge Networks, which builds a platform for IT service providers and has since rebranded as TechGrid, needed animated widgets for its SaaS website: small interface scenes that show what each part of the platform does. The team supplied brand guidelines, an animation priority list and the dimensions each widget had to fit.

The build

I organised the set in the client's three tiers. Tier one is an infinite-scroll strip. Tier two covers ten feature messages, from automated workflows and flexible payments to a subscription stack and staying on brand. Tier three is ten more detailed product scenes: role select, quote tracker, payment box, guest main panel, customizations, files, text-type messages, signals, a filtered US map and a sensor map. Two larger dashboard animations show the Central Office and Customer Console products. Each widget was exported as Lottie with an HTML preview.

The constraint

Every widget had a fixed slot on the page, with set dimensions and a set duration. After the first delivery I rebuilt the whole set to new dimensions as a resized pass, and a frame-duration sheet went with the final files.