Micro-interactions & Animations
Micro-interactions & Animations
Creating animations that communicate, guide, and delight users
Creating animations that communicate, guide, and delight users
Industry
FinTech
FinTech
Timeline
1 week each
1 week each
Tools
After Effects, Lottie Files, Bodymovin
After Effects, Lottie Files, Bodymovin
Collaborators
Overview
Overview
Users often choose to hide sensitive information such as portfolio values while using the app in public. The interaction needed to feel instant, intuitive, and reassuring without disrupting the overall experience.
Users often choose to hide sensitive information such as portfolio values while using the app in public. The interaction needed to feel instant, intuitive, and reassuring without disrupting the overall experience.
Hide-Unhide Feature
Hide-Unhide Feature
The Hide/Unhide feature was designed for the portfolio summary section to give users more privacy and control over their financial data. With this option, users can quickly hide sensitive values such as total investment or portfolio worth when viewing the app in shared or public spaces, and unhide them when they want full visibility.
The Hide/Unhide feature was designed for the portfolio summary section to give users more privacy and control over their financial data. With this option, users can quickly hide sensitive values such as total investment or portfolio worth when viewing the app in shared or public spaces, and unhide them when they want full visibility.
Goal
Goal
Design a subtle & fun micro-interaction that provides clear visual feedback when users hide or reveal sensitive financial information.
Design a subtle & fun micro-interaction that provides clear visual feedback when users hide or reveal sensitive financial information.
Smooth transition between states
Smooth transition between states
Preserve screen context
Preserve screen context
Engaging ways to keep users hooked
Engaging ways to keep users hooked
Approach
Approach
I explored motion that smoothly transitioned between the hidden and visible states while maintaining the user's context. The animation was kept lightweight & intuitive to reinforce the action, making the interaction feel responsive without becoming distracting.
I explored motion that smoothly transitioned between the hidden and visible states while maintaining the user's context. The animation was kept lightweight & intuitive to reinforce the action, making the interaction feel responsive without becoming distracting.
EXPLORING THE RIGHT CONCEPT
Iterations
Iterations
Iterating through different transitions and timings helped refine an interaction that felt intuitive, engaging, purposeful, and aligned with the product experience.
Iterating through different transitions and timings helped refine an interaction that felt intuitive, engaging, purposeful, and aligned with the product experience.
Ideation 1
Ideation 2
Ideation 3
PROPOSED CONCEPT
Final Animation
Final Animation
Commodities Banner
Commodities Banner
The next project I worked on was the Commodities Banner. It was designed as a newly launched, one-time view element. It appeared only once, specifically when users landed on the commodities page, ensuring that the launch announcement felt timely, contextual, and non-intrusive.
The next project I worked on was the Commodities Banner. It was designed as a newly launched, one-time view element. It appeared only once, specifically when users landed on the commodities page, ensuring that the launch announcement felt timely, contextual, and non-intrusive.
