overlay interaction for login/forgot password page [ prototype ]

Figma features used :

• Auto-Layout

• open/swap overlay with smart animating ( different prototyping features )

• Components : [ Different variants and states: default,active,hovering. of the component ]

• For the ( Email / phone number box ) i used different features of responsive designing in auto layout like Fill Container & Fixed width and Constrains

Introduction:

Greetings everyone! Today, I'm excited to present an overlay design approach for the "Forgot Password" functionalities. This innovative solution aims to streamline the user experience while offering unprecedented flexibility in design modification.

Challenges with Traditional Design:

Traditionally, user authentication processes involve multiple page transitions, making it challenging to maintain consistency and adapt to changing design trends efficiently. Additionally, making even minor design adjustments often requires alterations across several pages, consuming valuable time and resources.

Introducing the Overlay Design:

overlay design tackles these challenges. By integrating the "Forgot Password" functionalities into a single overlay, i'm simplifying the user journey. Users can seamlessly switch between these actions without navigating away from the primary interface, reducing cognitive load and enhancing user engagement.

Project in Figma Community : Link