designsystemet icon indicating copy to clipboard operation
designsystemet copied to clipboard

AI-powered smart search across documentation sources

Open mrosvik opened this issue 7 months ago • 8 comments

Description

Today, the documentation for Designsystemet is spread across several sections – including best practices, patterns, individual component pages, and insights in github. This makes it difficult for users to find relevant guidance and understand how to correctly use a given component. Sometimes users also wonder which components to use for a specific use case, and it’s not obvious where to start looking in the documentation.

To improve usability and adoption of Designsystemet, we propose adding a smart search function that works across the documentation and pages.

Goal

Make it easier for users to find, understand, and apply the right guidance from Designsystemet, no matter where the information is located.

  • Improve the user experience of the documentation by providing a simple, effective search that helps users quickly find relevant content.
  • Reduce incorrect usage of components and patterns by making it easier to identify what to use in different scenarios – and how to use it correctly.
  • Increase adoption and trust in Designsystemet by offering search that understands natural language and returns answers that feel relevant and helpful.
  • Support continuous learning and collaboration by surfacing insights not only from official documentation but also from GitHub issues, discussions, and other relevant sources.

Desired functionality

  • A unified search field that queries all documentation content
    • Search label: "Hva kan jeg hjelpe deg med?"
  • Results that include a direct answer (generated by AI), with clear references to where in the documentation the information comes from.
  • Search that understands natural language queries (e.g. "How do I show a warning that requires action?")
  • Ability to also search in content from theese sources and include relevant information with references:

What we expect users will ask

We expect that users will enter natural language queries like:

  • "How should I mark optional fields in a form?"
  • "How should I ask the user for bank account details?"
  • "How do I show a warning that requires user action?"
  • "What’s the best way to display an error message in a form?"
  • "Can I use a modal for confirmation?"
  • "Which component should I use to let users choose between multiple categories?"
  • "How can I help users recover from validation errors?"

These questions often span multiple parts of our documentation and reflect real-life use cases where users are seeking guidance, not just definitions. A smart search should help surface both direct answers and contextual information.

Why this matters

Designers and developers often struggle to find the right guidance. A smart, AI-powered search can reduce friction and increase the likelihood that users apply Designsystemet as intended — resulting in more consistent and accessible user experiences across public sector solutions.

Simple example

Image Image

mrosvik avatar May 20 '25 11:05 mrosvik

Here’s a first draft of the design. Any comments or suggestions?

Image

mrosvik avatar Aug 12 '25 11:08 mrosvik

🌈 Because life’s too short for dull colors?

Image

mrosvik avatar Aug 12 '25 11:08 mrosvik

Suggestion for the search button in header:

Image Image

Using surface-colors that shound be contrast approved with text-default. Background from Figma dev:

background: linear-gradient(104deg, var(--ds-color-surface-hover) 15.87%, var(--ds-color-surface-hover) 49.04%, var(--ds-color-surface-hover) 75.96%);

mrosvik avatar Aug 12 '25 11:08 mrosvik

Questions for discussion:

  • How can we measure that you are getting the right answers?
  • How is the AI solution kept up to date and secure?
  • Defining the scope

See the guide: https://www.regjeringen.no/contentassets/6332353676204e90a0ab94f9c968f967/no/pdfs/veileder-til-bruk-av-ki-assistenter.pdf

mrosvik avatar Aug 28 '25 08:08 mrosvik

Latest design:

Image

mrosvik avatar Sep 09 '25 08:09 mrosvik

Need designer feedback on how to handle search input design focus vs not focused @Febakke. On a sidenote we have currently removed the search button in place of autosearch as you type, but may want to add it back since it can be a bit annoying if you are writing a longer question for the ai.

not focused dark

Image

default focus dark Image

possible more subtle focus dark (add background-default as background) Image

not focused light

Image

default focus light

Image

possible more subtle focus light (accent-surface-active as border outside)

Image

The component can be seen live here just with no search results yet

oddvernes avatar Oct 16 '25 11:10 oddvernes

Daily 21.10.25, @mrosvik @oddvernes @Thunear @Barsnes @Febakke @frankdahle We’ve decided to put the AI part on hold for now and focus on delivering a great search experience instead, mainly because we don’t have the right competence in the team to maintain it, and current AI solutions tend to produce too many inaccurate answers.

mrosvik avatar Oct 21 '25 08:10 mrosvik

We’re putting search on hold for now. Setting up Meilisearch in Azure wasn’t straightforward — their one-click deploy didn’t quite work. It would also require several configuration changes to host it as an API on www, among other things. Given our current resources, we decided it’s not the right priority at the moment.

mrosvik avatar Nov 03 '25 09:11 mrosvik