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.
• Option 3: Continue to use modal but determine where/when the modal should appear in the LG.

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 Code: Fix modal transitions #1524
  • 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
• Figma workspace

[github-actions]

Hey @rcpeng34! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[github-actions]

Hey @Ellenlp! Thanks for taking this issue.

To help keep everyone in the loop, please comment your Estimated Time to Completion (ETC) below!

Thanks again!

[Ellenlp]

Approach for Ticket #1522 and #1523:

Phase I: Exploration & Quick Fix for Overlay Issue

Objective: Investigate and resolve the issue affecting the overlay behind the modal to achieve a quick win without waiting for a full redesign.

Actions:

• Coordinate with @sydneywalcoff: Touch base to gain insights into the technical glitches causing the issue. Clarify the root cause and identify any existing constraints.
• Analyze Modal & Overlay Performance: Review the modal’s duration, animations, transitions, etc., to assess if adjustments are needed for smoother functionality.
• Quick Fix for Overlay: Investigate the possibility of using a fade-in or fade-out effect to resolve the glitch and improve the overlay behind the modal. Evaluate if this can be efficiently coded out to enhance user experience.

Phase II: Modal Design Enhancement

Objective: Rework and improve the overall modal design with best practices after possible technical issues are resolved.

Actions:

• Finalize design adjustments based on Phase I outcomes. Timeline and specific design details to be confirmed (TBA).

Resources:

Element: Modal and Transparent Overlay
Figma Design: Link to Figma File
Walkthrough: https://github.com/user-attachments/assets/72b29536-348a-4b31-aaca-385cd7962fe3

[sydneywalcoff]

@Ellenlp There are no known technical constraints, so feel free to get as creative as your heart desires.

I have no idea what's causing the glitch, but it shouldn't be too big of a deal to fix.

[anitadesigns]

At this time, we decided that this issue will be closed and Dev will fix the modal transition in the LG. At a later time, Design would like to return to examining whether the modal are helpful.