Web Design + Animation
Website design Avada.io
Company
Avada
Timeframe
2025
Role
Web Design + Motion
Avada is an ecosystem of Shopify apps serving over 100,000 merchants worldwide — a suite of tools built to help e-commerce brands grow, from conversion and marketing to support and SEO.
The Brief
Goal: design a marketing website and motion system that shows how Avada supports merchants across the entire customer journey — from first visit, to conversion, to post-purchase and retention. Format: responsive web design plus a library of UI animations and motion graphics. Scope: homepage, product pages, component illustrations, and hero animations. Audience: Shopify merchants looking for tools to improve every stage of their store's customer experience.
Website Design
The website is structured to walk merchants through a discovery journey — from inspiring hero, to app showcases, through social proof, to final CTA. Each app (AOV, Chatty, SEO, Joy…) has its own visual identity while staying consistent within the shared design system.
Motion & Animation
A brand-aligned animation system — from hero illustrations that pull viewers into the product story, to feature motion graphics that explain how each app works. Every piece is optimized for web, staying smooth across devices and lightweight enough to keep pages fast.
Tools & Craft
The workflow starts in Figma — wireframes and visual design built as a unified component system. Animations are then composed in After Effects and exported as Lottie (JSON) via the Bodymovin plugin. This keeps each animation under a few dozen KB instead of multi-megabyte MP4s or GIFs, preserves crisp vectors at any size, and makes colors and timing easy to tweak directly in the browser.
