DEV Community

Attaullah Siddiqui
Attaullah Siddiqui

Posted on

Designing a Better Baby Name Search: What I Learned About Search UX, Unicode, and Relevance

A baby-name database sounds like a straightforward CRUD problem.

Store a name. Store its meaning. Add a few filters. Put a search box on top.

That was roughly how I looked at it when I started working on the naming side of Nurturepedia.

Then I started looking at how people actually search for names.

They don't always type the exact spelling. They search by meaning. They try different spellings. They mix cultural preferences. They want names from a particular origin or religion. Sometimes they know the sound they want but have no idea how the name is spelled.

At that point, "searching a database of names" becomes a much more interesting engineering problem.

This article walks through some of the technical and UX lessons I've learned while building a better baby-name discovery experience.

  1. Search starts with the data model

The first mistake is treating a baby name as a single string.

A useful name record needs considerably more context.

A simplified document might look something like this:

{
name: "Amélie",
normalizedName: "amelie",
gender: "girl",
meanings: ["work", "industrious"],
origins: ["French"],
religions: ["Christianity", "Neutral"],
alternateSpellings: ["Amelie"],
countries: ["France", "Canada", "United States"]
}

The important part here is that name and normalizedName are different fields.

The first is what the user should see.

The second is what the application can use for searching.

That separation becomes particularly useful when your dataset contains names with accents, diacritics, alternate spellings, or characters from different writing systems.

  1. Unicode can quietly break a search experience

JavaScript developers eventually run into an annoying fact: two strings can look identical but contain different Unicode representations.

For example, a character such as é can be represented using a single code point or as a base character followed by a combining accent.

JavaScript's String.prototype.normalize() exists specifically to deal with these different Unicode representations.

const value = "Amélie";

const normalized = value
.normalize("NFKD")
.replace(/\p{Diacritic}/gu, "")
.toLowerCase();

console.log(normalized);
// "amelie"

MDN documents the distinction between canonical and compatibility normalization, and compatibility normalization can be useful for search-oriented processing in appropriate situations.

The important caveat is that I would never replace the original display value with the normalized value.

Search data and presentation data have different jobs.

Keep:

Amélie

for the user.

Use:

amelie

for matching.

That small architectural decision prevents a lot of problems later.

  1. Exact matching isn't enough

Suppose somebody searches:

amel

A basic substring query might work.

But what should happen when they search:

amelie

Should an exact match appear first?

Almost certainly.

What about:

amelia

Should it appear near the top?

Probably—but not above an exact match.

This is where search becomes a relevance problem rather than a simple database lookup.

A practical ranking model might prioritize results roughly like this:

Exact name match

Exact normalized match

Prefix match

Alternate spelling

Meaning match

Broader relevance

The exact scoring strategy depends on the application, but the principle is important:

A search engine should understand what the user probably meant, not just what text happens to exist in the database.

MongoDB Search provides tools specifically for relevance-oriented search, including autocomplete, compound queries, filtering, faceting, and scoring.

For larger datasets, that gives you considerably more control than repeatedly throwing regex queries at a collection.

  1. Autocomplete is more than a nice UI feature

Autocomplete is usually treated as a front-end feature.

I think of it as part of the search architecture.

Imagine someone starts typing:

zay

The application can immediately suggest:

Zayn
Zaynab
Zayla
Zayyan

That changes the interaction completely.

Instead of making the user guess the exact spelling, the application starts helping them discover the dataset.

MongoDB Search's autocomplete operator is designed for this type of search-as-you-type experience and supports different tokenization and scoring options.

The challenge is making autocomplete useful without turning it into noise.

I would rather show five highly relevant suggestions than twenty vaguely related ones.

  1. Filters should reduce the problem, not create another one

Baby-name websites can accumulate a huge number of filters:

Gender
Origin
Religion
Meaning
Country
Style
Popularity
Zodiac sign

Technically, adding filters is easy.

Designing the interaction around those filters is harder.

A user doesn't necessarily know the difference between "origin" and "culture". They may want an Arabic name, a Muslim name, a Pakistani name, or a name that simply sounds familiar in their family.

Those concepts overlap, but they are not interchangeable.

That means the data model needs to preserve the distinctions rather than collapsing everything into one category.

This is one reason I prefer structured metadata over putting everything into a giant description field.

Structured data gives you more precise search, better filtering, better URLs, and better opportunities to explain why a result matched.

  1. Multicultural data needs extra care

This became one of the more interesting parts of building Nurturepedia.

A name can travel across countries and languages without keeping exactly the same pronunciation, spelling, meaning, or cultural association.

For example, a name might have an Arabic origin but be widely used in Pakistan, the United Kingdom, Canada, or the United States.

So I don't think a name database should pretend that one label tells the whole story.

For a multicultural dataset, I'd rather store several pieces of information independently:

{
name: "Example",
origins: ["Arabic"],
languages: ["Arabic", "Urdu"],
countries: ["Pakistan", "United Kingdom"],
meanings: [...],
alternateSpellings: [...]
}

That lets the application answer different questions without pretending that they're the same question.

It also makes the search experience considerably more useful for people who are choosing a name across cultural or linguistic boundaries.

  1. Don't destroy the original spelling while normalizing

There's another subtle issue here.

Suppose I normalize every name aggressively and remove every accent, punctuation mark, and special character.

That makes search easier.

It can also erase information that matters.

Search normalization should be an additional representation, not a replacement for the original data.

I generally think about it as:

Original data

├── Display value

├── Search value

└── Metadata

This pattern works well beyond baby names.

The same idea applies to:

International addresses
Product catalogs
Author names
Multilingual content
Geographic data
Music catalogs

Anything involving human language benefits from separating what humans see from what machines search.

  1. Ranking should be explainable

One feature I think gets overlooked in recommendation systems is explainability.

If a user sees a name near the top of a result list, they should have some idea why it is there.

For example:

Ayla
Turkish origin · "moonlight" · Girl

is much more useful than:

Ayla
Score: 0.873

The number may be useful internally.

The explanation is useful to the person.

This is particularly important for something as personal as choosing a baby's name. A mathematically "relevant" result doesn't automatically feel relevant to a parent.

The product has to connect the technical ranking system with a human decision.

  1. Privacy changes the architecture too

Another thing worth deciding early is what happens to search input.

A naming tool doesn't necessarily need an account.

It doesn't necessarily need to store every query.

And it definitely doesn't need to collect personal information simply because somebody searched for a name.

For example, the Nurturepedia Baby Name Finder is designed around name discovery, surname testing, middle-name selection, and sibling matching without requiring an account.

That isn't just a product decision.

It affects the architecture, analytics strategy, data retention, and the level of trust users have in the tool.

For consumer-facing products, "we don't need this data" can be a much better starting point than "how can we collect it?"

  1. Search quality is a product problem, not just a database problem

It's tempting to think:

Better database + better query = better search.

In practice, that's only part of it.

Good search has at least four layers:

Data quality

Normalization

Retrieval & ranking

User experience

If the underlying name data is wrong, sophisticated search won't save the product.

If normalization is poor, legitimate matches disappear.

If ranking is poor, users see technically valid but practically useless results.

And if the interface doesn't explain the results, users still don't know what to do next.

That is why I now treat search as a product feature rather than a database feature.

What I'd build differently today

If I were starting a baby-name search product from scratch, I'd design the foundation around these principles:

Preserve the original human-readable data.
Create separate normalized search fields.
Treat exact, prefix, fuzzy, and semantic matches differently.
Keep cultural and linguistic metadata structured.
Design filters around user questions rather than database columns.
Make ranking understandable where possible.
Keep unnecessary personal data out of the system.
Measure failed searches, not just successful clicks.
Test search with real spelling variations and multilingual input.
Optimize for helping someone make a decision, not just returning records.

The biggest lesson for me has been that a "simple search box" is rarely simple once real people start using it.

A baby-name database happens to make that especially obvious because names cross languages, cultures, spellings, sounds, and personal preferences.

That makes it a surprisingly good case study for search engineering.

A final thought

I'm still iterating on the naming experience in Nurturepedia, and the interesting part isn't adding another thousand names to a database.

It's figuring out how to help someone go from:

"I don't even know what name I'm looking for."

to:

"These three actually feel right."

That's where search stops being a technical feature and starts becoming a useful product.

Further reading
MDN: String.prototype.normalize()
MongoDB Search
MongoDB autocomplete operator
Google Search: Link best practices

Top comments (0)