Designing an AI search experience for the European Parliament

DesignWebsite

EUR-Lex

Official EU law library

The European Parliament is the EU's legislative body overseeing EU lawmaking and the democratic functioning of other EU institutions.

EUR-Lex, the Parliament's search portal, caters to a diverse audience including MEPs, lobbyists, content managers, citizens, and journalists seeking specific legal information within the platform's extensive library of Eureopean regulations and access to all the editions of the Official Journal of the European Union from the very first one of December 1952!

The challenge

Is there a more efficient way to search the library?

Most visitors to the European Parliament's website are task-oriented, seeking specific information rather than exploring the institution. Once they find what they need, they typically leave the site.

The challenge lies in creating a search experience that delivers precise results swiftly, while also providing essential context for informed decision-making. The current keyword search through thousand of documents is inadequate for this purpose, leading to significant user frustration 🤯.

Our goal

Boosting search efficiency and accessibility

This project aims to enhance information accessibility across multiple websites by improving search functionality. By doing so, we want to help both internal and external stakeholders find information more quickly. Our goals are to

Reduce search failure rates by 50%.

Decrease service desk inquiries by 30%.

The EU Hemicycle is the chamber where MEPs debate and vote on European laws.

My role

Lead AI designer

As design lead, I partnered with a colleague to develop this solution. My primary responsibilities included understanding user needs and designing the final user interface.

Research

Finding patterns in the data

The current state

Most visitors to EUR-Lex are primarily seeking specific information rather than exploring the institution. The current search function is hindering this goal. Slow, complex searches with limited context and buried options create a poor user experience. To better serve users and encourage deeper engagement, the website needs to prioritise discoverability.

Task analysis study

A task analysis study identified the primary tasks performed by both internal and external users on the website. The study also assessed the platform’s effectiveness in guiding users to relevant content and documents.

Pain points we discovered

Many internal\external users aren't able to perform the task they want to do on EU Parliament's websites
Search is either too broad (returns too many similar pages/sites), or too narrow (shows irrelevant results for one particular website)
There is a mismatch between the priorities presented on the site and the priorities that EU citizens and EP staff have in mind
Users coming from search engines often lack context of where they are and where they can go next
Information is scattered all over departments, often duplicated and contradicting each other; and often presented in a way that makes it difficult to understand and find answers quickly

Digging through analytics

Analysis showed that the overwhelming majority of website traffic comes from search engines, split evenly between mobile (52%) and desktop. Users primarily seek news, facts, or reference materials. This confirms information consumption, not engagement.

Using event storming in the discovery phase

We used a tool called event storming to visualise the search flow. This collaborative workshop helped us map out the entire user journey. Unlike traditional methods, event storming encouraged creative problem-solving. Using sticky notes on a Miro board, we created a visual representation of the search process, which became a blueprint for wireframing.

Getting technical

Controlling the parameters with temperature and top_p

Although temperature and top_p are often considered technical parameters primarily relevant to engineers, they hold big implications for designers. An understanding of these parameters is crucial for creating AI driven experiences that align with user expectations and preferences.

Temperature

Temperature is the measure of entropy or chaos in generated output. It is a setting that controls randomness when picking words during text creation. Low values of temperature make the text more predictable and consistent, while high values let more freedom and creativity into the mix, but can also make things less consistent.

Top_p

Top_p or nucleus sampling is a setting that decides how many possible words to consider. A high top_p value means the model looks at more possible words, even the less likely ones, which makes the generated text more diverse.

Picking the right mix

High temperature + low top_p (poetry, music, ideation, writing)
Creative accuracy: common words put in unpredictable ways.
Low temperature + high top_p (legal docs, medical diagnosis, analysis) Predictable precision: rich vocabulary, high clarity.
High temperature + high top_p (art, innovation, advertising) Unpredictable chaos: unexpected results and combinations.
Low temperature + low top_p (fact checking, analysis, dataviz) Predictable order: deterministic, simple, predictable.

For our purposes we chose a low temperature + low top_p. We want simple predictable results that are targeted at a wide range of users.

AI design principles

Our philosophy behind what we build

Before staring on this project, we established a clear set of design principles and a philosophy specifically tailored for AI features. This framework served as our guide, shaping our vision.

Here is a sample of some of the principles we created.

Explain the benefits, not the technology

When explaining our AI, focus primarily on conveying how it makes part of the experience better or delivers new value, vs explaining how the underlying technology works.

Set the right expectations

Help our customers understand the application's capabilities by clearly stating what AI can do. This helps set expectations.

Anchor on familiarity

As you onboard users to a new AI-driven product or feature, guide them with familiar touchpoints.

AI UX patterns

A paradigm shift in how users interact

AI has changed how we interact with technology. While fundamental design principles remain true, the evolution of AI interfaces demand a new approach to user interaction. Here is a selection of patterns we used.

Suggestions

Sample suggestions guide users by offering potential next steps in a conversation. Presented as a list of 3-5 options, these pre-filled suggestions can be selected to continue the interaction easily.

Tokens

AI relies on tokens to understand the user's prompt and translate it into the result. This input pattern is universal, and it adheres closely to how we communicate naturally as humans. We choose our words wisely because they hold meaning.

Daemons

Daemons have particular personalities – one plays devil's advocate, one says encouraging things and compliments your writing, one synthesises your ideas, one fetches evidence and research for you, or maybe one elaborates on points you haven't fully explained.

Nudges

Nudges alert users to actions they can take to use AI, especially if they are just getting started as in-app clues or where they serve users.

Inpainting

We need ways to let it interact with our content directly. Inpainting gives users the ability the let AI adjust parts of a piece of content without regenerating or impacting the whole.

Citations

Instead of simply summarising a topic or a primary source, AI can collect information from multiple sources and aggregate it into a single response. Citations help users trace the information contained in a response back to its original material.

Design explorations

Experimenting with patterns and layout

We started on a journey of exploration to refine the search interface's user experience. We experimented with different layouts, information architecture, and interaction patterns to optimise the search flow.

Selecting UX patterns for our flow

Layout ideas

Final flow

Prototype of input screens (Search) and output screens (Results)

Design solution

Bringing it all together

The following section unveils the final design, highlighting its key features and the rationale behind the design decisions.