[User Interface: Redesign]: Create Mockups for the AI-based search and search result page

[gtsueng]

Issue Name

Create Mockups for the AI search and search result page

Issue Description

The AI-based search is quite functional, though there are many reservations about the AI summary

Create mock ups of the AI-based search interface as well as the AI-based search result page

For the AI-based search interface, focus on:

• Designs for different entry points (rather than multiple designs for the same entry point)
• The copy used across each design to ensure that users understand how this search differs from the usual search

For the AI-based search result page:

• Enable the display of AI-based search on one side and API-based search on the other
• Enable linking of the AI-based search to the usual search result page with some sort of copy (like these results? see more)
• Include expected behavior if a result is not found or not expected for the AI-based search (e.g. - not what you're looking for? Try rephrasing your query).
• Ensure that users readily understand the difference between the search results

In both cases, the UI should make it clear that the function of the AI search is not an AI companion about data, rather its an AI tool to better return results based on existing metadata in the portal.

Issue Discussion

No response

Mockup URL

No response

WCAG Compliance Check

• The ui changes are not expected to significantly affect WCAG compliance (ex- wording changes)
• The ui changes have visual elements which have yet to be tested for WCAG compliance
• The ui changes have visual elements which have been tested for WCAG compliance
• The ui changes have passed all checks for WCAG compliance

Related WBS task

• Check here if the ui change is centered on the look and feel (https://github.com/NIAID-Data-Ecosystem/nde-roadmap/issues/52)
• Check here if the ui change includes new features (https://github.com/NIAID-Data-Ecosystem/nde-roadmap/issues/53)
• Check here if the ui change was suggested by the NIAID team (https://github.com/NIAID-Data-Ecosystem/nde-roadmap/issues/2)

For internal use only. Assignee, please select the status of this issue

• Not yet started
• In progress
• Blocked
• Will not address

Status Description

No response

UI change status check list

• This ui change has yet to be discussed between NIAID, Scripps, Leidos
• This ui change has been discussed/reported between NIAID, Scripps, Leidos
• This ui change has been mocked up
• This ui change has been implemented on Dev
• This ui change has been approved for Staging
• This ui change has been implemented on Staging
• This ui change has been approved for Production
• This ui change has been implemented on Production

[gtsueng]

@lisa-mml @rshabman @darya-pokutnaya we have generated mock ups for how the AI-assisted search might be toggled on the front-end.

Mock up of the toggle element with the landing page search bar

• Option 1: Adds a simple toggle on our existing interface. Note that the "sparkle icon" associated with AI can be included in this option; however, it was left off based on previous feedback for other elements that had included icons. This option has 2 views in the landing page mock up (one with the usual background and one with a white background to enhance the grouping of the search elements)
  • Pros: Provides the most context, most consistent with the existing design
  • Cons: AI toggle might be too subtle and get overlooked. Risk of being overlooked can be potentially mitigated by the inclusion of the sparkle icon
• Option 2: Move's the 'types' drop down to the front and adds an inline AI option similar to google search
  • Pros: AI option is where users would find it in other common platforms like google
  • Cons: May set up the comparison/expectation due to similarity to other platforms resulting in people expecting "AI generated search prompts, chat windows, AI generated summaries" all of which are NOT part of our AI-assisted search. Setting up the wrong expectations can cause users to be disappointed or confused.
• Option 3: Move's the 'types' drop down to the front and adds a simple toggle below the search bar
  • Pros: Cleans up the existing design a little to make room for a subtle toggle
  • Cons: As with option 1, it might be too subtle and get overlooked. Risk of being overlooked can be potentially mitigated by the inclusion of the sparkle icon.

Additional mockups to provide context for how each toggle element might look on the landing page

• Option 1A: How Option 1 looks with the existing background
• Option 1B: How Option 1 looks with a white background to improve the grouping of the search elements
• Option 2: How Option 2 looks on the landing page
• Option 3: How Option 3 looks on the landing page

Mock ups that would illustrate how the toggle would appear on the Search Results page: Note that with the expectation that the search results page will have a visual summary in the future, a version of the mock up with the visual summary is included so you can see how it would look in the immediate and longer term future

• Option A: when users arrive NOT using AI: Includes the option to use AI with a right hand toggle under the search bar
  • Option A: when users arrive using AI
  • Option A: with Visual Summary
  • Option A: with optional informational bar to link to documentation
• Option B: when users arrive NOT using AI: This version has the toggle on the left hand side under the search bar. Note that the majority of alternative views that apply to Option A can be applied to Option B as well

Note that the differences between Option A and B are minor so elements in the Option A mock ups of various views are also available for B, but are not included to reduce the number of files

[rshabman]

@gtsueng we can discuss tomorrow. However, my quick vote on the landing page is option 1, and to have the AI toggle 'on'. Most read left to right, so I noticed the AI toggle right away. When it's on the right side, I paid less attention to it. For search results, the same comment, I would support an option that has the information about turning on/off AI search on the left side.

[gtsueng]

Based on the discussion on 2025.10.28, we will:

• Move forward with the landing page toggle Option 1 (with the white background, but with a lower opacity/higher transparency of the background)
• Include the same toggle on the Search Result page, though it is unclear if it should be right on the right hand side above the search results or remain above the search bar
  • Keeping it above the search bar:
    • Pros:
      • It is in a consistent place relative to the search bar making it easy to find
    • Cons:
      • User interactions with it on the landing page may lead to the impression that the user must click on 'search' again to see the updated results. This is especially true if the user is on a small screen/mobile device and cannot see the dataset results change upon clicking.
      • This position suggests that it's active globally instead of being a filter that toggles on or off. This means that the expected behavior is that users click the search button again to see the change in result
  • Placing it with the search results:
    • Pros:
      • It is visibly grouped/associated with the search results. User expectations for clicking on it are that it will affect the current search results without needing to click on the search button again
    • Cons:
      • It may be less noticeable to users. Users may struggle to find it
      • This placement treats it as a filter. If users want to activate it globally, you might need to go back to the landing page or to have an additional toggle

Additional feedback

• The Advanced search button should be consistent between the landing page and search result page in terms of placement relative to the search bar
• The use of the wording AI-assisted search is preferred and should be used consistently
• The banner indicating the AI-assisted search is on is also preferred and should include some text indicated what AI-assisted search does

[gtsueng]

@lisa-mml @rshabman @darya-pokutnaya @hartwickma @sudvenk

We have mock ups of how the white background in Option 1 would look with varying levels of opacity. If you have a preferred opacity level, please let us know.

https://drive.google.com/drive/folders/1gKov9SzkxI5j_DVyk0V5M7RoDmWpZv18

Note, the opacity adjustment is a 'quick fix' type of change, so we will continue to push forward with the implementation to staging (in progress) without awaiting feedback on the preference.

[darya-pokutnaya]

@gtsueng Thank you for sending, we will take a look at the mockups and get back to you early next week!

[darya-pokutnaya]

@gtsueng Good morning, we reviewed the opacity and think 70% looks good.

[gtsueng]

@hartwickma @lisa-mml @darya-pokutnaya @rshabman @sudvenk

The UI for the AI-assisted search is now on Staging. Note that we are still working on optimizing its performance on the back end to improve the response times; however, it should be functional. Please feel free to try it out and let us know what you think. If you are happy with it, please let us know and we will move it to Production.

NOTE: the filter counts on Staging currently appear inaccurate due to the inclusion of Sample records on the staging API. Since sample records do NOT yet have a tab nor are displayed in staging, the filter counts appear inaccurate.