Interface Animations
Motion & Interaction Design
These animations were created as part of Belt, a productivity platform that uses AI to help users identify, organise, and manage their work tasks directly from their email. They were designed to support onboarding, guide user flows, and add clarity to system feedback.
Each one was built with the aim of improving usability, reducing uncertainty, or bringing more life to functional moments in the product. They were created using Lottie and Figma, with a focus on enhancing key moments in the user journey.
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 in Belt’s email client. When a user opens a conversation, Belt’s AI generates a concise summary based on the full thread. Since this process involves analysing multiple messages and extracting key points, it can take a few moments to complete.
To make that waiting time feel intentional, I designed a loading animation that shows the system is actively working on the summary. This gave users a clearer sense of what was happening and made the experience feel more polished and intelligent.
Smart Folder Selection – Onboarding Animation
Designed to introduce Belt’s AI-powered email folder system during onboarding
Belt’s email client includes smart folders that use AI to automatically organise a user's inbox. Emails can be filtered into categories such as work requests, planned tasks, or completed work, giving users a more structured, action-oriented view of their inbox.
This animation was created for the onboarding experience when a user first visits the folder management screen. It introduces the concept of customising the inbox by selecting which smart folders they would like to include in their sidebar. The goal was to clearly communicate that users have control over how their email is organised, while keeping the interaction simple and approachable.
The animation visually shows folders being selected and added to the sidebar, helping users understand both the functionality and the benefit at a glance. It also reinforces the intelligence of the system without overwhelming first-time users with too much detail.
Intelligent Onboarding – Loading Animation
Created for Belt's signup flow to illustrate system activity and reassure users during setup
This animation was designed for the onboarding experience. Once a user signs up with their email address, Belt begins a series of background processes, including scanning emails for tasks, importing contacts, and syncing calendars.
Instead of using a generic loading spinner, I created a custom animation that visually communicated what the system was doing during setup. The sequence highlighted three key actions:
Finding work requests – Belt analyses email content to extract task-based language.
Adding contacts – External contacts are automatically imported and added to the user’s contact list.
Syncing calendar – Belt connects with the user’s calendar to display meetings and help plan tasks around them.
The animation helped users understand the value of what was happening while they waited. It added clarity and purpose to the loading state, while also introducing Belt’s key features from the very start.
