Introduction
The post button is one of Instagram's most crucial UI elements, yet its design lacked modern interaction principles. To address usability and engagement, I reimagined the static button as a Floating Action Button (FAB)—bringing efficiency, clarity, and delight to user interactions.
Problem Statement
The existing Post Button faced these challenges:
Static Design: The button felt outdated, with minimal interaction feedback.
Overwhelming Options: Users struggled to distinguish between creating Posts, Stories, and Reels.
Discoverability Issues: Key actions were buried under menus, leading to user frustration.
Goals
Transform the button into a dynamic, modern FAB with multi-action capabilities.
Simplify access to core actions (Posts, Stories, Reels).
Improve user engagement through intuitive interactions and delightful animations.
Research Insights
User Pain Points
Ambiguity: Users often clicked the wrong option (e.g., starting a Story instead of a Reel).
Cognitive Overload: Too many actions in one space made decision-making difficult.
Design Process
Ideation in Figma
Created low-fidelity wireframes directly in Figma to map out the layout and functionality.
Explored three FAB layouts:
Classic Dropdown: Simple vertical expansion.
Radial Menu: Circular arrangement of actions.
Layered FAB: A primary button expanding to show three core actions (final choice).
Wireframes to High-Fidelity Prototypes
Refined wireframes into interactive high-fidelity designs using Figma.
Incorporated Instagram's design system and visual language to maintain brand consistency.
Used Figma component or reusable elements like buttons, icons, and animations.
Animation Design
Leveraged Figma’s Smart Animate feature to design smooth button expansion:
FAB Expansion: Designed transitions with ease-in-out timing curves.
Tap Animations: Used scaling and opacity adjustments to add visual feedback.
Created a prototype showcasing micro-interactions for user testing.
Conclusion
The redesigned FAB transformed Instagram’s post creation process, offering users an intuitive, efficient, and delightful experience. By focusing on usability and adding interactive elements, this project highlights the power of thoughtful design in elevating everyday digital interactions.
