redesign modal transition

[anitadesigns]

Overview

The current design implementation of the modal, which appears after transitioning to the next page, creates a jarring user experience. Users see a flash of the previous screen before the modal is displayed, leading to a perception of unpolished design. This effect diminishes the professional quality of the site.

Feedback Details:

• Current Behavior: Upon navigating to the next page, a modal with a "LET'S CONTINUE" button appears. The transition involves a brief flash of the previous screen before showing the modal.
• User Concern: This behavior is unsettling and can make users feel as though there is a technical glitch. It disrupts the smooth flow of the user experience and feels out of place with the overall professionalism of the site.

Background Information:

The team has been revisiting the use of modals due to a shift in best practices. Currently, modals are used frequently, but modern design standards recommend using them sparingly and only for conveying vital information. The existing approach to modals does not align with these updated practices, making it an ideal time to reassess their implementation.

Suggested Design Improvements:

• Option 1: Display the modal within the current section, and upon clicking "LET'S CONTINUE," smoothly transition to the next section without flashing the previous screen.
• Option 2: Remove the modal and integrate its content into a dedicated page within the workflow to maintain consistency and avoid abrupt transitions.

Action items

• Review current flow
• Evaluate design
  • Note: Assess the current design flow to determine the best solution from the suggested improvements. Consider user experience and technical feasibility of both options.
• Implement design
  • Add new frames/flow to master pages (Mobile and desktop)
• handoff to Dev #Issue_Number
  • add deliverable(design or content)
  • remove dependency The issue or reason why this issue is in the icebox label
  • add ready for dev lead task ready for dev lead to evaluate label
  • move to new issue approval column

Resources

• MAIN: MAIN: Improve modal transition #1522
• Bonnie Comment