<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Attaullah Siddiqui</title>
    <description>The latest articles on DEV Community by Attaullah Siddiqui (@attaullah_siddiqi).</description>
    <link>https://dev.to/attaullah_siddiqi</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4136134%2F0f8d43ca-dce4-4b30-96e1-3cc0bdcebecc.png</url>
      <title>DEV Community: Attaullah Siddiqui</title>
      <link>https://dev.to/attaullah_siddiqi</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/attaullah_siddiqi"/>
    <language>en</language>
    <item>
      <title>Designing a Better Baby Name Search: What I Learned About Search UX, Unicode, and Relevance</title>
      <dc:creator>Attaullah Siddiqui</dc:creator>
      <pubDate>Mon, 21 Sep 2026 16:57:46 +0000</pubDate>
      <link>https://dev.to/attaullah_siddiqi/designing-a-better-baby-name-search-what-i-learned-about-search-ux-unicode-and-relevance-3lmf</link>
      <guid>https://dev.to/attaullah_siddiqi/designing-a-better-baby-name-search-what-i-learned-about-search-ux-unicode-and-relevance-3lmf</guid>
      <description>&lt;p&gt;A baby-name database sounds like a straightforward CRUD problem.&lt;/p&gt;

&lt;p&gt;Store a name. Store its meaning. Add a few filters. Put a search box on top.&lt;/p&gt;

&lt;p&gt;That was roughly how I looked at it when I started working on the naming side of &lt;a href="https://nurturepedia.com" rel="noopener noreferrer"&gt;Nurturepedia&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Then I started looking at how people actually search for names.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;At that point, "searching a database of names" becomes a much more interesting engineering problem.&lt;/p&gt;

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

&lt;ol&gt;
&lt;li&gt;Search starts with the data model&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;The first mistake is treating a baby name as a single string.&lt;/p&gt;

&lt;p&gt;A useful name record needs considerably more context.&lt;/p&gt;

&lt;p&gt;A simplified document might look something like this:&lt;/p&gt;

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

&lt;p&gt;The important part here is that name and normalizedName are different fields.&lt;/p&gt;

&lt;p&gt;The first is what the user should see.&lt;/p&gt;

&lt;p&gt;The second is what the application can use for searching.&lt;/p&gt;

&lt;p&gt;That separation becomes particularly useful when your dataset contains names with accents, diacritics, alternate spellings, or characters from different writing systems.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Unicode can quietly break a search experience&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;JavaScript developers eventually run into an annoying fact: two strings can look identical but contain different Unicode representations.&lt;/p&gt;

&lt;p&gt;For example, a character such as é can be represented using a single code point or as a base character followed by a combining accent.&lt;/p&gt;

&lt;p&gt;JavaScript's String.prototype.normalize() exists specifically to deal with these different Unicode representations.&lt;/p&gt;

&lt;p&gt;const value = "Amélie";&lt;/p&gt;

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

&lt;p&gt;console.log(normalized);&lt;br&gt;
// "amelie"&lt;/p&gt;

&lt;p&gt;MDN documents the distinction between canonical and compatibility normalization, and compatibility normalization can be useful for search-oriented processing in appropriate situations.&lt;/p&gt;

&lt;p&gt;The important caveat is that I would never replace the original display value with the normalized value.&lt;/p&gt;

&lt;p&gt;Search data and presentation data have different jobs.&lt;/p&gt;

&lt;p&gt;Keep:&lt;/p&gt;

&lt;p&gt;Amélie&lt;/p&gt;

&lt;p&gt;for the user.&lt;/p&gt;

&lt;p&gt;Use:&lt;/p&gt;

&lt;p&gt;amelie&lt;/p&gt;

&lt;p&gt;for matching.&lt;/p&gt;

&lt;p&gt;That small architectural decision prevents a lot of problems later.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Exact matching isn't enough&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Suppose somebody searches:&lt;/p&gt;

&lt;p&gt;amel&lt;/p&gt;

&lt;p&gt;A basic substring query might work.&lt;/p&gt;

&lt;p&gt;But what should happen when they search:&lt;/p&gt;

&lt;p&gt;amelie&lt;/p&gt;

&lt;p&gt;Should an exact match appear first?&lt;/p&gt;

&lt;p&gt;Almost certainly.&lt;/p&gt;

&lt;p&gt;What about:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.nurturepedia.com/name/amelia" rel="noopener noreferrer"&gt;amelia&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Should it appear near the top?&lt;/p&gt;

&lt;p&gt;Probably—but not above an exact match.&lt;/p&gt;

&lt;p&gt;This is where search becomes a relevance problem rather than a simple database lookup.&lt;/p&gt;

&lt;p&gt;A practical ranking model might prioritize results roughly like this:&lt;/p&gt;

&lt;p&gt;Exact name match&lt;br&gt;
        ↓&lt;br&gt;
Exact normalized match&lt;br&gt;
        ↓&lt;br&gt;
Prefix match&lt;br&gt;
        ↓&lt;br&gt;
Alternate spelling&lt;br&gt;
        ↓&lt;br&gt;
Meaning match&lt;br&gt;
        ↓&lt;br&gt;
Broader relevance&lt;/p&gt;

&lt;p&gt;The exact scoring strategy depends on the application, but the principle is important:&lt;/p&gt;

&lt;p&gt;A search engine should understand what the user probably meant, not just what text happens to exist in the database.&lt;/p&gt;

&lt;p&gt;MongoDB Search provides tools specifically for relevance-oriented search, including autocomplete, compound queries, filtering, faceting, and scoring.&lt;/p&gt;

&lt;p&gt;For larger datasets, that gives you considerably more control than repeatedly throwing regex queries at a collection.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Autocomplete is more than a nice UI feature&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Autocomplete is usually treated as a front-end feature.&lt;/p&gt;

&lt;p&gt;I think of it as part of the search architecture.&lt;/p&gt;

&lt;p&gt;Imagine someone starts typing:&lt;/p&gt;

&lt;p&gt;zay&lt;/p&gt;

&lt;p&gt;The application can immediately suggest:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.nurturepedia.com/name/zayn" rel="noopener noreferrer"&gt;Zayn&lt;/a&gt;&lt;br&gt;
Zaynab&lt;br&gt;
Zayla&lt;br&gt;
&lt;a href="https://www.nurturepedia.com/name/zayyan" rel="noopener noreferrer"&gt;Zayyan&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That changes the interaction completely.&lt;/p&gt;

&lt;p&gt;Instead of making the user guess the exact spelling, the application starts helping them discover the dataset.&lt;/p&gt;

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

&lt;p&gt;The challenge is making autocomplete useful without turning it into noise.&lt;/p&gt;

&lt;p&gt;I would rather show five highly relevant suggestions than twenty vaguely related ones.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Filters should reduce the problem, not create another one&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Baby-name websites can accumulate a huge number of filters:&lt;/p&gt;

&lt;p&gt;Gender&lt;br&gt;
Origin&lt;br&gt;
Religion&lt;br&gt;
Meaning&lt;br&gt;
Country&lt;br&gt;
Style&lt;br&gt;
Popularity&lt;br&gt;
Zodiac sign&lt;/p&gt;

&lt;p&gt;Technically, adding filters is easy.&lt;/p&gt;

&lt;p&gt;Designing the interaction around those filters is harder.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Those concepts overlap, but they are not interchangeable.&lt;/p&gt;

&lt;p&gt;That means the data model needs to preserve the distinctions rather than collapsing everything into one category.&lt;/p&gt;

&lt;p&gt;This is one reason I prefer structured metadata over putting everything into a giant description field.&lt;/p&gt;

&lt;p&gt;Structured data gives you more precise search, better filtering, better URLs, and better opportunities to explain why a result matched.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Multicultural data needs extra care&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;This became one of the more interesting parts of building Nurturepedia.&lt;/p&gt;

&lt;p&gt;A name can travel across countries and languages without keeping exactly the same pronunciation, spelling, meaning, or cultural association.&lt;/p&gt;

&lt;p&gt;For example, a name might have an Arabic origin but be widely used in Pakistan, the United Kingdom, Canada, or the United States.&lt;/p&gt;

&lt;p&gt;So I don't think a name database should pretend that one label tells the whole story.&lt;/p&gt;

&lt;p&gt;For a multicultural dataset, I'd rather store several pieces of information independently:&lt;/p&gt;

&lt;p&gt;{&lt;br&gt;
  name: "Example",&lt;br&gt;
  origins: ["Arabic"],&lt;br&gt;
  languages: ["Arabic", "Urdu"],&lt;br&gt;
  countries: ["Pakistan", "United Kingdom"],&lt;br&gt;
  meanings: [...],&lt;br&gt;
  alternateSpellings: [...]&lt;br&gt;
}&lt;/p&gt;

&lt;p&gt;That lets the application answer different questions without pretending that they're the same question.&lt;/p&gt;

&lt;p&gt;It also makes the search experience considerably more useful for people who are choosing a name across cultural or linguistic boundaries.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Don't destroy the original spelling while normalizing&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;There's another subtle issue here.&lt;/p&gt;

&lt;p&gt;Suppose I normalize every name aggressively and remove every accent, punctuation mark, and special character.&lt;/p&gt;

&lt;p&gt;That makes search easier.&lt;/p&gt;

&lt;p&gt;It can also erase information that matters.&lt;/p&gt;

&lt;p&gt;Search normalization should be an additional representation, not a replacement for the original data.&lt;/p&gt;

&lt;p&gt;I generally think about it as:&lt;/p&gt;

&lt;p&gt;Original data&lt;br&gt;
     │&lt;br&gt;
     ├── Display value&lt;br&gt;
     │&lt;br&gt;
     ├── Search value&lt;br&gt;
     │&lt;br&gt;
     └── Metadata&lt;/p&gt;

&lt;p&gt;This pattern works well beyond baby names.&lt;/p&gt;

&lt;p&gt;The same idea applies to:&lt;/p&gt;

&lt;p&gt;International addresses&lt;br&gt;
Product catalogs&lt;br&gt;
Author names&lt;br&gt;
Multilingual content&lt;br&gt;
Geographic data&lt;br&gt;
Music catalogs&lt;/p&gt;

&lt;p&gt;Anything involving human language benefits from separating what humans see from what machines search.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Ranking should be explainable&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;One feature I think gets overlooked in recommendation systems is explainability.&lt;/p&gt;

&lt;p&gt;If a user sees a name near the top of a result list, they should have some idea why it is there.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;p&gt;Ayla&lt;br&gt;
Turkish origin · "moonlight" · Girl&lt;/p&gt;

&lt;p&gt;is much more useful than:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://www.nurturepedia.com/name/ayla" rel="noopener noreferrer"&gt;Ayla&lt;/a&gt;&lt;br&gt;
Score: 0.873&lt;/p&gt;

&lt;p&gt;The number may be useful internally.&lt;/p&gt;

&lt;p&gt;The explanation is useful to the person.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;The product has to connect the technical ranking system with a human decision.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Privacy changes the architecture too&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Another thing worth deciding early is what happens to search input.&lt;/p&gt;

&lt;p&gt;A naming tool doesn't necessarily need an account.&lt;/p&gt;

&lt;p&gt;It doesn't necessarily need to store every query.&lt;/p&gt;

&lt;p&gt;And it definitely doesn't need to collect personal information simply because somebody searched for a name.&lt;/p&gt;

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

&lt;p&gt;That isn't just a product decision.&lt;/p&gt;

&lt;p&gt;It affects the architecture, analytics strategy, data retention, and the level of trust users have in the tool.&lt;/p&gt;

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

&lt;ol&gt;
&lt;li&gt;Search quality is a product problem, not just a database problem&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;It's tempting to think:&lt;/p&gt;

&lt;p&gt;Better database + better query = better search.&lt;/p&gt;

&lt;p&gt;In practice, that's only part of it.&lt;/p&gt;

&lt;p&gt;Good search has at least four layers:&lt;/p&gt;

&lt;p&gt;Data quality&lt;br&gt;
     ↓&lt;br&gt;
Normalization&lt;br&gt;
     ↓&lt;br&gt;
Retrieval &amp;amp; ranking&lt;br&gt;
     ↓&lt;br&gt;
User experience&lt;/p&gt;

&lt;p&gt;If the underlying name data is wrong, sophisticated search won't save the product.&lt;/p&gt;

&lt;p&gt;If normalization is poor, legitimate matches disappear.&lt;/p&gt;

&lt;p&gt;If ranking is poor, users see technically valid but practically useless results.&lt;/p&gt;

&lt;p&gt;And if the interface doesn't explain the results, users still don't know what to do next.&lt;/p&gt;

&lt;p&gt;That is why I now treat search as a product feature rather than a database feature.&lt;/p&gt;

&lt;p&gt;What I'd build differently today&lt;/p&gt;

&lt;p&gt;If I were starting a baby-name search product from scratch, I'd design the foundation around these principles:&lt;/p&gt;

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

&lt;p&gt;The biggest lesson for me has been that a "simple search box" is rarely simple once real people start using it.&lt;/p&gt;

&lt;p&gt;A baby-name database happens to make that especially obvious because names cross languages, cultures, spellings, sounds, and personal preferences.&lt;/p&gt;

&lt;p&gt;That makes it a surprisingly good case study for search engineering.&lt;/p&gt;

&lt;p&gt;A final thought&lt;/p&gt;

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

&lt;p&gt;It's figuring out how to help someone go from:&lt;/p&gt;

&lt;p&gt;"I don't even know what name I'm looking for."&lt;/p&gt;

&lt;p&gt;to:&lt;/p&gt;

&lt;p&gt;"These three actually feel right."&lt;/p&gt;

&lt;p&gt;That's where search stops being a technical feature and starts becoming a useful product.&lt;/p&gt;

&lt;p&gt;Further reading&lt;br&gt;
MDN: String.prototype.normalize()&lt;br&gt;
MongoDB Search&lt;br&gt;
MongoDB autocomplete operator&lt;br&gt;
Google Search: Link best practices&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>productivity</category>
      <category>opensource</category>
      <category>seo</category>
    </item>
  </channel>
</rss>
