Interface Animations
Motion & Interaction Design
These animations were created for Belt, a productivity platform that uses AI to help users identify, organise, and manage tasks directly from their email. They were designed to support onboarding, guide user flows, and provide clear system feedback.
Each animation focused on improving usability, reducing uncertainty, or adding clarity to key functional moments. They were created using Lottielab and Figma, with the goal of making interactions feel more responsive, intentional, and intuitive.
Thread Summary – Loading Animation
Designed for Belt’s AI-powered email client to show system activity while generating a thread summary
This animation was created for the email thread view. When a user opens a conversation, Belt’s AI generates a concise summary based on the full message history. Because this requires analysing multiple emails and extracting key information, the process can take a few moments.
To make this waiting period feel intentional rather than passive, I designed a loading animation that clearly showed the system was actively generating the summary. This reassured users that progress was being made and helped the experience feel more responsive and intelligent.
Smart Folder Selection – Onboarding Animation
Designed to introduce Belt’s AI-powered email folder system during onboarding
Belt includes smart folders that automatically organise emails into meaningful categories, such as work requests, planned tasks, and completed work. This gives users a more structured, action-focused view of their inbox.
This animation was created for the onboarding flow when users first access folder management. It introduces the concept of customising their inbox by selecting which smart folders appear in their sidebar.
The animation visually shows folders being selected and added to the interface, helping users quickly understand both the interaction and its benefit. It reinforces user control while keeping the experience simple and approachable for first-time users.
Intelligent Onboarding – Loading Animation
Created for Belt's signup flow to illustrate system activity and reassure users during setup
This animation was created for the signup flow. After a user connects their email, Belt begins several background processes, including scanning emails for tasks, importing contacts, and syncing calendars.
Rather than relying on a generic spinner, I designed a custom animation that visually represented these actions. The sequence highlights three key processes:
Finding work requests – analysing email content to identify tasks
Adding contacts – importing external contacts into the platform
Syncing calendar – connecting meetings to support task planning
This helped users understand the value being created while they waited, turning a passive loading state into a meaningful introduction to Belt’s core functionality.