Interaction design
The motion system
For this sustainability mobile app, I designed motion interactions to enhance user engagement and intuitiveness. By using Material Design principles, the motion UX focuses on providing users with a seamless experience while navigating through tabs, managing lists, and interacting with controls like toggles and checkboxes. Each motion pattern adds clarity to the actions, providing feedback and guiding users through their tasks effortlessly.
Info
Company
Sphera
Scope:
New patterns to the Design System
Duration
Two weeks
My role
Lead Product Designer
Team
1 engineer, 1 designer, 1 PM
Heart Button Click
Scale & Fill
When clicked, the like icon undergoes a quick scale-up and fills with color to indicate the action, followed by a smooth return to its original size. This motion emphasizes the interaction, offering immediate feedback to the user. It makes the action of "liking" visually satisfying while maintaining the interface's simplicity. The quick enlargement followed by a reset reinforces the sense of interaction without disrupting the user's focus.
Checkbox
Scale & Pulse
When selected, the checkbox icon slightly scales up with a subtle pulse animation. This effect highlights the user’s interaction and confirms the selection visually while keeping the interface lightweight and user-friendly. The combination of scale and pulse reinforces the feeling of control without overwhelming the user experience.
Deleting List Item
Fade & Scale
Implements a fade-out combined with a scale-down motion when deleting a list item. This dual motion subtly reduces attention to the removed item, providing a clear signal of its removal without abrupt disruption to the surrounding interface. It reinforces the action while allowing the user to continue working without visual clutter.
Switch Between Tabs
Container Transform
Ensures fluid transition between tabs, where content seamlessly shifts from one view to another. The container transform allows for smooth context retention, avoiding abrupt changes and improving user navigation across sections. The effect helps users maintain a sense of place within the app, while also showing that content is interconnected.
Toggle
Switch
The toggle employs a sliding motion between the on and off states. The smooth, responsive animation makes the state change more intuitive, providing immediate visual feedback to the user. The thumb slides along a track, indicating the change clearly, while the background color subtly shifts to reinforce the active/inactive state.
Vertical Scroll
Content Transition
Vertical scrolling is enhanced with dynamic content transitions, which create a sense of continuity as the user scrolls through lists or content pages. The transitions prevent disorientation by offering slight movement to indicate more content, giving users a smoother, more intuitive scrolling experience across lengthy or layered content.
Horizontal Scroll
Slide & Fade
Uses a combination of sliding and fading when scrolling horizontally across panels or pages. This motion offers a natural left-right navigation feel while the fading elements signal a subtle transition from one view to another, providing a gentle visual cue to users and preventing jarring shifts between content blocks.
.png)