Details

      Description

      User Story:

      As a new insurance shopper, I want to be able to search for my business type/industry so that I know if I qualify for a Raylife insurance policy.

      Acceptance Criteria:

      Given that I’m a new shopper that has entered their zip code and product on the homepage to start a Business Owners Policy application, when I get navigated to the application, then I should be able to search for my business type/industry to see if I qualify for Raylife Insurance.

       

      Default View

      • When the user navigates to the page, the default state will not display any search results

      Application Header

      • Title:  "Welcome! Let's start."

      Search Field

      • Field is required (use OOTB required field validation message)
      • Field styling should match the mockups
      • Field title and secondary text to display should match the field matrix
      • Users should be able to type in the search field
        • Max characters: 256

      Search Functionality

      • Text-based search
      • Business information (Business Type & Secondary Text) will all come from an API
      • Search field should leverage type-ahead functionality.  As characters are typed in the field, search results will render below based on matching text from the Business Types listed in the field matrix
        • Optionally, users can click on the "Search" CTA to render search results below the search field

      Search Results Display & Functionality

      • Search results will display in alphabetical order by Business Type
      • Each Business Type's secondary text will be displayed below the Business Type name
      • Only one Business Type can be selected
      • A selection is required
      • If no search results are found, a message will appear in place of the search results
        • Message: “There are no results for “<text that the user entered>”. Please try a different search.

      Previous & Continue CTAs

      • "Previous"
        • When clicked, users will be navigated to the previous screen and changes will be discarded
      • "Continue"
        • Only enabled when all required fields have been fulfilled
        • When clicked, all changes will be saved and users will be navigated to the next screen
          • If unable to save, the user will not be navigated to the next screen and the following error message will display: “Unable to save your information. Please try again.”

      Mobile Responsiveness:

      • All pages must be mobile-friendly
      • NOTE: ACTUAL MOBILE-RESPONSIVE DESIGNS AS SHOWN IN THE MOCKUP WILL BE COVERED UNDER A SEPARATE EPIC (LPS-134804).  WE JUST NEED TO MAKE SURE THAT THE STORY CAN BE VIEWED AS PASSABLE ON A MOBILE DEVICE

      UX Design:

      https://www.figma.com/file/Qmm3nunuK0mRoNTX2JI6qy/raylife-website-2.4?node-id=42%3A255083 

        Attachments

          Issue Links

            Activity

              People

              Assignee:
              monica.posin Monica Posin (Inactive)
              Reporter:
              monica.posin Monica Posin (Inactive)
              Engineering Assignee:
              SE Support
              Recent user:
              Brunno Castro
              Participants of an Issue:
              QA Engineer(s) Assigned:
              Joel Rocha
              Votes:
              0 Vote for this issue
              Watchers:
              0 Start watching this issue

                Dates

                Created:
                Updated:
                Resolved:

                  Packages

                  Version Package
                  7.4.13 DXP GA1
                  7.4.3.4 CE GA4
                  Master